9、线性布局（Row和Column）

自定义的IconContainer

void main() {
  runApp(MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(title: const Text("这是导航栏")),
        body: MyApp(),
      )));
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return IconContainer(Icons.ac_unit,color: Colors.yellow);
  }
}
//自定义的IconContainer
class IconContainer extends StatelessWidget {
  Color color;
  IconData icon;
  // IconContainer(this.icon ,{super.key,required this.color}); // 与下方效果一样
    // IconContainer(this.icon ,{Key? key,required this.color}) : super(key: key);
  IconContainer(this.icon ,{Key? key, this.color=Colors.red}) : super(key: key); //可传入颜色（也可以不用传入颜色）
  
@override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center, //内容居中
      color: color,
      height: 200,
      width: 200,
      child: Icon(icon,size: 50,),
    );
  }
}

mainAxisAlignment 用于指定子组件在主轴（水平方向）上的对齐方式

1. MainAxisAlignment.start（默认值）：子组件将在主轴的起始位置对齐。

2. MainAxisAlignment.end：子组件将在主轴的末尾位置对齐。

3. MainAxisAlignment.center：子组件将在主轴的中心位置对齐。

4. MainAxisAlignment.spaceBetween：子组件将会均匀地分布在主轴上，首个和最后一个子组件分别与 Row 的起始和末尾位置对齐。

5. MainAxisAlignment.spaceAround：子组件将会均匀地分布在主轴上，子组件之间以及首个和最后一个子组件与 Row 的边界之间有相等的间距。

6. MainAxisAlignment.spaceEvenly：子组件将会均匀地分布在主轴上，子组件之间和首个、最后一个子组件与 Row 的边界之间的间距都相等。

7. MainAxisAlignment.spaceEvenly：子组件将会均匀地分布在主轴上，子组件之间和首个、最后一个子组件与 Row 的边界之间的间距都相等。

crossAxisAlignment 用于指定子组件在交叉轴（垂直方向）上的对齐方式（要有父容器）

1. CrossAxisAlignment.start：子组件将在交叉轴的起始位置对齐。

2. CrossAxisAlignment.end：子组件将在交叉轴的末尾位置对齐。

3. CrossAxisAlignment.center（默认值）：子组件将在交叉轴的中心位置对齐。

4. CrossAxisAlignment.stretch：在交叉轴上拉伸子组件以匹配父容器的高度。

5. CrossAxisAlignment.baseline：子组件将使用 textDecorationStyle 属性构建一个水平基线对齐。

Row 水平布局组件

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity, //无穷的
      height: double.infinity,
      color: Color.fromARGB(255, 7, 189, 158),
      child:  Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween, //X轴
      crossAxisAlignment:CrossAxisAlignment.center, //相对与Container(父盒子) Y轴
      children: [
        IconContainer(Icons.ac_unit,color: Colors.yellow), //自定义的方法
        IconContainer(Icons.home_max,color: Color.fromARGB(255, 226, 12, 47)),
        IconContainer(Icons.ac_unit,color: Color.fromARGB(255, 9, 31, 155)),
      ],
    ),
    );
  }
}

Column垂直布局组件

class MyColumn extends StatelessWidget {
  // const MyColumn({super.key});
 const MyColumn({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
        return Container(
      width: double.infinity, //无穷的
      height: double.infinity,
      color: Color.fromARGB(255, 7, 189, 158),
      child:  Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween, //  Y轴
      crossAxisAlignment:CrossAxisAlignment.end, //相对与Container  X轴
      children: [
        IconContainer(Icons.ac_unit,color: Colors.yellow),
        IconContainer(Icons.home_max,color: Color.fromARGB(255, 226, 12, 47)),
        IconContainer(Icons.ac_unit,color: Color.fromARGB(255, 9, 31, 155)),
      ],
    ),
    );
  }
}

double.infifinity 和double.maxFinite

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

区别：

我想成为我的父母所允许的最大的(double.infinity)

一些小部件允许他们的孩子像他们想要的那样大。