Flutter(五)——单一子元素组件
作者：互联网
本文目录
前言
前面已经介绍了基本的组件使用，这篇博主主要介绍单一子元素组件（Single-child）。单一子元素组件包括Container，Padding，Center，Align，FittedBox以及AspectRatio等。
Container
在Flutter开发中，使用的最多的就是这个Container，因此我们必须牢牢掌握使用它的相关知识。
这里博主先介绍一下Container的对齐方式(alignment)，该属性接受Alignment对象。在其里面会传入两个参数，即double x和double y，取值范围都在[-1,1]之间，如下图所示：
从上图我们可以看出来，中间的位置X和Y都为0，它表示内容在Container里面正中间的位置。如果你想显示一段文字在中间，代码如下 ：
body: Container(
color: Colors.red,
alignment: Alignment(0.0, 0.0),
child: new Text("Container",),
),
这里我们设置了背景色为红色，同时设置了文本的坐标为屏幕中间，如果你想把它设置到其他位置，更改Alignment的坐标值就可以了，上述代码实现效果如下：
从上面讲解的内容我们可以看出来，其坐标的值在[-1,1]之间，如果专门去记坐标的位置，会非常的麻烦，所以我们就需要用到Flutter提供的位置常量，如下所示：
Alignment.center==Alignment(0.0,0.0)
Alignment.centerLeft==Alignment(-1.0,0.0)
Alignment.topCenter==Alignment(0.0,-1.0)
Alignment.topLeft==Alignment(-1.0,-1.0)
Alignment.topRight==Alignment(1.0,-1.0)
Alignment.bottomCenter==Alignment(0.0,1.0)
Alignment.bottomLeft==Alignment(-1.0,1.0)
Alignment.bottomRight==Alignment(1.0,1.0)
Alignment.centerRight==Alignment(1.0,0.0)
Container的约束
有的时候，我们需要约束容器所占据的大小与空间。在大部分情况下，可以通过BoxConstraint来构建完成，BoxConstraint的属性如下：
| 属性 | 取值 |
|---|---|
| minWidth | 最小宽度 |
| minHeight | 最小高度 |
| maxWidth | 最大宽度 |
| maxHeight | 最大高度 |
我们先来看一段使用的代码：
body: Container(
color: Colors.green,
child: new Text("静歌很棒",),
constraints: BoxConstraints(
maxHeight: 400.0,
maxWidth: 300.0,
minHeight: 200.0,
minWidth: 200.0,
),
),
如果使用如上代码，那么显示的效果将如下图所示：
有时候，我们需要把存储在child中的Container扩展到最大，值需要加入一些约束条件即可，代码如下：
body: Container(
color: Colors.green,
child: new Text("静歌很棒",),
constraints: BoxConstraints.expand(width: 250.0,height: 100.0),
),
这里的显示效果如下图所示：
如果没有指定参数如下面代码所示，那么它将会占满整个屏幕的空间。：
constraints: BoxConstraints.expand()
在Container里面，我们可以也可以设置外边距margin和内边距padding，使用代码的方式如下：
body: Container(
color: Colors.green,
child: new Text("静歌很棒",),
constraints: BoxConstraints.expand(width: 250.0,height: 100.0),
margin: EdgeInsets.only(top: 60.0,left: 60.0),
padding: EdgeInsets.only(top: 60.0,left: 60.0),
),
这里我们统一设置了外边距，内边距距离上左的距离都是60，显示的效果如下：
Container实战
下面我们来做一个有意思的东西，Container支持装饰器（Decoration），可以支持背景图线性或者径向渐变，也能支持边框，圆角，阴影等属性，下面是实现代码：
body: Container(
constraints: BoxConstraints.tightFor(width: 300.0,height: 150.0),
margin: EdgeInsets.only(top: 60.0,left: 80.0),
decoration: BoxDecoration(
border: Border.all(width: 3,color: Color(0xffaaaaaa)),//边框
//阴影效果
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2.0,2.0),
blurRadius: 4.0
),
],
//实现渐变背景色，支持线性，径向渐变
gradient: LinearGradient(
colors: [Colors.red,Colors.blue,Colors.yellow],
),
),
transform: Matrix4.rotationZ(.3),
alignment: Alignment.center,
child: Text("我实现的线性渐变",style: TextStyle(color: Colors.white,fontSize: 33),),
),
这段代码其实也很好理解，先设置了其大小约束，然后设置其外边距，然后设置其装饰器，其中装饰器，先设置其边框效果宽3，颜色为0xffaaaaaa，然后设置阴影效果颜色为black54，阴影大小，模糊度，然后设置渐变颜色为红，绿，黄三色渐变，旋转，居中，添加文字，显示的效果如下：
SingleChildScrollView
SingleChildScrollView从名字上来看，就是一个滚动布局，在Java开发Android程序中，滚动布局只能嵌套一个组件，这个控件也一样等价于ScrollView，如果没有使用该控件，而界面组件超出屏幕，也是无法滚动的，同样，它也可以设置滚动的方向，垂直滚动还是水平滚动，具体的使用代码如下：
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Text("评选赢大奖 | CSDN技术公开课总评选火热进行中",style: TextStyle(fontSize: 33),),
Text("评选赢大奖 | CSDN技术公开课总评选火热进行中",style: TextStyle(fontSize: 33),),
Text("评选赢大奖 | CSDN技术公开课总评选火热进行中",style: TextStyle(fontSize: 33),),
Text("评选赢大奖 | CSDN技术公开课总评选火热进行中",style: TextStyle(fontSize: 33),),
Text("评选赢大奖 | CSDN技术公开课总评选火热进行中",style: TextStyle(fontSize: 33),),
Text("评选赢大奖 | CSDN技术公开课总评选火热进行中",style: TextStyle(fontSize: 33),),
Text("评选赢大奖 | CSDN技术公开课总评选火热进行中",style: TextStyle(fontSize: 33),),
Text("评选赢大奖 | CSDN技术公开课总评选火热进行中",style: TextStyle(fontSize: 33),),
Text("评选赢大奖 | CSDN技术公开课总评选火热进行中",style: TextStyle(fontSize: 33),),
],
),
),
代码就不用多说了，就是使用了这个滑动组件，然后里面全是Text组件，实现效果如下：
FittedBox
FittedBox在官方文档中介绍的并不是很多，但其实在实际的使用中， 使用的还是非常多的，所以非常重要，其主要的功能就是负责对组件进行缩放和位置调整。先来看看它的属性：
| 属性 | 取值 |
|---|---|
| fit | 缩放方式 |
| alignment | 对齐方式 |
fit指的是缩放本身占据FittedBox的大小，可以理解为Android里缩放因子scaleType，其默认值是BoxFit.contain。也就是说，假如在FittedBox中给fit设置了BoxFit.contain，那么当其子组件的宽度或高度被缩放到父容器限定的值时，就会被停止缩放。这个组件在后续项目中讲解，这里单独使用效果不是很明显。
FractionallySizedBox
FractionallySizedBox的用途时基于宽度缩放因子和高度缩放因子来调整布局大小的，大小有可能超出其父组件的设置。如果FractionallySizedBox中的子组件设置了大小，它也不会起作用，而会被FractionallySizedBox的宽度缩放因子和高度缩放因子做覆盖，使用代码如下：
body: Container(
color: Colors.red,
height: 200.0,
width: 200.0,
child: new FractionallySizedBox(
alignment: Alignment.topLeft,
widthFactor: 1.5,
heightFactor: 0.5,
child: new Container(
width: 50.0,
color: Colors.yellow,
),
),
),
在上述代码中，即使我们对FractionallySizedBox里的Container设置了宽度，也是不起作用的。Flutter值会识别FractionallySizedBox中的widthFactor和heightFactor所设置的值，上述代码实现效果如下：
ConstrainedBox
ConstrainedBox是一种约束限制的布局，在其约定的方位内，比如最大高度，最小宽度，其子组件是不能逾越的，使用的代码如下：
body: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 100.0,
minHeight: 100.0,
maxWidth: 250.0,
maxHeight: 250.0,
),
child: new Container(
width: 300.0,
height: 300.0,
color: Colors.blue,
),
),
这里你设置了300，但其最大只有250，所以最终会显示250的大小，因为其始终不可逾越这种约束布局，实现效果如下：
Baseline
Baseline是一种基线对齐方式，你可以把它想象成英文书写的本子的线，它可以把不想关的几个组件设置在同一个水平线上进行对齐，下面我们简单的来使用：
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Baseline(
baseline: 100.0,
baselineType: TextBaseline.alphabetic,
child: new Text("LiYuanJing",style: TextStyle(fontSize: 18.0,textBaseline: TextBaseline.alphabetic),),
),
new Baseline(
baseline: 100.0,
baselineType: TextBaseline.alphabetic,
child: new Text("HeFan",style: TextStyle(fontSize: 30.0,textBaseline: TextBaseline.alphabetic),),
),
new Baseline(
baseline: 100.0,
baselineType: TextBaseline.alphabetic,
child: FlutterLogo(size: 100,),
),
],
),
上面代码就一行组件，一行里面有二个文本，一个FlutterLogo，它们都在一条水平线上，实现的效果如下图所示：
IntrinsicWidth和IntrinsicHeight
IntrinsicWidth和IntrinsicHeight两个组件是Flutter官方不推荐使用的组件。他们存在一些性能上的问题，因为使用不到这里就做过多的讲解。而且能用这两种组件实现的效果，都可以用其他组件替代，所以忘了它，但不要不认识它，所以博主在博文最后提及一下。
李元静
发布了94 篇原创文章 · 获赞 110 · 访问量 72万+
他的留言板
关注
标签：Container,评选,Text,单一,child,组件,Flutter,Alignment 来源： https://blog.csdn.net/liyuanjinglyj/article/details/104076953