Flutter中如何在区块内放置按钮？使用Expanded、Container遇阻

你的核心问题是Column 中 Expanded 的空间分配逻辑理解偏差：当前布局里两个 Expanded 已经占据了标题之外的大部分垂直空间，直接把独立的 ElevatedButton 塞进新的 Expanded 会导致空间分配冲突，要么按钮被过度拉伸，要么布局溢出。

正确的调整方案 #

把底部按钮和上方的红色统计容器放入同一个 Expanded 内的 Column 中，让 Expanded 统一管理这部分区域的空间，同时保证按钮的固定尺寸不受影响。

修改后的完整代码 #

import 'package:percent_indicator/percent_indicator.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Pomodoro(),
  ));
}

class Pomodoro extends StatefulWidget {
  const Pomodoro({Key? key}) : super(key: key);

  @override
  State<Pomodoro> createState() => _PomodoroState();
}

class _PomodoroState extends State<Pomodoro> {
  double percent = 0;
  static int timeInMinute = 25; // 修正命名规范，避免大写开头
  int timeInSec = timeInMinute * 60; // 修正时间计算逻辑，原代码错误覆盖了timeInMinute的值

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
                colors: [Color(0xff1542bf), Color(0xff51a8ff)],
                begin: FractionalOffset(0.5, 1)),
          ),
          width: double.infinity,
          child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const Padding(
                  padding: EdgeInsets.only(top: 25.0),
                  child: Text(
                    'Pomodoro Clock',
                    style: TextStyle(color: Colors.white, fontSize: 40.0),
                  ),
                ),
                // 进度条区域：占据剩余空间的一部分
                Expanded(
                  child: Center( // 用Center替代固定尺寸的SizedBox，让进度条居中
                    child: CircularPercentIndicator(
                      percent: percent,
                      animation: true,
                      animateFromLastPercent: true,
                      radius: 90.0,
                      lineWidth: 20.0,
                      progressColor: Colors.white,
                      center: Text(
                        '$timeInMinute',
                        style: const TextStyle(
                            color: Colors.white, fontSize: 30.0),
                      ),
                    ),
                  ),
                ),
                // 统计区域+按钮：合并到同一个Expanded中
                Expanded(
                  child: Column(
                    children: [
                      // 原红色统计容器
                      Expanded( // 让统计容器占据Expanded内的大部分空间
                        child: Container(
                          width: double.infinity,
                          decoration: const BoxDecoration(
                            color: Color.fromARGB(255, 163, 48, 48),
                            borderRadius: BorderRadius.only(
                                topRight: Radius.circular(30.0),
                                topLeft: Radius.circular(30.0)),
                          ),
                          child: Padding(
                            padding: const EdgeInsets.only(
                                top: 30.0, left: 20.0, right: 20.0),
                            child: Row(
                              children: [
                                Expanded(
                                  child: Column(
                                    children: const [
                                      Text(
                                        'Study Time',
                                        style: TextStyle(
                                          fontSize: 30.0,
                                        ),
                                      ),
                                      SizedBox(
                                        height: 10.0,
                                      ),
                                      Text(
                                        '25',
                                        style: TextStyle(
                                          fontSize: 80.0,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                Expanded(
                                  child: Column(
                                    children: const [
                                      Text(
                                        'Pause Timer',
                                        style: TextStyle(
                                          fontSize: 30.0,
                                        ),
                                      ),
                                      Text(
                                        '5',
                                        style: TextStyle(
                                          fontSize: 80.0,
                                        ),
                                      ),
                                      Padding(
                                        padding: EdgeInsets.symmetric(vertical: 10.0),
                                        child: Text(
                                          'hello',
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                      // 底部按钮：放在统计容器下方，不占用Expanded的剩余空间
                      Padding(
                        padding: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
                        child: ElevatedButton(
                          onPressed: () {},
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.red,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(100.0),
                            ),
                            minimumSize: const Size(double.infinity, 0), // 让按钮撑满宽度
                          ),
                          child: const Padding(
                            padding: EdgeInsets.all(20.0),
                            child: Text(
                              'start studying', // 修正拼写错误
                              style: TextStyle(color: Colors.white, fontSize: 22.0),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ]),
        ),
      ),
    );
  }
}

关键调整点说明 #

1. 合并布局层级：将红色统计容器和底部按钮放入同一个 Expanded 的 Column 中，避免多个独立 Expanded 争夺空间。
2. 优化进度条布局：移除固定尺寸的 SizedBox，改用 Center 让圆形进度条自动居中，避免限制其显示大小。
3. 修正逻辑错误：修复了 timeInSec 的赋值错误（原代码错误将 timeInMinute 覆盖为60），同时调整变量命名符合Dart规范。
4. 按钮自适应：给按钮添加 minimumSize: const Size(double.infinity, 0)，让按钮撑满父容器宽度，同时保留圆角样式。

内容的提问来源于stack exchange，提问作者Юрий Белявцев