Flutter (five) - a single child elements

Article directory

Foreword
Container
Container constraints

Container combat

SingleChildScrollView
FittedBox
FractionallySizedBox
ConstrainedBox
Baseline
IntrinsicWidth和IntrinsicHeight

Foreword

As already introduced the basic components used in this blogger introduces a single child elements (Single-child). Sub-element assembly comprises a single Container, Padding, Center, Align, FittedBox AspectRatio and the like.

Container

Flutter in the development, use the most is the Container, therefore we must firmly grasp the knowledge to use it.

Here bloggers to tell us about Container alignment (alignment), the property accepts Alignment object. Thereon which will pass two parameters, i.e., double x and double y, in the range between [1,1], as shown below:
Coordinate system From the graph we can see the intermediate positions X and Y it is 0, which indicates a position in the middle of the content inside the Container. If you want to display a text in the middle, as follows:

body: Container(
        color: Colors.red,
        alignment: Alignment(0.0, 0.0),
        child: new Text("Container",),
),

Here we set the background color is red, and set up to coordinate the text of the middle of the screen, if you want to set it to a different location, change coordinate values Alignment on it, the above code to achieve the effect as follows:
Container the content from the above explanation of us can be seen, the value of coordinates between [-1,1], if special to remember the coordinates of the location, will be very troublesome, so we need to use the position provide constant Flutter, as follows:

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 constraints

Sometimes, we need to size constraints of space occupied by the container. In most cases, it can be accomplished by constructing BoxConstraint, BoxConstraint following properties:

Attributes	The value
minWidth	The minimum width
minHeight	The minimum height
maxWidth	Maximum width
maxHeight	maximum height

Let's look at a use code:

body: Container(
        color: Colors.green,
        child: new Text("静歌很棒",),
        constraints: BoxConstraints(
          maxHeight: 400.0,
          maxWidth: 300.0,
          minHeight: 200.0,
          minWidth: 200.0,
    ),
),

如果使用如上代码，那么显示的效果将如下图所示：
Static great song 有时候，我们需要把存储在child中的Container扩展到最大，值需要加入一些约束条件即可，代码如下：

body: Container(
        color: Colors.green,
        child: new Text("静歌很棒",),
        constraints: BoxConstraints.expand(width: 250.0,height: 100.0),
),

这里的显示效果如下图所示：
Quiet brother is great value 如果没有指定参数如下面代码所示，那么它将会占满整个屏幕的空间。：

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，显示的效果如下：
Margins display

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，阴影大小，模糊度，然后设置渐变颜色为红，绿，黄三色渐变，旋转，居中，添加文字，显示的效果如下：
Linear gradient

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组件，实现效果如下：
Slide assembly

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的大小，因为其始终不可逾越这种约束布局，实现效果如下：
insurmountable

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，它们都在一条水平线上，实现的效果如下图所示：
A row of data

IntrinsicWidth和IntrinsicHeight

IntrinsicWidth and IntrinsicHeight two components are those Flutter official deprecated. They have some performance problems, because the use of less to do too much to explain here. And the effect of these two components can be achieved, you can substitute with other components, so forget it, but do not know it, so bloggers mentioned in the last blog about.