Flutter中如何实现组件垂直布局无重叠？

问题描述 #

当前实现的HomePageTimerUI与CountDownTimer组件相互堆叠重叠，需要实现垂直分离布局：将TabBar导航栏（HomePageTimerUI核心部分）置于上方，计时器（CountDownTimer）置于下方。

问题根源 #

1. HomePageTimerUI外层使用SizedBox(height: double.maxFinite)，强制占满整个屏幕高度
2. 两个组件各自包含独立的Scaffold，多Scaffold会导致布局层级混乱，无法正常按Column垂直排列

解决方案 #

步骤1：重构HomePageTimerUI，移除全屏容器与多余Scaffold #

将组件简化为仅提供TabBar相关结构，不再单独使用Scaffold和全屏容器：

class HomePageTimerUI extends StatelessWidget {
  const HomePageTimerUI({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TabBar(
        indicator: const UnderlineTabIndicator(
            borderSide: BorderSide(
                color: Color(0xff3B3B3B), width: 4.0),
            insets:
                EdgeInsets.fromLTRB(12.0, 12.0, 12.0, 11.0)),
        indicatorWeight: 15,
        indicatorSize: TabBarIndicatorSize.label,
        labelColor: const Color(0xff3B3B3B),
        labelStyle: const TextStyle(
            fontSize: 12,
            letterSpacing: 1.3,
            fontWeight: FontWeight.w500),
        unselectedLabelColor: const Color(0xffD7D7D7),
        tabs: const [
          Tab(
            text: "POMODORO",
            icon: Icon(Icons.work_history, size: 40),
          ),
          Tab(
            text: "SHORT BREAK",
            icon: Icon(Icons.ramen_dining, size: 40),
          ),
          Tab(
            text: "LONG BREAK",
            icon: Icon(Icons.battery_charging_full_rounded,
                size: 40),
          ),
        ]);
  }
}

步骤2：修改CountDownTimer，移除外层Scaffold #

保留计时器核心功能，去掉独立的Scaffold：

class CountDownTimer extends StatefulWidget {
  @override
  _CountDownTimerState createState() => _CountDownTimerState();
}

class _CountDownTimerState extends State<CountDownTimer>
    with TickerProviderStateMixin {
  late AnimationController controller;

  String get timerString {
    Duration duration = controller.duration! * controller.value;
    return '${duration.inMinutes}:${(duration.inSeconds % 60).toString().padLeft(2, '0')}';
  }

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 5),
    );
  }

  @override
  Widget build(BuildContext context) {
    ThemeData themeData = Theme.of(context);
    return AnimatedBuilder(
        animation: controller,
        builder: (context, child) {
          return Stack(
            children: <Widget>[
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  color: Colors.amber,
                  height:
                      controller.value * MediaQuery.of(context).size.height,
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Expanded(
                      child: Align(
                        alignment: FractionalOffset.center,
                        child: Stack(
                          children: <Widget>[
                            CustomPaint(
                                painter: CustomTimerPainter(
                              animation: controller,
                              backgroundColor: Colors.white,
                              color: themeData.indicatorColor,
                            )),
                            Align(
                              alignment: FractionalOffset.center,
                              child: Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceEvenly,
                                crossAxisAlignment:
                                    CrossAxisAlignment.center,
                                children: <Widget>[
                                  Text(
                                    timerString,
                                    style: const TextStyle(
                                        fontSize: 112.0,
                                        color: Colors.white),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        AnimatedBuilder(
                            animation: controller,
                            builder: (context, child) {
                              return FloatingActionButton.extended(
                                  onPressed: () {
                                    if (controller.isAnimating)
                                      controller.stop();
                                    else {
                                      controller.reverse(
                                          from: controller.value == 0.0
                                              ? 1.0
                                              : controller.value);
                                    }
                                  },
                                  icon: Icon(controller.isAnimating
                                      ? Icons.pause
                                      : Icons.play_arrow),
                                  label: Text(
                                      controller.isAnimating ? "Pause" : "Play"));
                            }),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          );
        });
  }
}

// CustomTimerPainter代码保持不变
class CustomTimerPainter extends CustomPainter {
  CustomTimerPainter({
    required this.animation,
    required this.backgroundColor,
    required this.color,
  }) : super(repaint: animation);

  final Animation<double> animation;
  final Color backgroundColor, color;

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = backgroundColor
      ..strokeWidth = 10.0
      ..strokeCap = StrokeCap.butt
      ..style = PaintingStyle.stroke;

    canvas.drawCircle(size.center(Offset.zero), size.width / 2.0, paint);
    paint.color = color;
    double progress = (1.0 - animation.value) * 2 * math.pi;
    canvas.drawArc(Offset.zero & size, math.pi * 1.5, -progress, false, paint);
  }

  @override
  bool shouldRepaint(CustomTimerPainter old) {
    return animation.value != old.animation.value ||
        color != old.color ||
        backgroundColor != old.backgroundColor;
  }
}

步骤3：整合组件，实现垂直布局 #

使用单一Scaffold管理整个页面，将TabBar作为AppBar的底部，计时器作为body内容：

class StackedPages extends StatelessWidget {
  const StackedPages({super.key});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        backgroundColor: Colors.white10,
        appBar: AppBar(
          elevation: 0,
          backgroundColor: Colors.transparent,
          bottom: PreferredSize(
            preferredSize: const Size.fromHeight(40),
            child: Container(
              color: Colors.transparent,
              child: SafeArea(
                child: HomePageTimerUI(),
              ),
            ),
          ),
        ),
        body: const TabBarView(
          children: [
            CountDownTimer(),
            CountDownTimer(),
            CountDownTimer(),
          ],
        ),
      ),
    );
  }
}

核心修改说明 #

• 移除组件内部的独立Scaffold，统一使用一个Scaffold管理页面结构
• 删除强制占满全屏的容器配置，让组件自适应高度
• 将TabBar与计时器整合到同一页面的AppBar和body中，实现垂直分离的布局效果

内容的提问来源于stack exchange，提问作者pomoworko.com