Row Column 行列布局

Widget	Element	说明
LeafRenderObjectWidget	LeafRenderObjectElement	没有子元素
SingleChildRenderObjectWidget	SingleChildRenderObjectWidget	拥有单个子元素
MultiChildRenderObjectWidget	MultiChildRenderObjectElement	拥有多个子元素

Row Column 布局.png 布局.png

• Row 和 Column 会在主轴方向占用尽可能大空间，纵轴长度取决于它们的最大子元素长度。

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: LayoutWidget(),
  ));
}

class LayoutWidget extends StatelessWidget {
  const LayoutWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('布局 Row Column'),
      ),
      //列布局
      body: Column(
        //主轴方向占用空间
        mainAxisSize: MainAxisSize.max,
        //垂直方向对齐方式 [顶 中 底]
        //verticalDirection: VerticalDirection.down,
        mainAxisAlignment: MainAxisAlignment.start,
        //纵轴方向对齐方式 [左 中 右]
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          //行布局
          Row(
            //主轴占用空间
            mainAxisSize: MainAxisSize.max,
            //水平方向子组件显示顺序
            textDirection: TextDirection.ltr,
            //水平方向对齐方式 [左 中 右]
            mainAxisAlignment: MainAxisAlignment.start,
            //纵轴对齐方向 ?
            //verticalDirection: VerticalDirection.up,
            //子元素高度不同时纵轴对齐方式
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              const Text(" Hi, "),
              const Text(
                " I‘m Jack ",
                style: TextStyle(fontSize: 22),
              ),
              //嵌套Row占用空间为实际大小, 如果使用Expanded则会占满外部空间
              Expanded(
                child: Row(
                  children: const [
                    Text(" Hi, "),
                    Text(" I‘m Rose "),
                  ],
                ),
              ),
              const Text(
                " 我被挤到了边缘 ",
                style: TextStyle(color: Colors.red, fontSize: 12),
              ),
            ],
          ),

          const Text('Flutter 课程入门'),
          const Text('欢迎大家'),
          //嵌套Column占用空间为实际大小, 如果使用Expanded则会占满外部空间
          Expanded(
              child: Column(
            children: const [
              Text('Flutter 课程入门'),
              Text('欢迎大家'),
            ],
          )),
          const Text(
            '我被挤到了底部',
            style: TextStyle(color: Colors.red, fontSize: 26),
          ),
        ],
      ),
    );
  }
}