面试题：Flutter中Stack实现复杂UI效果之布局问题

Question

在Flutter里使用Stack实现一个包含图片、文本以及按钮的复杂UI，图片要铺满整个背景，文本在图片上方居中显示，按钮位于右下角。请描述实现思路，并给出关键代码片段。

Answer 1

实现思路

1. 使用 Stack 作为根布局，Stack 允许子部件堆叠显示。
2. 放置一个 Image 部件作为背景，通过 BoxFit.fill 使其铺满整个背景。
3. 在 Stack 中添加一个居中的 Text 部件，使用 Positioned 并结合 top 和 left 等属性设置其位置在图片上方居中。
4. 同样使用 Positioned 将按钮放置在右下角。

关键代码片段

Stack(
  children: [
    Image.asset(
      'your_image_path',
      fit: BoxFit.fill,
      width: double.infinity,
      height: double.infinity,
    ),
    Positioned(
      top: MediaQuery.of(context).size.height * 0.4,
      left: 0,
      right: 0,
      child: Text(
        '居中显示的文本',
        textAlign: TextAlign.center,
      ),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: ElevatedButton(
        onPressed: () {},
        child: Text('右下角按钮'),
      ),
    ),
  ],
)