如何在 Flutter 中的主 AppBar 下方添加第二个 AppBar？

Question

我的目标是创建一个 Flutter 布局，其中两个 AppBar 彼此堆叠，类似于此设计：

目前，我的布局如下所示：

我的代码：

class HomePageTimerUI extends StatelessWidget {
bool PomoRed = false;
bool ShortYellow = false;
bool LongBlue = false;
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 600,
        width: double.infinity,
        child: DefaultTabController(
            length: 3,
            child: Scaffold(
                bottomNavigationBar: BottomBar(),
                appBar: AppBar(
                  elevation: 1.0,
                  backgroundColor: Colors.transparent,
                  bottom: PreferredSize(
                    preferredSize: Size.fromHeight(55),
                    child: Container(
                      color: Colors.transparent,
                      child: SafeArea(
                        child: Column(
                          children: <Widget>[
                            TabBar(
                                indicator: 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: Color(0xff3B3B3B),
                                labelStyle: TextStyle(
                                    fontSize: 12,
                                    letterSpacing: 1.3,
                                    fontWeight: FontWeight.w500),
                                unselectedLabelColor: Color(0xffD7D7D7),
                                tabs: [
                                  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),
                                  ),
                                ])
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
                body: TabBarView(
                  children: <Widget>[
                    Center(
                      child: StartPomodoro(),
                    ),
                    Center(
                      child: ShortBreak(),
                    ),
                    Center(
                        child: LongBreak()
                    ),
                  ],
                ))));

  }
}

我尝试直接将 AppBar 代码复制并粘贴到现有代码下方，但它无法正确显示。我怀疑这可能是因为有多个容器。

如何在 Flutter 中使用两个 AppBar 实现想要的布局？

感谢您的帮助！

Answer 1

您可以使用 BottomNavigationBar 来实现此目的。

查看更多信息：https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html