フラッターレイアウトクラスコンポーネント：弾性レイアウト（フレックス）

序文

柔軟なレイアウトは、サブアセンブリは、親コンテナスペースの一定割合は、フラッターは、主にFlexと拡大を通じて弾性のレイアウトに合わせて割り当てることができます。

フレックス

あなたがスピンドルの方向を知っていればFlexコンポーネントは、サブアセンブリの水平または垂直方向に沿って配置してもよいし、行の列は、それがフレックス実質的ことができる使用することができるフレックス、実質的に同一のパラメータから行と列の継承ので便利です行または列を使用します。フレックス機能自体は、それはまた、弾性コンポーネントと拡張レイアウトを用いて達成することができる、非常に強力です。FlexはRenderObjectがRenderFlex、RenderFlexアルゴリズムは、そのレイアウトに実装されている対応する、MultiChildRenderObjectWidgetから継承されました。

Flexのインターフェイス説明

Flex({
    Key key,
    // 弹性布局的方向, Row默认为水平方向，Column默认为垂直方向
    @required this.direction,
    // 以下同线性布局
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.mainAxisSize = MainAxisSize.max,
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    this.textBaseline,
    List<Widget> children = const <Widget>[],
  }) 

拡張

「ストレッチ拡大」スペース行、列およびFlexは、サブアセンブリ占有スケーリングすることができます。

拡張インターフェイス説明

const Expanded({
    Key key,
    // 参数为弹性系数，如果为0或null，则child是没有弹性的，即不会被扩伸占用的空间。
    // 如果大于0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间。
    int flex = 1,
    @required Widget child,
  })

サンプルコード

import 'package:flutter/material.dart';

class FlexTest extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Column(

      children: <Widget>[
        // Flex的两个子widget按1:2来占据水平空间
        Flex(
          direction: Axis.horizontal,
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Container(
                height: 30.0,
                color: Colors.red,
              ),
            ),

            Expanded(
              flex: 2,
              child: Container(
                height: 30.0,
                color: Colors.green,
              ),
            )
          ],
        ),

        Padding(
          padding: const EdgeInsets.only(top: 20.0),
          child: SizedBox(
            height: 100.0,
            // Flex的三个子widget，在垂直方向按2:1:1来占用100像素的空间
            child: Flex(
              direction: Axis.vertical,
              children: <Widget>[
                Expanded(
                  flex: 2,
                  child: Container(
                    height: 30.0,
                    color: Colors.red,
                  ),
                ),

                // 占用指定比例的空间，实际上它只是Expanded的一个包装类
                Spacer(
                  flex: 1,
                ),

                Expanded(
                  flex: 1,
                  child: Container(
                    height: 30.0,
                    color: Colors.green,
                  ),
                )

              ],
            ),
          ),
        )

      ],
    );
  }
}