Flutter Drawer 侧滑菜单、抽屉

在Flutter中，创建侧滑菜单（Drawer）可以使用Drawer组件。通常，侧滑菜单与Scaffold一起使用，并且可以通过Scaffold的drawer属性进行设置。

以下是一个简单的例子，展示如何在Flutter应用中创建和使用侧滑菜单：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Drawer Example'),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountName: Text('John Doe'),
              accountEmail: Text('johndoe@example.com'),
              currentAccountPicture: CircleAvatar(
                backgroundImage: NetworkImage('https://example.com/profile.jpg'),
              ),
            ),
            ListTile(
              leading: Icon(Icons.home),
              title: Text('Home'),
              onTap: () {
                Navigator.of(context).pop(); // Close the drawer
                // Navigate to home screen
              },
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
              onTap: () {
                Navigator.of(context).pop(); // Close the drawer
                // Navigate to settings screen
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: Text('Main content goes here'),
      ),
    );
  }
}

在这个例子中，HomePage是一个StatelessWidget，它使用Scaffold来创建页面布局。Scaffold的drawer属性设置为一个Drawer组件，里面包含用户账户头部（UserAccountsDrawerHeader）和两个ListTile，分别代表侧滑菜单中的两个选项。每个ListTile都有一个onTap回调函数，用于关闭侧滑菜单并处理用户的选择。