flutter 线性布局，弹性布局，层叠布局Row 水平布局组件 Row的属性属性说明 mainAxisAlignm

Row 水平布局组件

Row的属性
属性	说明
mainAxisAlignment	主轴的排序方式
crossAxisAlignment	次轴的排序方式
children	组件子元素

Row(
  crossAxisAlignment: CrossAxisAlignment.center,// 剧中
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,// 
  children: [ // 子组件
    IconContainer(Icons.home, color: Colors.red),
    IconContainer(Icons.search, color: Colors.blue),
    IconContainer(Icons.send, color: Colors.orange),
  ],
),

Column垂直布局组件

Column的属性
属性	说明
mainAxisAlignment	主轴的排序方式
crossAxisAlignment	次轴的排序方式
children	组件子元素

注：这里的主轴和上面的主轴刚好相反，Row的主轴是竖轴，Column的主轴的横轴。

Column(
  crossAxisAlignment: CrossAxisAlignment.center,// 剧中
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,// 
  children: [ // 子组件
    IconContainer(Icons.home, color: Colors.red),
    IconContainer(Icons.search, color: Colors.blue),
    IconContainer(Icons.send, color: Colors.orange),
  ],
),

double.infifinity 和double.maxFinite

double.infifinity 和double.maxFinite可以让当前元素的width或者height达到父元素的尺寸

class MyList extends StatelessWidget {
  const MyList({super.key});

  @override
  Widget build(BuildContext context) {
    return Container( // 和父盒子大小，高度相同的盒子，放在根目录里面则是全屏的大小。
      height: double.infinity, //
      width: double.infinity,//
      color: Colors.black26,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Icon(Icons.home, color: Colors.red),
          Icon(Icons.search, color: Colors.blue),
          Icon(Icons.send, color: Colors.orange),
        ],
      ),
    );
  }
}

弹性布局 Flex 和 Expanded

Flex组件可以沿着水平或者垂直方向排列子组件，如果你知道主轴，使用 Row 或 Column 会方便一些，因为 Row 和 Column 都继承自 Flex ，参数基本相同，所以能使用Flex的地方基本上都可以使用Row 或 Column 。 Flex 本身功能是很强大的，它也可以和 Expanded 组件配合实现弹性布局。

Flex的属性 direction：规定主轴方向，Axis.horizontal,水平方向，相当于Row组件。Axis.vertical垂直方向，相当于Column组件
Expanded的属性 flex：占父元素大小的分数，和css的flex布局一样

Flex(
  direction: Axis.horizontal, // 主轴方向
  children: [
    Expanded(flex: 2, child: IconContainer(Icons.home, color: Colors.red)),
    Expanded(
      flex: 1,
      child: IconContainer(Icons.search, color: Colors.orange), // 自定义的一个类，100宽100高的container
    )
  ],
);
这里就和使用Row组件是一致的.
Row(
  children: [
    Expanded(flex: 2, child: IconContainer(Icons.home, color: Colors.red)),
    Expanded(
      flex: 1,
      child: IconContainer(Icons.search, color: Colors.orange), // 自定义的一个类，100宽100高的container
    )
  ],
)

Flex(
  direction: Axis.vertical, // 主轴方向
  children: [
    Expanded(flex: 2, child: IconContainer(Icons.home, color: Colors.red)),
    Expanded(
      flex: 1,
      child: IconContainer(Icons.search, color: Colors.orange), // 自定义的一个类，100宽100高的container
    )
  ],
);

层叠布局（Stack、Align、Positioned）

Stack表示堆的意思，我们可以用Stack或者Stack结合Align或者Stack结合 Positiond来实现页面的定位布局。

Stack的属性
属性	说明
alignment	配置所有子元素的显示位置
children	组件子元素

Stack(
  alignment: Alignment.topLeft, //位置在左上角开始
  children: <Widget>[
    Container(
      height: 400,
      width: 300,
      color: Colors.red,
    ),
    const Text('我是一个文本',
        style: TextStyle(fontSize: 40, color: Colors.white))
  ],
),

Align的属性
属性	说明
alignment	配置所有子元素的显示位置
children	组件子元素

注：使用Alignment作为alignment的值时，Alignment Widget会以矩形的中心点作为坐标原点，即 Alignment(0.0, 0.0) 。 x 、 y 的值从-1到1分别代表矩形左边到右边的距离和顶部到底边的距离，因此2个水平（或垂直）单位则等于矩形的宽（或高），如 Alignment(-1.0, -1.0) 代表矩形的左侧顶点，而 Alignment(1.0, 1.0) 代表右侧底部终点，而 Alignment(1.0, -1.0) 则正是右侧顶点，即 Alignment.topRight 。Alignment 可以通过其坐标转换公式将其坐标转为子元素的具体偏移坐标： (Alignment.x*childWidth/2+childWidth/2,Alignment.y*childHeight/2+childHeight/2) 其中 childWidth 为子元素的宽度， childHeight 为子元素高度。

Container(
    height: 120.0,
    width: 120.0,
    color: Colors.blue.shade50,
    child: const Align(
    alignment: Alignment(2, 0.0), // 这里带入上面的公式可以知道实际的偏移量是（180，60）
    child: FlutterLogo(
       size: 60,
    ),
)),

Stack Positioned

Stack组件中结合Positioned组件也可以控制每个子元素的显示位置

Positioned的属性
属性	说明
top	子元素距离顶部的距离
bottom	子元素距离底部的距离
left	子元素距离左侧的距离
right	子元素距离右侧的距离
width	组件的宽度
height	组件的高度
child	组件子元素

Center(
  child: Container(
    height: 400,
    width: 300,
    color: Colors.red,
    child: Stack(
    // alignment: Alignment.center,
      children: const <Widget>[
        Positioned(
          left: 10, // 距离左侧10的widget
          child: Icon(Icons.home, size: 40, color: Colors.white),
        ),
        Positioned(
          bottom: 0, // 距离底部0
          left: 100, // 距离左侧100
          child: Icon(Icons.search, size: 30, color: Colors.white),
        ),
        Positioned(
          right: 0, // 距离右侧0
          child: Icon(Icons.settings_applications,
              size: 30, color: Colors.white),
        )
      ],
    ),
  ),
),

flutter 线性布局，弹性布局，层叠布局