如何导航到另一个页面而不会弹出抽屉？

Posted 2023-04-13

【中文标题】如何导航到另一个页面而不会弹出抽屉？

【英文标题】：How can i navigate to another page without popping the drawer in flutter?

【发布时间】：2021-10-13 15:39:20

【问题描述】：

我想在页面之间切换，同时让抽屉在所有内容之上，这样页面会发生变化并且抽屉不会弹出，它必须始终保持在所有内容之上 strong> 除非我想隐藏它。

【参考方案1】：

使用 Redux、Bloc、Provider 等状态管理器。

为抽屉创建一个单独的小部件，然后在您需要的任何地方使用。

示例：使用Provider 管理抽屉状态

控制器

import 'package:flutter/material.dart';

class MenuController extends ChangeNotifier 
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  GlobalKey<ScaffoldState> get scaffoldKey => _scaffoldKey;

  void controlMenu() 
    if (!_scaffoldKey.currentState!.isDrawerOpen) 
      _scaffoldKey.currentState!.openDrawer();
    
  

向小部件树添加状态管理

class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light().copyWith(
        scaffoldBackgroundColor: bgColor,
        textTheme: GoogleFonts.poppinsTextTheme(Theme.of(context).textTheme)
            .apply(bodyColor: Colors.white),
        canvasColor: secondaryColor,
      ),
      debugShowCheckedModeBanner: false,
      home: MultiProvider(
        providers: [
          ChangeNotifierProvider(
            create: (context) => MenuController(),
          ),
        ],
        child: HomeScreen(),
      ),
    );
  

创建抽屉小部件

class SideMenu extends StatelessWidget 
  const SideMenu(
    Key? key,
  ) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Drawer(
      child: ListView(
        children: [
          DrawerHeader(
            child: Image.asset("assets/images/logo.png"),
          ),
          DrawerListTile(
            title: "Dashboard",
            svgSrc: "assets/icons/menu_dashbord.svg",
            press: () ,
          ),
          DrawerListTile(
            title: "Pages",
            svgSrc: "assets/icons/page.svg",
            press: () ,
          ),
          DrawerListTile(
            title: "Applications",
            svgSrc: "assets/icons/application.svg",
            press: () ,
          ),
          DrawerListTile(
            title: "UI Components",
            svgSrc: "assets/icons/ui.svg",
            press: () ,
          ),
          DrawerListTile(
            title: "Widgets",
            svgSrc: "assets/icons/widget.svg",
            press: () ,
          ),
          DrawerListTile(
            title: "Forms",
            svgSrc: "assets/icons/forms.svg",
            press: () ,
          ),
          DrawerListTile(
            title: "Charts",
            svgSrc: "assets/icons/chart.svg",
            press: () ,
          ),
          DrawerListTile(
            title: "Settings",
            svgSrc: "assets/icons/menu_setting.svg",
            press: () ,
          ),
        ],
      ),
    );
  


class DrawerListTile extends StatelessWidget 
  const DrawerListTile(
    Key? key,
    // For selecting those three line once press "Command+D"
    required this.title,
    required this.svgSrc,
    required this.press,
  ) : super(key: key);

  final String title, svgSrc;
  final VoidCallback press;

  @override
  Widget build(BuildContext context) 
    return ListTile(
      onTap: press,
      horizontalTitleGap: 0.0,
      leading: SvgPicture.asset(
        svgSrc,
        color: primaryColor,
        height: 16,
      ),
      title: Text(
        title,
        style: TextStyle(color: primaryColor),
      ),
    );
  

在您的页面中使用抽屉

class HomeScreen extends StatefulWidget 
  @override
  _HomeScreenState createState() => _HomeScreenState();


class _HomeScreenState extends State<MyAboutPage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      key: context.read<MenuController>().scaffoldKey,
      appBar: AppBar(
        title: Text('About Page'),
      ),
      drawer: SideMenu(),
    );
  

控制状态，如果你想在点击时打开抽屉

IconButton(
              icon: Icon(Icons.menu),
              onPressed: context.read<MenuController>().controlMenu,
            ),

【讨论】：

对于一个新的颤振用户来说，这似乎很复杂，谢谢你的信息，但我几乎什么都不懂