如何在Flutter中实现类似Android Fragment的抽屉页面切换

在Flutter里没有原生的Fragment，但可以通过状态管理+组件切换实现完全等价的效果，以下是针对你的场景的具体实现步骤：

1. 先定义"Fragment"对应的页面组件 #

先把每个抽屉项对应的页面单独抽成Widget，类比Android里的Fragment：

// 首页组件
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Home Page'),
    );
  }
}

// 设置页组件
class SettingsPage extends StatelessWidget {
  const SettingsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Settings Page'),
    );
  }
}

// 帮助页组件
class HelpPage extends StatelessWidget {
  const HelpPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Help Page'),
    );
  }
}

2. 修改主页面实现切换逻辑 #

在你的主页面（带Drawer的Scaffold所在的StatefulWidget）里，添加状态变量跟踪当前显示的页面，然后在抽屉项点击时更新状态：

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  // 初始显示首页
  Widget _currentPage = const HomePage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Image Cleaner')),
      drawer: SafeArea(
        child: Drawer(
          child: Container(
            color: Colors.white,
            child: ListView(
              children: [
                DrawerHeader(
                  decoration: const BoxDecoration(color: Colors.indigoAccent),
                  child: Column(
                    children: [
                      Container(
                        width: 70,
                        height: 70,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(50),
                          border: Border.all(color: Colors.white, width: 2.0),
                          image: const DecorationImage(
                            image: AssetImage('assets/images/logo_image.png'),
                          ),
                        ),
                      ),
                      const SizedBox(height: 15),
                      const Text(
                        "Image Cleaner",
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 15,
                        ),
                      ),
                      const SizedBox(height: 2),
                      const Text(
                        "support.imageclean@gmail.com",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                        ),
                      )
                    ],
                  ),
                ),
                ListBody(
                  children: [
                    ListTile(
                      leading: const Icon(Icons.home),
                      title: const Text('Home'),
                      onTap: () {
                        Navigator.of(context).pop();
                        // 更新当前页面为首页
                        setState(() {
                          _currentPage = const HomePage();
                        });
                      },
                    ),
                    ListTile(
                      leading: const Icon(Icons.settings),
                      title: const Text('Settings'),
                      onTap: () {
                        Navigator.of(context).pop();
                        setState(() {
                          _currentPage = const SettingsPage();
                        });
                      },
                    ),
                    ListTile(
                      leading: const Icon(Icons.help),
                      title: const Text('Help'),
                      onTap: () {
                        Navigator.of(context).pop();
                        setState(() {
                          _currentPage = const HelpPage();
                        });
                      },
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
      // 直接把body设置为当前页面变量，状态更新时自动切换
      body: _currentPage,
    );
  }
}

3. 进阶：保留页面状态（类似Fragment的hide/show） #

如果需要切换页面时保留之前页面的状态（比如输入框内容、滚动位置），可以用IndexedStack替代直接赋值Widget：

class _MainScreenState extends State<MainScreen> {
  // 用索引跟踪当前页面
  int _currentIndex = 0;
  // 页面列表
  final List<Widget> _pages = const [
    HomePage(),
    SettingsPage(),
    HelpPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ... 其他代码不变 ...
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      drawer: SafeArea(
        child: Drawer(
          // ... 其他代码不变 ...
          ListBody(
            children: [
              ListTile(
                leading: const Icon(Icons.home),
                title: const Text('Home'),
                onTap: () {
                  Navigator.of(context).pop();
                  setState(() {
                    _currentIndex = 0;
                  });
                },
              ),
              ListTile(
                leading: const Icon(Icons.settings),
                title: const Text('Settings'),
                onTap: () {
                  Navigator.of(context).pop();
                  setState(() {
                    _currentIndex = 1;
                  });
                },
              ),
              ListTile(
                leading: const Icon(Icons.help),
                title: const Text('Help'),
                onTap: () {
                  Navigator.of(context).pop();
                  setState(() {
                    _currentIndex = 2;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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