Flutter之Expanded组件

/**
 * Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力,但是不强制子组件填充可用空间。
 * Expanded组件可以使Row、Column、Flex等子组件在其主轴方向上展开并填充可用空间,是强制子组件填充可用空间。
    const Expanded({
    Key key,
    int flex = 1,//组件占据剩余空间的比例
    @required Widget child,
    })
 */
body: Column(
          children: [
            Row(
              children: [
                Container(
                  margin: EdgeInsets.all(5.0),
                  child: Text("Flexible1"),
                  color: Colors.blue,
                ),
                Flexible(
                  flex: 10,
                  child: Container(
                    margin: EdgeInsets.all(5.0),
                    child: Text("Flexible"),
                    color: Colors.blue,
                  ),
                ),
                Flexible(
                  flex: 10,
                  child: Container(
                    margin: EdgeInsets.all(5.0),
                    child: Text("Flexible"),
                    color: Colors.blue,
                  ),
                ),
                Flexible(
                  flex: 10,
                  child: Container(
                    margin: EdgeInsets.all(5.0),
                    child: Text("Flexible"),
                    color: Colors.blue,
                  ),
                ),
                Container(
                  margin: EdgeInsets.all(5.0),
                  child: Text("Flexible1"),
                  color: Colors.blue,
                ),
              ],
            ),
            Row(
              children: [
                Container(
                  margin: EdgeInsets.all(5.0),
                  child: Text("Flexible1"),
                  color: Colors.blue,
                ),
                Flexible(
                  flex: 1,
                  child: Container(
                    child: Text("Flexible2"),
                    color: Colors.blue,
                  ),
                ),
                Container(
                  margin: EdgeInsets.all(5.0),
                  child: Text("Flexible3"),
                  color: Colors.blue,
                ),
              ],
            ),
            Row(
              children: [
                Container(
                  margin: EdgeInsets.all(5.0),
                  child: Text("Expanded1"),
                  color: Colors.blue,
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    child: Text("Expanded2"),
                    color: Colors.blue,
                  ),
                ),
                Container(
                  margin: EdgeInsets.all(5.0),
                  child: Text("Expanded3"),
                  color: Colors.blue,
                )
              ],
            ),
            Row(
              children: [
                Expanded(
                  flex: 1,
                  child: Container(
                    margin: EdgeInsets.all(5.0),
                    child: Text("Expanded"),
                    color: Colors.blue,
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    margin: EdgeInsets.all(5.0),
                    child: Text("Expanded"),
                    color: Colors.blue,
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    margin: EdgeInsets.all(5.0),
                    child: Text("Expanded"),
                    color: Colors.blue,
                  ),
                ),
              ],
            )
          ],
        ),

码云地址:https://gitee.com/xgljh/Flutter.git

你可能感兴趣的:(Flutter之Expanded组件)