文章目录

• 概念介绍
• 使用方法
• 示例代码
• 经验总结

我们在上一章回中介绍了进度条Widget相关的内容，,本章回中将介绍 布局约束类Widget。闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的布局约束表示可以控制其它Widget大小，Flutter中提供了一些Widget,它们专门用来控制其它Widget的大小，我将它们称作约束布局类Widget.

之所以要介绍它们是因为上一章回中介绍进度条时发现无法调整进度条的大小，只有在进度条组件外层嵌套一个约束类Widget时才可以控制进度条的大小。

使用方法

常用的布局约束类Widget有Container(第四回介绍过)，Expanded,ConstrainedBox,SizedBox和FractionallySizedBox。除了Expanded外，它们都提供长度和宽度类属性，并且带有一个child属性，给长度和宽度属性赋值后可以约束child属性中widget的长度和宽度。

Expanded组件比较特殊，它表示尽可能地占满父类布局的剩余空间，所以它没有提供长度和宽度相关的属性，不过它提供了一个flex属性，用来控制长度和宽度的比例，它可以和Containter组件配合使用。注意该组件只能用在Column和Rom这种布局类组件中，我们在介绍Column和Rom组件时提到过该组件。

示例代码

 return Scaffold(
    appBar: AppBar(
      title: const Text("Example of All kinds of Constrained box"),
      backgroundColor: Colors.purpleAccent,
    ),
    body: Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        //最小和最大约束，最大不指定默认为无限大，不过不能大过父约束
        ConstrainedBox(
          constraints: const BoxConstraints(
            minHeight: 30,
            minWidth: 30,
          ),
          child: const Text("This is the column 1"),
        ),
        //固定大小约束
        const SizedBox(
          width: 300,
          height: 50,
          child: Text("This is the column 2"),
        ),
        //按照比例约束，需要在外面套一个约束才可以运行,不然报运行时错误
        Container(
          color: Colors.blue,
          width: double.infinity,
          height: 100,
          child: const FractionallySizedBox(
            widthFactor: 0.5,
            heightFactor: 0.2,
            child: Text("This is the column 3"),
          ),
        ),
        const SizedBox(
          width: 300,
          height: 20,
          child: Text("This is the column 4"),
        ),
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.blue,
            child: const Text("This is the column 5"),
          ),
        ),
        Expanded(
          flex: 2,
          child: Container(
            color: Colors.deepPurple,
            alignment: Alignment.centerRight,
            child: const Text("This is the column 6"),
          ),
        ),
        Expanded(
          flex: 3,
          child: Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: const Text("This is the column 7"),
          ),
        ),
      ],
    ),
  );

我们在这里只列出了核心代码，完整的代码可以查看Github上ex012文件中的代码。我们不演示程序运行结果了，建议大家自动动手运行并且体会一下约束布局的功能。

经验总结

最后我们对这些组件的功能和用法做一个总结，详细如下；

• Container组件通过它的width和height属性用来控制被约束组件的宽度和高度，而且可以设定背景颜色，它的使用范围最广；
• Expanded组件需要和Column和Row配合使用，通过它的flex属性来控制被约束组件在父组件中宽度和高度占用的比例,类似Android中的weight；
• ConstrainedBox组件需要配合BoxConstraints组件使用，用来控制被约束组件的最小/大宽度和高度；
• SizedBox组件通过它的width和height属性用来控制被约束组件的宽度和高度，相当于指定被约束组件的大小。它类似Container组件，只是不能设置背景色；
• FractionallySizedBox组件通过它的widthFactor和heightFactor属性用来控制被约束组件的宽度和高度在父布局中的占比，它类似Expanded中的Flex，不过不能直接在Column和Row中使用，需要在它的外层添加一个有长度和宽度的容器，比如Container.不然编译正常但是在运行时就会发生错误。

我的经验是使用Column和Row来控制整个布局的垂直和水平方向，然后通过Expanded组件及其flex属性来约束子组件的大小，这种方法类似于Android中的约束布局，并且布局中的子组件都是按照指定的比例排列，这样做的好处是可以适配各种大小不同的屏幕。

看官们，关于布局约束类Widget相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!