Flutter Widget 之Drawer

需要为其他页面提供导航？ 尝试使用Drawer

要使用它，请从Scaffold widget开始，然后将Drawer weidget作为参数传递给Scaffolddrawer参数。

Widget build(BuilldContext context) {
    return MaterialApp(
        home: Scaffold(
            drawer: Drawer(),
        ),
    );
}

具有appBar的Scaffold将自动向appBar添加一个按钮，以打开Drawer。

Scafflod(
    appBar: AppBar(),
    drawer: Drawer(),
),

您也可以使用endDrawer参数,在右侧显示一个Drawer。

Scaffold(
    appBar: AppBar(),
    endDrawer: Drawer(),
),

要以编程方式显示Drawer，请获取Scaffold状态并调用openDrawer()或openEndDrawer().

RaisedButton(
    child: Text('Open drawer'),
    onPressed: (){
        Scaffold.of(context).openDrawer();
        //Scaffold.of(context).openEndDrawer();
    }
),

取消Drawer很容易，只需向左滑动Drawer

或使用Navigator,即可将Drawer显示为导航堆栈的新根。

ListTitle(
    title: Text('Tap me!'),
    onTap: () {
        Navigator.of(context).pop();
    }
),

Drawer可以包含您喜欢的人和窗口widget，但是将ListView与Drawer标头和listTiles一起使用时比较普遍的。

drawer: Drawer(
    child: ListView(
        children: [
            DrawerHeader(),
            ListTile(),
            ListTile(),
            ListTile(),
         
        ]
    ),
),

如果想了解有关Drawer的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址