Flutter 学习：Flutter Drawer侧边栏

一.复习上一章

TabBar 添加 controller 获取滑动监听

class MyButtonWidget extends State<Mypage2>
    with SingleTickerProviderStateMixin {
  TabController tabController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    tabController = new TabController(vsync: this, length: 2);
    tabController.addListener(() {
      print(tabController.index);
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: TabBar( 
                 controller: tabController,
                 tabs: <Widget>[Tab(text: "热门"), Tab(text: "推荐")],),),
        body: TabBarView(
          controller: tabController,
          children: <Widget>[]),
      ),
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    tabController.dispose();
  }
}

TabController 使用步骤

1、有状态组件多继承 SingleTickerProviderStateMixin
2、在initData中初始化TabController传入两个参数，固定写法
3、TabBar 和 TabBarView 都需要配置上 controller。

二.Drawer侧边栏

在Scaffold组件俩面传入drawer 参数可以定义左侧边栏，传入endDrawer可以定义右侧边栏，侧边栏默认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏。

image.png

三.DrawerHeader 带头部的抽屉

常见属性

decoration：设置顶部背景颜色

child：配置子元素

padding：内边距

margin：外边距

endDrawer: Column(
            children: <Widget>[
              Expanded(
                child: DrawerHeader(
                  child: Text("右侧边栏"),
                  decoration: BoxDecoration(color: Colors.red),
                ),
              ),
            ],
          )

四.收起抽屉

和退出页面一样使用 Navigator.of(context).pop() 关闭抽屉

 drawer: Drawer(child: MyDrawerWidget())

class MyDrawerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Container(height: 200),
        Text("左侧边栏"),
        RaisedButton(
          child: Text("点击收起侧边栏"),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        RaisedButton(
          child: Text("点击进入搜索页面"),
          onPressed: () {
            Navigator.of(context).pop();
            Navigator.pushNamed(context, "/search");
          },
        )
      ],
    );
  }
}

注意

异常： Navigator 中的context 使用MaterialApp中的context 会报错
“Flutter Navigator operation requested with a context that does not include a Navigat”

解决方法：将 MaterialApp 内容再使用 StatelessWeight 或 StatefulWeight 包裹一层，然后使用子组件的context。

效果图

dawer.gif

五.总结

1、侧边栏实现

Scaffold(drawer: Drawer(child: MyDrawerWidget()))

2、关闭侧边栏

Navigator.of(context).pop()