美文网首页
Flutter Drawer

Flutter Drawer

作者: _悟_空 | 来源:发表于2021-08-31 11:16 被阅读0次

    // 基本格式
    return Scaffold(
        appBar: AppBar(
            title: Text("Flutter App"),
        ),
        drawer: Drawer(
            child: Text('左侧边栏'),
        ),
        endDrawer: Drawer(
            child: Text('右侧侧边栏'),
        ),
    );
    
    //DrawerHeader 用法
    drawer: Drawer(
            child: Column(
              children: [
                Row(
                  children: [
                    Expanded(
                      child: DrawerHeader(
                        child: Text(
                          "DrawerHeaderTitle",
                          style: TextStyle(color: Colors.white, fontSize: 24),
                        ),
                        decoration: BoxDecoration(// 背景
                            image: DecorationImage(
                          image: NetworkImage(
                              "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201304%2F11%2F130724xpp1t8cduuq8d1u4.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632969450&t=a1200b8ddda4e189dec4265ee69cfa44"),
                        )),
                      ),
                      flex: 1,
                    )
                  ],
                ),
                ListTile(
                  leading: CircleAvatar(child: Icon(Icons.settings)),
                  title: Text("设置"),
                  onTap: () {
                    Navigator.of(context).pop(); // 跳转回来后可以隐藏。
                    Navigator.pushNamed(context, "/setting");
                  },
                ),
                Divider(),// 分隔线
                ListTile(
                  leading: CircleAvatar(child: Icon(Icons.home)),
                  title: Text("home"),
                ),
                Divider(),
              ],
            ),
          )
    

    如果你想要在抽屉中跳转其他页面并且返回时隐藏抽屉。那么您需要在跳转页面之前添加:Navigator.of(context).pop();

    在使用UserAccountsDrawerHeader时您需要注意必须设置accountEmailaccountName 不然控件会报错。
    UserAccountsDrawerHeader的布局是固定格式,如果设计样式排版不一样请不要使用它。

    // UserAccountsDrawerHeader 基本用法
    endDrawer: Drawer(
            child: Column(
              children: [
                Row(
                  children: [
                    Expanded(
                      child: UserAccountsDrawerHeader(
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image: NetworkImage(
                                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
                            fit: BoxFit.cover,
                          ),
                        ),
                        accountEmail: Text(
                          "123@qq.com",
                          style: TextStyle(color: Colors.amber),
                        ),
                        accountName: Text(
                          "Flutter",
                          style: TextStyle(color: Colors.amber),
                        ),
                        currentAccountPicture: CircleAvatar(
                            backgroundImage: NetworkImage(
                                "https://flutterchina.club/images/flutter-mark-square-100.png")),
                      ),
                      flex: 1,
                    )
                  ],
                ),
              ],
            ),
          ),
    

    Demo地址

    相关文章

      网友评论

          本文标题:Flutter Drawer

          本文链接:https://www.haomeiwen.com/subject/yuqziltx.html