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

最新推荐文章于 2024-05-22 23:43:07 发布

talk_8

最新推荐文章于 2024-05-22 23:43:07 发布

阅读量465

点赞数

分类专栏：一起Talk Flutter吧文章标签： flutter Padding Align alignment Container

本文链接：https://blog.csdn.net/talk_8/article/details/130471966

版权

一起Talk Flutter吧专栏收录该内容

463 篇文章 10 订阅

订阅专栏

文章目录

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

我们在上一章回中介绍了布局约束类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"),
        ),
      ],
    )
);