Flutter--Padding、Column、Row、Flex&Expanded

1.Padding

有时候，我们只想给组件加一个Padding值，那就可以考虑使用Padding，而非是Container，从而可以节约内存。

class PaddingDemo extends StatelessWidget {
  const PaddingDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Container(
        color: Colors.red,
        padding: const EdgeInsets.all(10),
        child: const Text('Hello world'),
      ),
    );
  }
}

2.Row

横向布局，平日开发里最常用的布局了，这里简单演示一下用法：

class IconContainer extends StatelessWidget {

  final IconData iconData;
  final Color bgColor;

  const IconContainer({Key? key,required this.iconData,this.bgColor = Colors.red}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 120,
      height: 120,
      decoration: BoxDecoration(color: bgColor),
      child: Icon(iconData),
    );
  }
}

class RowDemo extends StatelessWidget {
  const RowDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.grey,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主轴的对齐方式
        crossAxisAlignment: CrossAxisAlignment.start, //交叉轴的对齐方式
        children: const [
          IconContainer(iconData: Icons.home,bgColor: Colors.yellow,),
          IconContainer(iconData: Icons.assessment,),
          IconContainer(iconData: Icons.hail,bgColor: Colors.pink,),
        ],
      ),
    );
  }
}

3.Column

对上述代码稍微改一下，演示Column的用法:

class ColumnDemo extends StatelessWidget {
  const ColumnDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.grey,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主轴的对齐方式
        crossAxisAlignment: CrossAxisAlignment.start, //交叉轴的对齐方式
        children: const [
          IconContainer(iconData: Icons.home,bgColor: Colors.yellow,),
          IconContainer(iconData: Icons.assessment,),
          IconContainer(iconData: Icons.hail,bgColor: Colors.pink,),
        ],
      ),
    );
  }
}

上述两个例子主要演示的就是不同布局它们在主轴和交叉轴的对齐方式。

4.弹性布局（Flex Expanded）

Flex组件可以沿着水平或垂直方向排列子组件，如果知道主轴方向，使用Row或Column会方便一些，因为Row和Column都继承自Flex,参数基本相同，所以能使用Flex的地方基本上都可以使用Row或者Column。

Flex本身功能是强大的，它可以和Expanded组件配合实现弹性布局。

（1）Flex的Expanded的简单例子

class FlexDemo extends StatelessWidget {
  const FlexDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Flex(
      direction: Axis.horizontal,
      children: const [
        Expanded(flex: 1,child: IconContainer(iconData: Icons.home,bgColor: Colors.yellow,),),
        Expanded(flex: 2,child: IconContainer(iconData: Icons.hail,bgColor: Colors.pink,),),
      ],
    );
  }
}

(2)利用弹性布局实现一个较为复杂的例子

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 200,
          color: Colors.black,
        ),
        const SizedBox(height: 5,),
        Row(
          children: [
            //左边
            Expanded(flex: 2,child: SizedBox(
              height: 180,
              child: Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover,),
            ),),

            const SizedBox(width: 5,),

            //右边
            Expanded(flex:1,child:SizedBox(
              height: 180,
              child: Column(
                children: [
                  Expanded(flex:1,child:SizedBox(
                    width: double.infinity,
                    child: Image.network('https://www.itying.com/images/flutter/2.png',fit: BoxFit.cover,),
                  )),

                  const SizedBox(height: 5,),

                  Expanded(flex:2,child:SizedBox(
                    width: double.infinity,
                    child: Image.network('https://www.itying.com/images/flutter/3.png',fit: BoxFit.cover,),
                  )),
                ],
              ),
            )),

          ],
        ),
      ],
    );
  }
}

这些布局在开发中经常使用，我们需要根据实际情况去选择合适的布局。