android widget高度_(四) Flutter入门学习之Widget布局

为了实现界面内组件的各种排布方式，我们需要进行布局，和其他端不同的是，Flutter中因为万物皆Widget，所以布局也是使用Widget来完成的。

Flutter中的布局组件非常多，有31个用于布局的组件，Flutter布局组件[1]；

在学习的过程中，我们没必要一个个全部掌握，掌握最常用的，一些特殊的组件用到时去查文档即可；

Flutter将布局组件分成了 单子布局组件(Single-child layout widgets) 和 多子布局组件(Multi-child layout widgets)

一. 单子布局组件

单子布局组件的含义是其只有一个子组件，可以通过设置一些属性设置该子组件所在的位置信息等。

比较常用的单子布局组件有：Align、Center、Padding、Container。

1.1. Align组件

1.1.1. Align介绍

看到Align这个词，我们就知道它有我们的对齐方式有关。

在其他端的开发中(iOS、Android、前端)Align通常只是一个属性而已，但是Flutter中Align也是一个组件。

我们可以通过源码来看一下Align有哪些属性：

const Align({  Key key,  this.alignment: Alignment.center, // 对齐方式，默认居中对齐  this.widthFactor, // 宽度因子，不设置的情况，会尽可能大  this.heightFactor, // 高度因子，不设置的情况，会尽可能大  Widget child // 要布局的子Widget})

这里我们特别解释一下widthFactor和heightFactor作用：

• 因为子组件在父组件中的对齐方式必须有一个前提，就是父组件得知道自己的范围(宽度和高度)；
• 如果widthFactor和heightFactor不设置，那么默认Align会尽可能的大(尽可能占据自己所在的父组件)；
• 我们也可以对它们进行设置，比如widthFactor设置为3，那么相对于Align的宽度是子组件跨度的3倍；

1.1.2. Align演练

我们简单演练一下Align

class MyHomeBody extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Align(      child: Icon(Icons.pets, size: 36, color: Colors.red),      alignment: Alignment.bottomRight,      widthFactor: 3,      heightFactor: 3,    );  }}

1.2. Center组件

1.2.1. Center介绍

Center组件我们在前面已经用过很多次了。

事实上Center组件继承自Align，只是将alignment设置为Alignment.center。

源码分析：

class Center extends Align {  const Center({    Key key,    double widthFactor,    double heightFactor,    Widget child  }) : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);}

1.2.2. Center演练

我们将上面的代码Align换成Center

class MyHomeBody extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Center(      child: Icon(Icons.pets, size: 36, color: Colors.red),      widthFactor: 3,      heightFactor: 3,    );  }}

1.3. Padding组件

1.3.1. Padding介绍

Padding组件在其他端也是一个属性而已，但是在Flutter中是一个Widget，但是Flutter中没有Margin这样一个Widget，这是因为外边距也可以通过Padding来完成。

Padding通常用于设置子Widget到父Widget的边距(你可以称之为是父组件的内边距或子Widget的外边距)。

源码分析：

const Padding({  Key key,  @required this.padding, // EdgeInsetsGeometry类型(抽象类)，使用EdgeInsets  Widget child,})

1.3.2. Padding演练

代码演练：

class MyHomeBody extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Padding(      padding: EdgeInsets.all(20),      child: Text(        "莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。&