第二十二回：对齐和边距类Widget

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

概念介绍

我们在上一章回中介绍了布局约束类Widget，主要用来控制Widget的长度和宽度，布局的长宽确定后还一些细节需要调整，这些细节就是对齐和边距。长宽，对齐和边距一起作用于widget后就可以准确地描述一个Widget在布局中的位置。

在Flutter中对齐使用Align类表示，边距使用Padding类表示，这些类提供了相关的属性来控制自己，接下来将详细介绍它们的使用方法。

使用方法

Align

Align类提供alignment和child属性，给alignment属性赋值可以约束child属性中的widget.

给alignment属性赋值可以使用常量，比如center，这种对齐是模糊对齐。或者使FractionalOffset类的对象赋值，这种对齐是精准对齐，该类表示比率，它的构造方法接收两个参数，分别表示x和y方向的比率，而具体的值为child中组件的长度或者宽度乘以这个比率。比FractionalOffset(0.5,0.5)与center的对齐效果相同。
此外，Container组件也提供了alignment属性，我建议不要混合使用Container和Align的alignment属性，它们两个中选择一个使用就可以达到对齐效果。

Padding

Padding类提供padding和child属性，给panding属性赋值可以约束child属性中的widget.

给padding属性赋值需要使用EdgeInsets.all()/only()方法。其中all()表示在start,top,right,bottom四个方向上都添加边距。only()表示只在四个方向中的某一个方向上添加边距。

此外，给margin属性赋值时也可以使用这些方法。不过margin属性是Container组件的属性，它控制的是组件外部的边距，而padding属性是Padding组件的属性，它控制的是组件内部的边距。

示例代码

return Scaffold(
    appBar: AppBar(
      title: const Text("Example of Align and Padding"),
      backgroundColor: Colors.purpleAccent,
    ),
    body: Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        //Container也有Align功能，它和Align最好二选一
        Container(
          margin:const EdgeInsets.only(left: 30.0),
          width: 200,
          height: 200,
          color: Colors.blue,
          alignment:const FractionalOffset(0.1,0.2),
          child: const Text("Column 1"),
        ),
        //三种方法都可以实现居中对齐
        const Align(
          alignment: Alignment.center,
          child: Text("This is a text"),
        ),
        const Align(
          alignment: FractionalOffset(0.5, 0.5),
          child: Text("This is a text"),
        ),
        const Center(
          child: Text("This is a text"),
        ),
        //全部和部分设置内边距
        const Padding(
          padding:EdgeInsets.all(10.0),
          child: Text("This is a text"),
        ),
        const Padding(
          padding: EdgeInsets.only(left: 10.0),
          child: Text("This is a text"),
        ),
      ],
    )
);

我在这里只列出了核心代码，完整的代码可以查看Github上ex013文件中的代码。我建议大家动手调整一下代码，这样可以体会到对齐的边距的真实效果。

经验总结

在实际项目中对齐常用来控制布局中的子组件，也就是指父布局中子组件的对齐方式。我的经验是：

• 如果父布局中使用了Container组件，那么使用它的对齐属性控制子组件的对齐方式；
• 如果父布局中没有使用Container组件那么需要在子组件外嵌套一个Align组件，专门使用它来控制子组件的对齐方式。这两种方法在代码中都有示例，大家可以参考示例程序中的代码。

边距分内外两种边距，我的经验是：

• 如果父布局中没有使用Container组件那么需要在子组件外嵌套一个Padding组件，专门使用它来控制子组件的内边距；
• 如果父布局中使用了Container组件那么直接使用父布局的margin属性，它可以控制子组件的外部边距。通常外部边距使用的情况比较多。

看官们，关于对齐和边距类Widget相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!