Flutter实战-搭建微信项目（三）

「这是我参加11月更文应战的第3天，活动概况检查：2021最后一次更文应战」

页面简略分析

最终作用：

首先咱们观察下，我的页面 是一个没有AppBar，一起顶部是没有安全区域的。ListView的下部分跟之前做发现页面的逻辑是一样的，能够直接把代码复制过来，修正下图片名称和文字就能够了。一起这个页面还有一个悬停的摄像机，上下拖动不随着页面移动，所以能够运用Stack来布局，第一层是ListView,第二层是摄像机。

摄像机

整体的页面布局是这样的：

Positioned(
  top: 40,
  right: 10,
  child: Image(
    image: AssetImage('images/相机.png'),
    height: 25,
   ),
 )

removePadding

这儿来处理默认的顶部安全区域的问题，有一个MediaQuery.removePadding

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

这儿作用在Stack上面。

运转之后作用如下：

圆角图片

留意：这儿需求设置宽度和高度

Container(
   width: 70,
   height: 70,
   decoration: BoxDecoration(
       image: DecorationImage(image: AssetImage('images/游戏2.png')),
       borderRadius: BorderRadius.circular(10)),
)

Expanded

Row布局了头像之后，剩余的占满整个空间，这儿能够运用Expanded,Expanded的child能够运用Column布局,设置穿插轴的crossAxisAlignment，在Column的子部件中都设置了色彩便于调试

Expanded(
     child: Container(
	 padding: EdgeInsets.only(left: 10, top: 8, right: 10),
   child: Column(
     crossAxisAlignment: CrossAxisAlignment.start,
     children: [
       Container(
         color: Colors.yellow, // 设置色彩用于调试
         height: 35,
         child: Text(
           'hello,world',
           style: TextStyle(fontSize: 25, color: Colors.black),
         ),
       ),
       Container(
         color: Colors.red, // 设置色彩用于调试
         height: 35,
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
             Text(
               '你好，新世界',
               style: TextStyle(fontSize: 15, color: Colors.black),
             ),
             Image(
               image: AssetImage('images/icon_right.png'),
               width: 15,
             )
     			],
         ),
       )
    ],
   ),
 ))

运转到这儿说明大体思路没有问题，此时能够把调试色彩去掉，好了简略的我的页面设置完毕了~

完好代码能够直接到百度云盘这儿下载：