Flutter 自定义Drawer的状态栏处理

打开抽屉发现状态栏是灰色的,抽屉头部是用图片展示,理想效果应该是抽屉头部图片偏移上面状态栏的高度

解决方法:

添加 ListView 的 padding 属性

return Container(
      child: Drawer(
        elevation: 20,
        child: ListView(
          padding: EdgeInsets.zero,  //添加padding
          children: [
            myHeader, // 可在这里替换自定义的header
            ListTile()

也可能此方法并不能解决你的问题

继续添加下面的

Widget myHeader = DrawerHeader(
      decoration: BoxDecoration(
          ///设置顶部背景颜色或图片
//        color: Colors.red
          image: DecorationImage(
              image:AssetImage(
              'images/head_background.png'
              ),
            fit: BoxFit.fill
          )
      )

drawer头部的两种方式,及其常见属性

Flutter 自定义Drawer的状态栏处理_第1张图片

想深入剖析可访问

https://iiong.com/flutter-drawer-reviews/

https://www.cnblogs.com/loaderman/p/11246684.html

 

给Header添加点击事件

参考 https://www.jianshu.com/p/c6bf6152709e

使用InkWell包裹住,进行事件添加

        InkWell(
                      ///使用InkWell包裹添加点击事件
                      onTap: (){
                        Navigator.push(context, new  MaterialPageRoute(builder: (context) => new PersionalScreen()));
                      },
                      child: Container(
                        margin: EdgeInsets.only(left: 10.0),
                        child: new Column(
                          crossAxisAlignment: CrossAxisAlignment.start, // 水平方向左对齐
                          mainAxisAlignment: MainAxisAlignment.center, // 竖直方向居中
                          children: [
                            new Text(
                              "张三",
                              style: new TextStyle(
                                  fontSize: 20.0,
                                  fontWeight: FontWeight.w400,
                                  color: Colors.white),
                            ),
                            new Text(
                              "18785963288",
                              style: new TextStyle(
                                  fontSize: 14.0, color: Colors.white),
                            ),
                          ],
                        ),
                      ),
                    )

 

你可能感兴趣的:(#Flutter实践问题收集,flutter)