侧边抽屉

本课属于 Coddy Flutter 学习旅程的“列表和屏幕”单元。第 25 课，共 33 课。

Drawer 是一个从侧边滑出的面板，用来放置应用中无法放进标签页的内容。把它添加到 Scaffold 中：

Scaffold(
  appBar: AppBar(title: Text(folder)),
  drawer: Drawer(
    child: ListView(
      children: [
        const DrawerHeader(child: Text('Mail')),
        ListTile(
          title: const Text('Sent'),
          onTap: () {
            setState(() {
              folder = 'Sent';
            });
            Navigator.pop(context);
          },
        ),
      ],
    ),
  ),
)

添加抽屉后，应用栏起始处会显示一个三条横线的菜单按钮。点击它，或从屏幕边缘向内滑动，就能打开抽屉。

抽屉会一直保持打开状态，直到有操作将它关闭。打开的抽屉就像叠在页面上的屏幕，因此 Navigator.pop(context) 可以将它关闭。点击某一行后调用它，否则抽屉会挡住你选择的页面。

DrawerHeader 是顶部的大块区域，可以放应用名称或已登录的账户。

挑战

简单

点击菜单按钮打开抽屉：里面只有 Inbox。再添加两行，形式与 Inbox 行相同，每行都设置 folder 并关闭抽屉：

Sent，使用 Icons.send
Trash，使用 Icons.delete

亲手试试

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String folder = 'Inbox';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(folder)),
      body: Center(
        child: Text('No messages in $folder'),
      ),
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(
              child: Text('Mail', style: TextStyle(fontSize: 24)),
            ),
            ListTile(
              leading: const Icon(Icons.inbox),
              title: const Text('Inbox'),
              onTap: () {
                setState(() {
                  folder = 'Inbox';
                });
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}