flutter基础布局之 Drawer

最新推荐文章于 2025-09-24 13:14:41 发布

原创最新推荐文章于 2025-09-24 13:14:41 发布 · 379 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #drawer

flutter 专栏收录该内容

220 篇文章

订阅专栏

这篇博客介绍了如何在Flutter中利用Scaffold、AppBar和Drawer组件创建一个标准的侧滑导航菜单。示例代码展示了如何配置Drawer，包括DrawerHeader和ListTiles，以显示消息、个人资料和设置等选项。

Drawer 一般放在标题栏上，通过ListView和ListTile的配合，用于显示隐藏的标题。

Scaffold(
  appBar: AppBar(
    title: const Text('Drawer Demo'),
  ),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: const <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text(
            'Drawer Header',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
            ),
          ),
        ),
        ListTile(
          leading: Icon(Icons.message),
          title: Text('Messages'),
        ),
        ListTile(
          leading: Icon(Icons.account_circle),
          title: Text('Profile'),
        ),
        ListTile(
          leading: Icon(Icons.settings),
          title: Text('Settings'),
        ),
      ],
    ),
  ),
)