今天我们就来完成微信项目中的第二个页面我

微信我页面

首先我们来分析这个页面

• 整个页面是一个列表，右上角有一个相机按钮
• 相机按钮位置固定，不会随着列表滚动而改变位置

通过我们的分析，我们得出整个页面是一个层次布局，相机按钮与列表，那么我们可以使用Stack层次布局

微信我页面实现

import 'package:flutter/material.dart';
import 'package:wechat/Pages/Discover/discover_cell.dart';

import 'const.dart';

class MinePage extends StatefulWidget {
  const MinePage({Key? key}) : super(key: key);

  @override
  _MinePageState createState() => _MinePageState();
}

class _MinePageState extends State<MinePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: themeColor,
        child: Stack(
          children: [
            //列表
            Container(
              // color: Colors.yellow,
              child: MediaQuery.removePadding(
                removeTop: true,
                context: context,
                child: ListView(
                  children: [
                    //header
                    headerWidget(),
                    const SizedBox(height: 10),
                    DiscoverCell(imageName: 'images/icon_pay.png', title: '支付'),
                    const SizedBox(height: 10),
                    DiscoverCell(imageName: 'images/icon_collection.png', title: '收藏'),
                    Container(
                      height: 0.5,
                      child: Row(
                        children: [
                          Container(
                            width: 50,
                            color: Colors.white,
                          ),
                          Container(
                            color: themeColor,
                          )
                        ],
                      ),
                    ),
                    DiscoverCell(imageName: 'images/icon_album.png', title: '相册'),
                    Container(
                      height: 0.5,
                      child: Row(
                        children: [
                          Container(
                            width: 50,
                            color: Colors.white,
                          ),
                          Container(
                            color: themeColor,
                          )
                        ],
                      ),
                    ),
                    DiscoverCell(imageName: 'images/icon_card_bag.png', title: '卡包'),
                    Container(
                      height: 0.5,
                      child: Row(
                        children: [
                          Container(
                            width: 50,
                            color: Colors.white,
                          ),
                          Container(
                            color: themeColor,
                          )
                        ],
                      ),
                    ),
                    DiscoverCell(imageName: 'images/icon_expression.png', title: '表情'),
                    const SizedBox(height: 10),
                    DiscoverCell(imageName: 'images/icon_settings.png', title: '设置'),
                  ],
                ),
              )
            ),
            //相机
            Container(
              color: Color.fromRGBO(0, 0, 0, 0),
              margin: EdgeInsets.only(top: 44, right: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Image(image: AssetImage('images/icon_camera.png'),height: 25,)
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget headerWidget() {
    return Container(
      height: 200,
      color: Colors.white,
      child: Container(
        margin: EdgeInsets.only(top: 100, left: 10),
        child: Row(
          children: [
            //头像
            Container(
              height: 70,
              width: 70,
              decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(16),
                  image: const DecorationImage(image: AssetImage('images/avatar.png'), fit: BoxFit.cover)
              ),
            ),
            //昵称，微信号，箭头
            Expanded(
              child: Container(
                margin: EdgeInsets.only(left: 10, right: 10, top: 12),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    //昵称
                    Container(
                      height: 35,
                      child: Text('昵称', style: TextStyle(fontSize: 25)),
                    ),
                    //微信号，箭头
                    Container(
                      height: 35,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          //微信号
                          Container(
                            child: Text('微信号：12345'),
                          ),
                          //箭头
                          Container(
                            child: Image(
                              image: AssetImage('images/icon_right.png'),
                              width: 15,
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      )
    );
  }
}

• 采用层次布局Stack把列表和相机按钮区分开
• MediaQuery.removePadding,removeTop去掉状态栏的留白
• headerWidget列表得头部视图，由于根其他cell不一致故而抽取出来
• 由于这里和发现也的cell一直，那么还是沿用发现页的DiscoverCell
• margin: EdgeInsets.only(top: 100, left: 10),列表的头部距离顶部还有一定的留白
• BoxDecoration头像是有圆角，由它来设置
• Expanded上一层采用了Row布局，希望昵称，微信号，箭头能占满右边的空间

下一篇: 微信项目通讯录页面开发