Flutter学习-14- 微信项目学习-我的页面

1. 页面分析

我的页面主要列表页面和发现页面类似，区别在于有一个头部视图和悬浮的照相机部分 那么我们整体可以分为3个部分，头部视图，列表，和照相机，由于照相机一直在右上角我们可以整体使用stack包装，然后ListView包装这个头部。

2. 头部视图

  Widget headView(){
    return Container(
      height: 160,

      padding: EdgeInsets.only(left: 20,top: 50),
      child:Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
         Container(

            height: 70,
            width: 70,
            decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(14),
            image: DecorationImage(image: AssetImage('images/微信表情.png'))

          ),

         ),
          Container(
         //标题

          child: Column(
            //NickName
            crossAxisAlignment: CrossAxisAlignment.start,

            children: [
              Container(
                child:  Text('helloFlutter',style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold),),
              ),

              //下标题
             Container(
               child:   Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,



                 children: [
                   Text('sdasd',style: TextStyle(fontSize: 14),),
                   //箭头
                   Image(
                     image: AssetImage('images/icon_right.png'),
                     width: 15,
                   )
                 ],
               ),
             )
            ],

          ),

          ),
        ],
      ),
    );
  }

这里大概效果有了我们还需要调整下，这里我们把头像和头像右边内容放在row中左右布局，从顶部开始布局。主标题和副标题下面的内容使用上下Column布局，副标题和箭头使用左右布局，最后层层嵌套就得到上图的效果，但是没有达到我们的要求。

• Expend Expanded组件主要是沾满当前主轴方法，主轴方向不会剩下空隙 我们在最外层包裹一层即可，同时设置间距调整控件大小

最终效果

• 图片圆角设置 我们可以设置BoxDecoration来进行包裹

 BoxDecoration(
  borderRadius: BorderRadius.circular(14),
  image: DecorationImage(image: AssetImage('images/微信表情.png'),fit: BoxFit.cover)

),

borderRadius 圆角，fit: BoxFit.cover 剪裁。

3. 照相机

Container(
  // color: Colors.red,  Top Margin 40
  margin: EdgeInsets.only(top: 40, right: 15),
  height: 25,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      Image(image: AssetImage('images/相机.png')),
    ],
  ),

这里主要为了让他固定在右上角，所以我们需要使用Row包裹一层这样可以固定位置，当然我们也可以使用Positioned

Positioned(
    top: 40,
    right: 15,
    child: Image.asset('images/相机.png',height: 25,)),

• removePadding 主要是 移除上下安全区域

factory MediaQuery.removePadding({
  Key? key,
  required BuildContext context,
  bool removeLeft = false,
  bool removeTop = false,
  bool removeRight = false,
  bool removeBottom = false,
  required Widget child,
})

我们移除上面的安全区域

直接到达顶部了

我们调整下头部的高度距离

效果: