为屏幕添加抽屉

在使用 Material Design 的应用中，导航主要有两种方式：标签和抽屉。当空间不足以支持标签时，抽屉提供了一种便捷的替代方案。

在 Flutter 中，将Drawer 小部件与Scaffold 组合使用，即可创建具有 Material Design 抽屉的布局。此方法使用以下步骤：

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

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

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

Scaffold(
  appBar: AppBar(
    title: const Text('AppBar without hamburger button'),
  ),
  drawer: // 在下一步中在此处添加抽屉。
);

现在向 Scaffold 添加一个抽屉。抽屉可以是任何小部件，但最好使用material 库 中的 Drawer 小部件，它符合 Material Design 规范。

Scaffold(
  appBar: AppBar(
    title: const Text('AppBar with hamburger button'),
  ),
  drawer: Drawer(
    child: // 在下一步中填充抽屉。
  ),
);

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

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

Drawer(
  // 向抽屉添加 ListView。这确保用户在垂直空间不足以容纳所有内容时，可以滚动浏览抽屉中的选项。
  child: ListView(
    // 重要：从 ListView 中移除任何填充。
    padding: EdgeInsets.zero,
    children: [
      const DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text('Drawer Header'),
      ),
      ListTile(
        title: const Text('Item 1'),
        onTap: () {
          // 更新应用的状态。
          // ...
        },
      ),
      ListTile(
        title: const Text('Item 2'),
        onTap: () {
          // 更新应用的状态。
          // ...
        },
      ),
    ],
  ),
);

通常，您不需要编写任何代码来打开 drawer，因为当 leading 小部件为空时，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: // 在最后一步中填充抽屉。
  ),
);

用户点击某个项目后，您可能想要关闭抽屉。您可以通过使用Navigator 来实现。

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

ListTile(
  title: const Text('Item 1'),
  onTap: () {
    // 更新应用的状态
    // ...
    // 然后关闭抽屉
    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(
        // 向抽屉添加 ListView。这确保用户在垂直空间不足以容纳所有内容时，可以滚动浏览抽屉中的选项。
        child: ListView(
          // 重要：从 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: () {
                // 更新应用的状态
                _onItemTapped(0);
                // 然后关闭抽屉
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Business'),
              selected: _selectedIndex == 1,
              onTap: () {
                // 更新应用的状态
                _onItemTapped(1);
                // 然后关闭抽屉
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('School'),
              selected: _selectedIndex == 2,
              onTap: () {
                // 更新应用的状态
                _onItemTapped(2);
                // 然后关闭抽屉
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。