我的导航抽屉无法正常工作。我已经创建了屏幕并浏览了很多示例

Question

我的抽屉没有导航到其他屏幕。不知道为什么，我翻了很多Whosebug的解决方案。我也创建了路线，但仍然无法正常工作。

这是我的抽屉代码。

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

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          const DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.greenAccent,
            ),
            child: Text('Welcome!'),
          ),
          ListTile(
            title: const Text('Home'),
            onTap: () => Navigator.pushReplacementNamed(context, Routes.home)
          ),
          ListTile(
            title: const Text('Settings'),
            onTap: () => Navigator.pushReplacementNamed(context, Routes.settings)
          ),
          ListTile(
            title: const Text('LogOut'),
            onTap: () => Navigator.pushReplacementNamed(context, Routes.logout)
          ),
        ],
      ),
    );
  }
  
}

这是路线 class。

import 'package:adaptive_layout/widgets/candidate_form.dart';
import 'package:adaptive_layout/widgets/logout.dart';
import 'package:adaptive_layout/widgets/settings.dart';

class Routes {
  static const String home = CandidateForm.routeName;
  static const String settings = Settings.routeName;
  static const String logout = LogOut.routeName;
}

所有 classes 只是在中心有一个文本显示器。但是抽屉在 onTap 之后既不会自行关闭，也不会转到该页面。

这是我的 MaterialAppWidget，即 main.dart。

import 'package:adaptive_layout/pages/desktop_page.dart';
import 'package:adaptive_layout/pages/mobile_page.dart';
import 'package:adaptive_layout/pages/tablet_page.dart';
import 'package:flutter/material.dart';


void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Views',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SafeArea(
        child: LayoutBuilder(
          builder: (context, constraints) {
            if(constraints.maxWidth < 600){
              return const MobilePage();
            }
            else if(constraints.maxWidth < 768){
              return const TabletPage();
            }
            else{
              return const DesktopPage();
            } 
          }
        ),
      ),
    );
  }
}

请帮忙。现在正在试用 2 天。

Answer 1

发生这种情况是因为您没有在 MaterialApp 小部件中定义路线。如果您使用的是匿名路由，则这不是必需的，但如果您使用的是 named 路由，则必须。

您需要在 MaterialApp 上删除您的 home: 属性，并将您的 LayoutBuilder 移至其他位置。

像这样：

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Views',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        // Here you define the names and the Widgets (Preferably ones with a Scaffold) that are your pages
        '/': (context) => const HomePage(),
        '/second': (context) => const SecondScreen(),
       },
    );
  }
}

然后使用命名路由导航到它们：

() => Navigator.pushReplacementNamed(context, '/second')

如果您想了解更多信息，Flutter 网站上有一个 cookbock 向您展示如何使用它。

我的导航抽屉无法正常工作。我已经创建了屏幕并浏览了很多示例

My Navigation Drawer just doesn't works. I have created the screens and gone through a lot of examples

dart

navigation-drawer

flutter

flutter-web