10 Flutter UI 之 抽屉侧边栏

一 抽屉侧边栏

在scaffold 组件中 可以定义左右边栏

// 左边的侧边栏

        drawer: Drawer(child: Center(child: Text("左边的"))),
        // 右边的侧边栏
        endDrawer: Drawer(child: Center(child: Text("右边的"))),

二 DrawHeader

       // 左边的侧边栏
        drawer: Drawer(
            child: Column(
          children: [
            //
            DrawerHeader(
              // 装饰的属性
              decoration: BoxDecoration(
                  image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage(
                          "https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"))),
              child: Text("我是抽屉头部"),
            ),

            ListTile(
              leading: Icon(Icons.home),
              title: Text("第一行"),
            ),
            Divider(
              height: 1,
            ),
            ListTile(
              leading: Icon(Icons.home),
              title: Text("第二行"),
            ),
            Divider(
              height: 1,
            ),
            ListTile(
              leading: Icon(Icons.home),
              title: Text("第三行"),
            ),
            Divider(
              height: 1,
            )
          ],
        ))

三 侧边栏的跳转和隐藏

Navigator.of(context).pop(); Navigator.pushNamed(context, '/search'); }