Flutter 中的布局和 Android 中的布局对应

Column 默认大小

Column 的 widget 和 height 默认是充满父布局

1. MainAxisSize.min, //wrap_content ,不加的话默认为 match_parent（MainAxisSize.max）

Widget columnWidget2() {
    return Container(
      color: Colors.orange,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 100,
            height: 100,
            color: Colors.green,
            child: const Text("Column固定尺寸测试2"),
          ),
          Container(
            width: double.infinity,
            color: Colors.blue,
            child: const Text("Column wrap content 111 测试"),
          ),
          Visibility(
            visible: true,
            child: Container(
              color: Colors.greenAccent,
              child: const Text("Column wrap content 222 测试"),
            ),
          )
        ],
      ),
    );
}

Flutter Row/Column wrap_content

1. Row wrap_content

Widget rowWidget() {
    return Row(
      children: [
        Container(
          width: 80,
          height: 80,
          color: Colors.green,
          child: const Text("Row 固定尺寸测试"),
        ),
        Container(
          color: Colors.blue,
          child: const Text("Row wrap content 测试"),
        ),
        Visibility(
          visible: true,
          child: Container(
            color: Colors.greenAccent,
            child: const Text("Row wrap content 测试"),
          ),
        )
      ],
    );
}

2. Column wrap_content

Widget columnWidget() {
    return Column(
      children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.green,
          child: const Text("Column固定尺寸测试"),
        ),
        Container(
          color: Colors.blue,
          child: const Text("Column wrap content 111 测试"),
        ),
        Visibility(
          visible: true,
          child: Container(
            color: Colors.greenAccent,
            child: const Text("Column wrap content 222 测试"),
          ),
        )
      ],
    );
}

Flutter Column match_parent

Widget columnWidget2() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.green,
          child: const Text("Column固定尺寸测试2"),
        ),
        Container(
          width: double.infinity,
          color: Colors.blue,
          child: const Text("Column wrap content 111 测试"),
        ),
        Visibility(
          visible: true,
          child: Container(
            color: Colors.greenAccent,
            child: const Text("Column wrap content 222 测试"),
          ),
        )
      ],
    );
}

layout_weight

1. MainAxisAlignment.spaceEvenly

Widget columnLayoutWeight() {
    return Container(
      color: Colors.yellowAccent,
      child: Row(
        //Column
//            mainAxisSize: MainAxisSize.min,//wrap_content ,不加的话默认为match_parent（MainAxisSize.max）
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        //start==left,center==center,end==right ,
        // spaceEvenly==等比例居中，4个间距一样大（weight=1),spaceAround=等比例居中，6个间距一样大,spaceBetween=中间居中，两边顶边
        children: [
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.red,
              child: const Icon(
                Icons.access_time,
                size: 50.0,
              ),
            ), //flex == android:layout_weight
          ),
          Expanded(
            flex: 4,
            child: Container(
              color: Colors.blue,
              child: const Icon(
                Icons.pie_chart,
                size: 100.0,
              ),
            ),
          ),
          Expanded(
            flex: 6,
            child: Container(
              color: Colors.green,
              child: const Icon(
                Icons.email,
                size: 50.0,
              ),
            ),
          ),
        ],
      ),
    );
}

https://juejin.cn/post/7207091794357633061#heading-6