Flutter：持久底部导航栏项目对话框

Question

我有一个持久的底部导航栏实现。切换到导航栏项目时是否可以显示一个对话框？根据对话框的结果决定是推送到另一个屏幕还是推送到原始底部导航栏项目？如果可以的话，怎样做？谢谢！

Answer 1

这是您的解决方案。

所以，这是下面提到的源代码的输出：View

源代码：

import "package:flutter/material.dart";
import "package:myapp/new_screen.dart";

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int initialIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: initialIndex,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            label: "Tab 0",
            icon: SizedBox(),
          ),
          BottomNavigationBarItem(
            label: "Tab 1",
            icon: SizedBox(),
          ),
        ],
        onTap: (int value) async {
          initialIndex = value;
          setState(() {});
          if (initialIndex == 0) {
            const String message = "Tap on Tab 1 to open the dialog";
            const SnackBar snackBar = SnackBar(content: Text(message));
            ScaffoldMessenger.of(context).showSnackBar(snackBar);
          } else {
            await openDialog();
          }
        },
      ),
    );
  }

  Future<void> openDialog() async {
    await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text("Choose"),
          content: const Text("What action do you want to perform?"),
          actions: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pop();
                initialIndex = 0;
                setState(() {});
              },
              child: const Text("Switch back to Tab 0"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pop();
                final MaterialPageRoute<void> route = MaterialPageRoute<void>(
                  builder: (BuildContext context) {
                    return const NewScreen();
                  },
                );
                Navigator.of(context).push(route);
              },
              child: const Text("Switch to a new screen"),
            )
          ],
        );
      },
    );
    return Future<void>.value();
  }
}