Flutter组件-- Paddiing,Row,Column,Expanded组件

1、Paddiing组件    

在html中常见的布局标签都有Paddiing属性,但是Flutter中很多Widget是没有Paddiing属性的.这个时候我们可以使用Paddiing组件处理容器与子元素之间的间距.

属性	说明
Paddiing	Paddiing值,Edgeinsetss设置填充的值
child	子组件

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

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(70),
      child: Text("padding和child配合设置间距"),
    );
  }
}

2、Row水平布局组件 

属性	说明
mainAxisAlignment	主轴的排序方式 start:主轴开始位置挨个摆放元素; end:主轴的结束位置挨个摆放元素; center:主轴的中心点对齐, spaceBetween:左右两边的间距为0,其他元素之间平分, spaceAround:左右两边的间距是其他元素之间的间距的一半, spaceEvenly:所有的间距平分空间.
crossAxisAlignment	次轴的排序方式 start:交叉轴的起始位置对齐; end:交叉轴的结束位置对齐; center:中心点对齐; baseline:基线对齐(必须有文本的时候才会有效); stretch:先Row占据交叉轴,尽可能大的空间,将所有得到子Widget交叉轴的高度,拉伸到最大.
children	组件子元素

   

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround, //设置排列的方式
      // crossAxisAlignment: ,
      children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
          child:const Icon(
            Icons.home,
            color: Colors.white,
            size: 28,
          ),
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.blue,
          child:const Icon(Icons.search_off),
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.yellow,
          child:const Icon(Icons.share_arrival_time_sharp),
        ),
      ],
    );
  }
}

3、Column垂直布局组件    

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround, //设置排列的方式
      crossAxisAlignment:CrossAxisAlignment.center ,
      children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
          child:const Icon(
            Icons.home,
            color: Colors.white,
            size: 28,
          ),
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.blue,
          child:const Icon(Icons.search_off),
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.yellow,
          child:const Icon(Icons.share_arrival_time_sharp),
        ),
      ],
    );
  }
}

4、弹性布局(Flex Expanded)

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

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

  @override
  Widget build(BuildContext context) {
    return Row(

      children: [
        //Expanded和flex需要配合着使用
        Expanded(
          //占屏幕的1份
          flex: 1,
          child: Container(
          width: 100,//flex设置以后,这里设置width和height是无效的
          height: 100,
          color: Colors.red,
          child:const Icon(
            Icons.home,
            color: Colors.white,
            size: 28,
          ),
        ),
        ),

        Expanded(
          //占屏幕的2份
          flex: 2,
          child: Container(
          width: 100,
          height: 100,
          color: Colors.blue,
          child:const Icon(Icons.search_off),
        ),
        )
        
      ],
    );
  }
}