面试题：Flutter中基础Widget类型的特性及应用场景

Question

请详细阐述Flutter中Text、Container、Row这几种基础Widget的特性，并且举例说明它们各自适合在哪些场景下使用。

Answer 1

Text

• 特性：用于显示文本。支持设置文本样式，如字体大小、颜色、粗细、斜体等；可自动换行，也可通过设置属性控制是否截断显示等。
• 适用场景：在界面中显示固定或动态文本信息的场景。例如，在应用标题、段落文字、按钮文本等场景。
• 示例：

Text(
  '这是一段示例文本',
  style: TextStyle(
    fontSize: 18,
    color: Colors.blue,
    fontWeight: FontWeight.bold
  ),
)

Container

• 特性：一个多功能的布局组件，可设置自身的大小、边距、内边距、背景颜色、边框等样式。它可以包含单个子Widget，也可以作为其他复杂布局的基础容器。
• 适用场景：用于需要对内部内容进行统一样式设置或隔离布局的场景。如卡片式布局、作为其他组件的背景容器等。
• 示例：

Container(
  width: 200,
  height: 150,
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(15),
  decoration: BoxDecoration(
    color: Colors.grey[200],
    borderRadius: BorderRadius.circular(10)
  ),
  child: Text('容器内的文本'),
)

Row

• 特性：是一个水平方向排列子Widget的布局组件。它允许控制子Widget的排列方式（如居中、两端对齐等），以及子Widget在水平方向上的所占空间比例等。
• 适用场景：当需要将多个组件在水平方向上进行排列展示时使用。比如水平菜单、图片与文本水平排列的场景。
• 示例：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Icon(Icons.home),
    Text('首页'),
    Icon(Icons.settings),
    Text('设置')
  ],
)