Flutter界面组件布局优化：替代Stack-Row-Column嵌套的更优方案

问题背景 #

我正在开发一个展示数学题的Flutter界面，作为新手不清楚合适的布局组件，目前用Stack、Row、Column嵌套实现，代码混乱难维护，希望得到更简洁的实现方式。原代码如下：

import 'package:flutter/material.dart';

class ProblemsScreen extends StatefulWidget {
  const ProblemsScreen({super.key});

  @override
  State<ProblemsScreen> createState() => _ProblemsScreenState();
}

class _ProblemsScreenState extends State<ProblemsScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text('Problem title',
            style: TextStyle(
            color: Colors.white,
            fontSize: 30,
            fontWeight: FontWeight.w300
            ),
          ),
          centerTitle: true,
      ),

      body: Container(
        padding: const EdgeInsets.all(20),
        child:Stack(
          children: <Widget>[
            
            //Timer counter
            const Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('00:00')
              ],
            ),

            //Timer Icon
            const Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Icon(Icons.timer)
              ],
            ),

            //Problem data, will be a long string later
            const Center(
              child: Text('Problem data'),
            ),
    
            //Button grid with a label
            Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                const Text('Select an asnwer'), //Label

                //Button grid
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Column(
                      children: [
                        Row(
                          children: [
                            TextButton(onPressed: (){}, child: const Text('Answer 1')), 
                            TextButton(onPressed: (){}, child: const Text('Answer 2')),                               
                          ]
                        ),

                        Row(
                          children: [
                            TextButton(onPressed: (){}, child: const Text('Answer 3')), 
                            TextButton(onPressed: (){}, child: const Text('Answer 4')),                               
                          ]
                        )
                      ],
                    )
                  ],
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

优化后的实现 #

我们可以用Column作为主布局容器，配合MainAxisAlignment和CrossAxisAlignment控制元素位置，同时拆分组件提升可读性，替代Stack的重叠布局（Stack在这里没必要，反而导致层级混乱）：

import 'package:flutter/material.dart';

class ProblemsScreen extends StatefulWidget {
  const ProblemsScreen({super.key});

  @override
  State<ProblemsScreen> createState() => _ProblemsScreenState();
}

class _ProblemsScreenState extends State<ProblemsScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Problem title',
          style: TextStyle(
            color: Colors.white,
            fontSize: 30,
            fontWeight: FontWeight.w300,
          ),
        ),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            // 顶部区域：计时器文本 + 计时器图标
            _buildTopBar(),
            // 题目内容区域：占满中间剩余空间，居中显示
            Expanded(
              child: const Center(
                child: Text('Problem data'),
              ),
            ),
            // 底部答题区域：标签 + 选项按钮网格
            _buildAnswerSection(),
          ],
        ),
      ),
    );
  }

  // 拆分顶部组件，提升可读性
  Widget _buildTopBar() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: const [
        SizedBox(width: 48), // 占位，让计时器文本居中
        Text('00:00'),
        Icon(Icons.timer),
      ],
    );
  }

  // 拆分答题区域组件
  Widget _buildAnswerSection() {
    return Column(
      children: [
        const Text('Select an answer'),
        const SizedBox(height: 16), // 增加间距，优化布局
        GridView.count(
          shrinkWrap: true, // 让GridView自适应高度
          crossAxisCount: 2, // 每行2个按钮
          mainAxisSpacing: 12, // 垂直间距
          crossAxisSpacing: 12, // 水平间距
          children: [
            TextButton(onPressed: () {}, child: const Text('Answer 1')),
            TextButton(onPressed: () {}, child: const Text('Answer 2')),
            TextButton(onPressed: () {}, child: const Text('Answer 3')),
            TextButton(onPressed: () {}, child: const Text('Answer 4')),
          ],
        ),
      ],
    );
  }
}

优化要点 #

• 移除Stack，改用Column为主布局：Stack适合重叠元素，这里界面是垂直分布的，用Column更符合布局逻辑，避免层级混乱。
• 拆分独立组件：将顶部栏、答题区域拆分为单独方法，让build方法更简洁，维护更方便。
• 用Expanded控制中间区域：让题目内容自动占满顶部和底部之间的剩余空间，确保布局自适应屏幕。
• 用GridView替代嵌套Row/Column：选项按钮网格用GridView.count实现，比手动嵌套Row/Column更简洁，扩展性更强（比如后续增加选项数量）。
• 增加间距优化UI：添加SizedBox控制元素间距，提升界面美观度。
• 顶部栏用Row+spaceBetween：通过占位SizedBox让计时器文本居中，同时把图标放在右侧，替代原来的两个独立Row。

内容的提问来源于stack exchange，提问作者Benevos