面试题：Flutter布局管理中Row和Column的核心特点及使用场景

Question

在Flutter布局管理中，Row和Column是常用的布局类Widgets。请阐述它们各自的核心特点，并举例说明在哪些实际场景下会优先选择使用Row，哪些场景会优先选择Column。

Answer 1

Row核心特点

1. 水平排列：Row会将其children在水平方向上依次排列。
2. 主轴和交叉轴：主轴为水平方向，交叉轴为垂直方向。
3. 灵活分配空间：通过MainAxisAlignment和CrossAxisAlignment等属性来控制子Widget在主轴和交叉轴上的对齐方式与空间分配。

Column核心特点

1. 垂直排列：Column会将其children在垂直方向上依次排列。
2. 主轴和交叉轴：主轴为垂直方向，交叉轴为水平方向。
3. 类似的空间控制：同样通过MainAxisAlignment和CrossAxisAlignment等属性控制子Widget在主轴和交叉轴上的对齐与空间分配。

优先使用Row的场景

1. 导航栏：例如底部导航栏，多个图标和文字水平排列，用户可以通过点击不同的导航项切换页面。示例代码如下：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    IconButton(onPressed: (){}, icon: Icon(Icons.home)),
    IconButton(onPressed: (){}, icon: Icon(Icons.search)),
    IconButton(onPressed: (){}, icon: Icon(Icons.person)),
  ],
)

2. 水平菜单选项：如电商应用顶部的商品分类菜单，不同分类名称水平排列，方便用户快速切换分类查看商品。

优先使用Column的场景

1. 表单布局：在登录或注册表单中，用户名输入框、密码输入框、登录按钮等组件垂直排列，符合用户从上到下的操作习惯。示例代码如下：

Column(
  children: [
    TextField(decoration: InputDecoration(labelText: '用户名')),
    TextField(decoration: InputDecoration(labelText: '密码'), obscureText: true),
    ElevatedButton(onPressed: (){}, child: Text('登录')),
  ],
)

2. 垂直列表展示：像文章详情页，标题、作者、发布时间、正文内容等元素垂直排列展示。