Flutter 宽高自适应

在Flutter中，宽高自适应可以通过各种布局小部件实现。以下是一些常用的方法：

1. Container 组件：可以设置宽高的自适应。

Container(
  width: double.infinity, // 使用double.infinity可使Container宽度自适应
  height: 100, // 设置高度
  child: Text('宽高自适应'),
)

2. Expanded 组件：可以使子组件在父布局中填充可用空间。

Column(
  children: <Widget>[
    Expanded(
      child: Container(
        height: 100,
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

3. FittedBox 组件：可以使子组件根据父布局调整大小。

FittedBox(
  fit: BoxFit.cover,
  child: Container(
    width: 200,
    height: 100,
    color: Colors.green,
  ),
)

4. AspectRatio 组件：保持宽高比。

AspectRatio(
  aspectRatio: 16/9, // 设置宽高比
  child: Container(
    color: Colors.orange,
  ),
)

5. MediaQuery 组件：根据设备屏幕大小自适应。

Container(
  width: MediaQuery.of(context).size.width, // 使用MediaQuery获取屏幕宽度
  height: 100,
  color: Colors.purple,
)

6. IntrinsicWidth 组件：宽度根据子组件的内在宽度自适应。

IntrinsicWidth(
  child: Container(
    height: 100,
    color: Colors.yellow,
    child: Text('IntrinsicWidth'),
  ),
)

7. FractionallySizedBox 组件：按照百分比设置宽高。

FractionallySizedBox(
  widthFactor: 0.5, // 宽度是父布局宽度的一半
  heightFactor: 0.5, // 高度是父布局高度的一半
  child: Container(
    color: Colors.teal,
  ),
)

以上是一些常用的宽高自适应的方法，可以根据实际需求选择合适的布局小部件。