首页 > 其他 > 详细

Flutter——Drawer、DrawerHeader、UserAccountsDrawerHeader组件(侧边栏组件)

时间:2019-12-10 15:56:40      阅读:127      评论:0      收藏:0      [点我收藏+]
在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏。侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧边栏。
 
DrawerHeader组件的常用属性:
属性 描述
decoration 设置顶部背景颜色
child 配置子元素
padding 内边距
margin 外边距

 

 UserAccountsDrawerHeader组件的常用属性:

属性 描述
decoration
设置顶部背景颜色
accountName
账户名称
accountEmail
账户邮箱
currentAccountPicture
用户头像
otherAccountsPictures
用来设置当前账户其他账户头像
margin
 

 

技术分享图片

 

 

 

import ‘package:flutter/material.dart‘;

void main() {
  runApp(MaterialApp(
    title: "DrawerWidget",
    home: Scaffold(
      appBar: AppBar(title: Text("DrawerWidget")),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            DrawerHeader(
              child: Text("你好,Flutter")
            ),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.home),
              ),
              title: Text("我的空间"),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.search),
              ),
              title: Text("我的查询"),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.palette),
              ),
              title: Text("我的作品"),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.camera),
              ),
              title: Text("我的圈子"),
            ),
            Divider(),
          ],
        ),
      ),
    ),
  ));
}

 

补充一个小技巧。

在Drawer组件点击跳转到其他页面时,返回的时候想看到直接关闭Drawer的页面。

可以先pop掉。

onTap:(){
    Navigator.of(context).pop();
    Navigator.pushNamed(context,"/xxx")    
}

 

Flutter——Drawer、DrawerHeader、UserAccountsDrawerHeader组件(侧边栏组件)

原文:https://www.cnblogs.com/chichung/p/12016838.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!