向屏幕添加抽屉

在使用 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: // 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);
              },
            ),
          ],
        ),
      ),
    );
  }
}

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