在屏幕上添加抽屉

在使用 Material Design 的应用程序中，导航主要有两种选择：选项卡和抽屉。当没有足够的空间来支持选项卡时，抽屉提供了一个方便的替代方案。

在 Flutter 中，使用 Drawer 小部件与 Scaffold 结合使用，以创建具有 Material Design 抽屉的布局。此食谱使用以下步骤

1. 创建一个 Scaffold。
2. 添加一个抽屉。
3. 用项目填充抽屉。
4. 以编程方式关闭抽屉。

要将抽屉添加到应用程序中，请将其包装在 Scaffold 小部件中。Scaffold 小部件为遵循 Material Design 指南的应用程序提供一致的视觉结构。它还支持特殊的 Material Design 组件，例如抽屉、应用程序栏和 SnackBars。

在这个示例中，创建一个带有 drawer 的 Scaffold

Scaffold(
  appBar: AppBar(
    title: const Text('AppBar without hamburger button'),
  ),
  drawer: // Add a Drawer here in the next step.
);

现在将抽屉添加到 Scaffold 中。抽屉可以是任何小部件，但通常最好使用来自 material 库 的 Drawer 小部件，它符合 Material Design 规范。

Scaffold(
  appBar: AppBar(
    title: const Text('AppBar with hamburger button'),
  ),
  drawer: Drawer(
    child: // Populate the Drawer in the next step.
  ),
);

现在您已经有了 Drawer，请向其中添加内容。在这个示例中，使用 ListView。虽然您可以使用 Column 小部件，但 ListView 很方便，因为它允许用户在内容超出屏幕支持范围时滚动抽屉。

使用 DrawerHeader 和两个 ListTile 小部件填充 ListView。有关使用列表的更多信息，请参阅 列表食谱。

Drawer(
  // Add a ListView to the drawer. This ensures the user can scroll
  // through the options in the drawer if there isn't enough vertical
  // space to fit everything.
  child: ListView(
    // Important: Remove any padding from the ListView.
    padding: EdgeInsets.zero,
    children: [
      const DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text('Drawer Header'),
      ),
      ListTile(
        title: const Text('Item 1'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
      ListTile(
        title: const Text('Item 2'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
    ],
  ),
);

通常，您不需要编写任何代码来打开 drawer，因为当 leading 小部件为 null 时，AppBar 中的默认实现是 DrawerButton。

但是，如果您想自由控制 drawer。您可以通过使用 Builder 调用 Scaffold.of(context).openDrawer() 来实现。

Scaffold(
  appBar: AppBar(
    title: const Text('AppBar with hamburger button'),
    leading: Builder(
      builder: (context) {
        return IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
        );
      },
    ),
  ),
  drawer: Drawer(
    child: // Populate the Drawer in the last step.
  ),
);

在用户点击项目后，您可能希望关闭抽屉。您可以通过使用 Navigator 来实现。

当用户打开抽屉时，Flutter 会将抽屉添加到导航堆栈中。因此，要关闭抽屉，请调用 Navigator.pop(context)。

ListTile(
  title: const Text('Item 1'),
  onTap: () {
    // Update the state of the app
    // ...
    // Then close the drawer
    Navigator.pop(context);
  },
),

此示例显示了 Drawer 在 Scaffold 小部件中使用的示例。该 Drawer 有三个 ListTile 项目。_onItemTapped 函数更改所选项目的索引，并在 Scaffold 的中心显示相应的文本。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        leading: Builder(
          builder: (context) {
            return IconButton(
              icon: const Icon(Icons.menu),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
            );
          },
        ),
      ),
      body: Center(
        child: _widgetOptions[_selectedIndex],
      ),
      drawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: const Text('Home'),
              selected: _selectedIndex == 0,
              onTap: () {
                // Update the state of the app
                _onItemTapped(0);
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Business'),
              selected: _selectedIndex == 1,
              onTap: () {
                // Update the state of the app
                _onItemTapped(1);
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('School'),
              selected: _selectedIndex == 2,
              onTap: () {
                // Update the state of the app
                _onItemTapped(2);
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}