Flutter抽屉列表项独立Dart页面创建及点击跳转实现咨询

1. 创建独立页面组件 #

为每个列表项创建单独的Dart文件，每个文件对应一个页面，示例如下：

home_screen.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Home")),
      body: const Center(child: Text("Home Page")),
    );
  }
}

profile_screen.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Profile")),
      body: const Center(child: Text("Profile Page")),
    );
  }
}

其余如NotificationScreen、RatingReviewScreen等页面，都可以参照上述模板创建，只需替换页面标题和内容即可。

2. 修改Drawer组件，添加跳转逻辑 #

更新原有的MyDrawer代码，导入各个页面，并给列表项添加点击跳转的回调：

import 'package:buggy/theme/theme.dart';
import 'package:flutter/material.dart';
// 导入各页面文件，路径根据实际目录调整
import 'home_screen.dart';
import 'profile_screen.dart';
import 'notification_screen.dart';
import 'rating_review_screen.dart';
import 'saved_screen.dart';
import 'complaint_screen.dart';
import 'faqs_screen.dart';

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

  // 给列表项添加点击回调参数
  Widget listTile({
    IconData? icon,
    String? title,
    Function()? onTap,
  }) {
    return InkWell(
      onTap: onTap,
      child: ListTile(
        leading: Icon(
          icon,
          size: 32,
        ),
        title: Text(title!, style: const TextStyle(color: Colors.black)),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Container(
        color: MyTheme.lightBluishColor,
        child: ListView(
          children: [
            DrawerHeader(
              child: Row(
                children: [
                  CircleAvatar(
                    backgroundColor: MyTheme.bluishColor,
                    radius: 43,
                    child: CircleAvatar(
                      radius: 40,
                      backgroundColor: MyTheme.creamColor,
                      child: Image.network(
                        "https://images.unsplash.com/photo-1618641986557-1ecd230959aa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cHJvZmlsZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=1000&q=60",
                        height: 65,
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Text("Welcome Guest"),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: ElevatedButton(
                            onPressed: () {},
                            style: ElevatedButton.styleFrom(
                              backgroundColor: MyTheme.bluishColor,
                            ),
                            child: const Text("Login"),
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
            // 为每个列表项绑定跳转逻辑
            listTile(
              icon: Icons.home_outlined,
              title: "Home",
              onTap: () {
                Navigator.pop(context); // 先关闭Drawer
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const HomeScreen()),
                );
              },
            ),
            listTile(
              icon: Icons.person_outline,
              title: "Profile",
              onTap: () {
                Navigator.pop(context);
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const ProfileScreen()),
                );
              },
            ),
            listTile(
              icon: Icons.notifications_outlined,
              title: "Notification",
              onTap: () {
                Navigator.pop(context);
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const NotificationScreen()),
                );
              },
            ),
            listTile(
              icon: Icons.star_border_outlined,
              title: "Rating & Review",
              onTap: () {
                Navigator.pop(context);
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const RatingReviewScreen()),
                );
              },
            ),
            listTile(
              icon: Icons.saved_search_sharp,
              title: "Saved",
              onTap: () {
                Navigator.pop(context);
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const SavedScreen()),
                );
              },
            ),
            listTile(
              icon: Icons.file_copy_outlined,
              title: "Raise to Complaint",
              onTap: () {
                Navigator.pop(context);
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const ComplaintScreen()),
                );
              },
            ),
            listTile(
              icon: Icons.format_quote_outlined,
              title: "FAQs",
              onTap: () {
                Navigator.pop(context);
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const FaqsScreen()),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

额外说明 #

• 如果不需要点击后关闭Drawer，可移除Navigator.pop(context);语句。
• 确保各页面文件的路径与import语句匹配，避免出现找不到文件的错误。

内容的提问来源于stack exchange，提问作者Md Reyaz