面试题：Flutter中Row和Column主轴与交叉轴在复杂布局中的应用

Question

现有一个需求，要在一个页面中实现这样的布局：顶部是一个固定高度的Row，包含三个等宽的按钮；中部是一个Column，其中有若干个图片，图片高度不一致，但宽度要充满Column；底部是一个Row，其中左边有一个文本，右边有一个图标，并且底部Row要始终处于页面底部。请详细描述实现思路，并说明在各个部分如何利用Row和Column的主轴与交叉轴属性来实现该布局。

Answer 1

实现思路

1. 顶部Row布局：创建一个Row，设置固定高度。通过Expanded组件包裹每个按钮，使它们在Row中宽度相等。
2. 中部Column布局：创建一个Column，在其中添加图片，设置图片宽度为Column的宽度（即充满），高度自适应。
3. 底部Row布局：使用Positioned或Scaffold的bottomNavigationBar来确保底部Row始终在页面底部。在Row中，左边用Text，右边用Icon。

各部分利用主轴与交叉轴属性实现布局

1. 顶部Row：
   • 主轴：主轴方向为水平方向，Row默认主轴方向为水平。通过Expanded组件均匀分配主轴空间给按钮。
   • 交叉轴：交叉轴方向为垂直方向，设置固定高度，通过height属性设置，使按钮在垂直方向高度一致。
2. 中部Column：
   • 主轴：主轴方向为垂直方向，Column默认主轴方向为垂直。图片沿主轴垂直排列。
   • 交叉轴：交叉轴方向为水平方向，设置图片宽度为充满Column，即设置图片的width为double.infinity。
3. 底部Row：
   • 主轴：主轴方向为水平方向，Row默认主轴方向为水平。左边Text和右边Icon沿主轴排列。
   • 交叉轴：交叉轴方向为垂直方向，通过Align或Positioned等组件将Row定位在页面底部。若使用Scaffold的bottomNavigationBar，则自动将其定位在底部。