面试题：Flutter中Row与Column布局的常见应用场景及区别

Question

请简要描述在Flutter开发中，Row与Column布局各自适用于哪些常见场景，并阐述它们在布局方向、子Widget排列方式以及默认对齐方式等方面的主要区别。

Answer 1

Row布局适用场景

1. 水平排列元素：比如导航栏中的多个图标、标签栏中的多个标签，需要将多个Widget水平排列展示。
2. 水平分组：将相关的小部件组合在一起水平放置，如在卡片中水平排列的图片和文本描述。

Column布局适用场景

1. 垂直排列元素：常用于列表项的布局，每个列表项可能包含多行文字、图片等垂直排列。登录页面中，输入框、按钮等元素垂直排列。
2. 垂直分组：将相关内容垂直分组展示，如页面标题、副标题及正文内容的垂直布局。

主要区别

1. 布局方向
   • Row：布局方向为水平方向，子Widget从左到右排列。
   • Column：布局方向为垂直方向，子Widget从上到下排列。
2. 子Widget排列方式
   • Row：子Widget沿水平方向依次排列，可通过mainAxisAlignment和crossAxisAlignment控制排列与对齐方式。
   • Column：子Widget沿垂直方向依次排列，同样通过mainAxisAlignment和crossAxisAlignment控制排列与对齐方式。
3. 默认对齐方式
   • Row：mainAxisAlignment默认为MainAxisAlignment.start（左对齐），crossAxisAlignment默认为CrossAxisAlignment.center（垂直居中对齐）。
   • Column：mainAxisAlignment默认为MainAxisAlignment.start（顶部对齐），crossAxisAlignment默认为CrossAxisAlignment.center（水平居中对齐）。