如何在同一个选项卡中打开一个新屏幕并继续显示 TabBar

Question

我想当我点击“Nova Reserva”按钮时，它会打开一个新屏幕，但在同一个选项卡中，而不会丢失 TabBar。

应用程序 enter image description here

当前的 enter image description here

代码 TabBarView

TabBarView(
            controller: _tabController,
            children: const [
              HomeTab(),
              ResearchesTab(),
              SchedulesTab(),
              Center(
                child: Text('MENSAGENS'),
              ),
              Center(
                child: Text('CADASTROS'),
              ),
            ],
          ),

代码标签栏

child: TabBar(
                  physics: const BouncingScrollPhysics(),
                  controller: _tabController,
                  isScrollable: true,
                  indicatorPadding: EdgeInsets.symmetric(
                    vertical: size.height * .005,
                  ),
                  indicatorSize: TabBarIndicatorSize.label,
                  indicator: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(
                        color: CustomColors.orange,
                        width: size.height * .004,
                      ),
                    ),
                  ),
                  labelPadding: EdgeInsets.symmetric(
                    horizontal: size.width * .04,
                  ),
                  tabs: const [
                    TabBarTile(
                      image: 'assets/images/home.png',
                      label: 'Home',
                    ),
                    TabBarTile(
                      image: 'assets/images/pesquisas.png',
                      label: 'Pesquisas',
                    ),
                    TabBarTile(
                      image: 'assets/images/agendamentos.png',
                      label: 'Agendamentos',
                    ),
                    TabBarTile(
                      image: 'assets/images/mensagens.png',
                      label: 'Mensagens',
                    ),
                    TabBarTile(
                      image: 'assets/images/cadastros.png',
                      label: 'Cadastros',
                    ),
                  ],
                ),

在按钮中，我使用 GetX 导航，但我也尝试使用 MaterialPageRoute，但没有成功。

我的目标 enter image description here

Answer 1

创建一个布尔变量，它将根据其值更改选项卡栏的主体。通过更改布尔值的标志来更改选项卡栏的主体内容。

完整代码：-

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

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

  @override
  State<MyStatelessWidget> createState() => _MyStatelessWidgetState();
}

class _MyStatelessWidgetState extends State<MyStatelessWidget> {
  bool buttonOnePressed = false; // Declare the Boolean variable
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TabBar Widget'),
          bottom: const TabBar(
            tabs: <Widget>[
              Tab(
                text: "Tab 1",
              ),
              Tab(
                text: "Tab 2",
              ),
              Tab(
                text: "Tab 3",
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            const Center(
              child: Text("Tab 1"),
            ),
            buttonOnePressed   // Display widgets according to Boolean variable
                ? const Center(
                    child: Text("From Button 1"),
                  )
                : Center(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        ElevatedButton(
                          onPressed: () {
                            setState(() {
                              buttonOnePressed = true; // change Boolean value
                            });
                          },
                          child: const Text("Button 1"),
                        ),
                        const SizedBox(width: 30),
                        ElevatedButton(
                            onPressed: () {}, child: const Text("Button 2"))
                      ],
                    ),
                  ),
            const Center(
              child: Text("It's sunny here"),
            ),
          ],
        ),
      ),
    );
  }
}

输出 ： -