フラッター（5） - 単一の子要素

記事のディレクトリ

序文
容器
コンテナの制約

コンテナ戦闘

SingleChildScrollView
FittedBox
FractionallySizedBox
ConstrainedBox
ベースライン
IntrinsicWidth和IntrinsicHeight

序文

すでに紹介したように、このブロガーで使用される基本的なコンポーネントは、単一の子要素（シングル子）を紹介します。サブ要素は、アセンブリ単一の容器、パディング、センター、ALIGN、FittedBoxアスペクト比などを含みます。

容器

開発中のフラッターは、したがって、我々はしっかりとそれを使用するための知識を把握する必要があり、ほとんどがコンテナで使用しています。

ここではコンテナの位置合わせ（アライメント）を教えするブロガー、プロパティが整列オブジェクトを受け取ります。以下に示すように、[1,1]の範囲では、2つのパラメータ、すなわち、二重Xと二重Yを通過するその：
座標系グラフから、我々は中間位置を見ることができるXおよびYそれはコンテナ内のコンテンツの途中の位置を示す0、です。あなたが途中でテキストを表示したい場合は、次の通り：

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

ここでは、背景色が赤、そしてあなたは、変更はその上の値アライメント座標別の場所にそれを設定したい場合は、画面中央のテキストを調整するように設定されている設定、効果を達成するために上記のコードは次のように：
私たちの上記の説明からコンテンツを我々はポジションを使用する必要があるので、場所の座標を覚えて特別には、非常に面倒になる場合、[-1,1]の間の座標の値を見ることができ、次のように、一定のフラッターを提供します。

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)

コンテナの制約

時々、私たちは、コンテナが占めるスペースの大きさの制約のために必要です。ほとんどの場合、それは、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二つの成分、それらのフラッタ公式は廃止されています。以下の使用は、ここで説明するのあまりを行うにはので、彼らは、いくつかのパフォーマンスの問題を抱えています。そして、これら二つの成分の効果は、ブロガーを約最後のブログで言及したように、あなたは、それを忘れて、他のコンポーネントと置き換えることができますが、それを知らない、達成することができます。