页面简单分析

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

摄像机

整体的页面布局是这样的：
image.png

  1. Positioned(
  2.   top: 40,
  3.   right: 10,
  4.   child: Image(
  5.     image: AssetImage('images/相机.png'),
  6.     height: 25,
  7.    ),
  8.  )

image.png

removePadding

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

  1.   factory MediaQuery.removePadding({
  2.     Key? key,
  3.     required BuildContext context,
  4.     bool removeLeft = false,
  5.     bool removeTop = false,
  6.     bool removeRight = false,
  7.     bool removeBottom = false,
  8.     required Widget child, // 作用的Widget
  9.   })

这里作用在Stack上面。
image.png
运行之后效果如下：
image.png

圆角图片

注意：这里需要设置宽度和高度

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

image.png

Expanded

�Row布局了头像之后，剩下的占满整个空间，这里可以使用Expanded,Expanded的child可以使用Column布局,设置交叉轴的crossAxisAlignment，在Column的子部件中都设置了颜色便于调试

  1. Expanded(
  2.      child: Container(
  3.      padding: EdgeInsets.only(left: 10, top: 8, right: 10),
  4.    child: Column(
  5.      crossAxisAlignment: CrossAxisAlignment.start,
  6.      children: [
  7.        Container(
  8.          color: Colors.yellow, // 设置颜色用于调试
  9.          height: 35,
  10.          child: Text(
  11.            'hello,world',
  12.            style: TextStyle(fontSize: 25, color: Colors.black),
  13.          ),
  14.        ),
  15.        Container(
  16.          color: Colors.red, // 设置颜色用于调试
  17.          height: 35,
  18.          child: Row(
  19.            mainAxisAlignment: MainAxisAlignment.spaceBetween,
  20.            children: [
  21.              Text(
  22.                '你好，新世界',
  23.                style: TextStyle(fontSize: 15, color: Colors.black),
  24.              ),
  25.              Image(
  26.                image: AssetImage('images/icon_right.png'),
  27.                width: 15,
  28.              )
  29.                  ],
  30.          ),
  31.        )
  32.     ],
  33.    ),
  34.  ))

image.png�
运行到这里说明大体思路没有问题，此时可以把调试颜色去掉，好了简单的我的页面设置完毕了~
image.png