9、Flutter - 项目实战 - 仿微信（三）我的页面

Flutter - 项目实战 - 仿微信（三）我的页面

 

接上篇：8、Flutter - 项目实战 - 仿微信（二）发现页面

详细代码参见Demo

Demo地址 -> wechat_demo

 

其他相关联文章

7、Flutter - 项目实战 - 仿微信（一）BottomNavigationBar 4个主页面显示

8、Flutter - 项目实战 - 仿微信（二）发现页面

9、Flutter - 项目实战 - 仿微信（三）我的页面

10、Flutter - 项目实战 - 仿微信（四）数据准备

11、Flutter - 项目实战 - 仿微信（五）通讯录

12、Flutter - 项目实战 - 仿微信（六）聊天页面

 

效果：

点击右上角的照相机进行相册或拍照功能暂未实现，后面有时间的话在demo中补上。可以自行上网查阅资料实现该功能

 

我的页面，并不是很复杂。尤其是下面的几个cell，跟上篇发现页面很类似可以复用其cell，所以这里就不在细诉cell的创建。

 

1、代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:wechat/pages/discover/discover_cell.dart';

class MinePage extends StatefulWidget {
  @override
  _MinePageState createState() => _MinePageState();
}

class _MinePageState extends State<MinePage> {
  double _left_distance = 50;

  Widget headerWidget() {
    return Container(
      color: Colors.white,
      height: 205,
      child: Container(
//        color: Colors.yellow,
        margin: EdgeInsets.only(top: 100, bottom: 20),
        padding: EdgeInsets.all(10),
        child: Container(
          margin: EdgeInsets.only(left: 10),
//          padding: EdgeInsets.all(5),
//          color: Colors.red,
          child: Row(
            children: <Widget>[
              Container(
                width: 50,
                height: 50,
                //图片通过装饰器去设置圆角是不起作用的，应该设置在装饰器内的背景图
//                child: Image(image:AssetImage('images/新的朋友.png')),
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(10.0), //设置圆角，image没有这个属性
                  //fit 填充
                  image: DecorationImage(
                      image: AssetImage('images/新的朋友.png'), fit: BoxFit.cover),
                ),
              ), //头像
              Container(
                margin:
                    EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 5),
                width: MediaQuery.of(context).size.width - 95,
//                padding: EdgeInsets.only(left: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      child: Text(
                        'Liujilou',
                        style: TextStyle(fontSize: 20, color: Colors.black),
                      ), //昵称
                    ),
                    Container(
                        child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text(
                          '微信号:1234',
                          style: TextStyle(fontSize: 14, color: Colors.grey),
                        ),
                        Image(
                          image: AssetImage('images/icon_right.png'),
                          width: 15,
                        )
                      ],
                    )),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  } //头部抽出来写个方法

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            color: Color.fromRGBO(220, 220, 220, 1),
            child: MediaQuery.removePadding(
                removeTop: true, //移除屏幕顶部刘海
                context: context,
                child: ListView(
                  children: <Widget>[
                    headerWidget(), //头部
                    SizedBox(
                      height: 10,
                    ),
                    DiscoverCell(
                      imageName: 'images/微信 支付.png',
                      title: '支付',
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    DiscoverCell(
                      imageName: 'images/微信收藏.png',
                      title: '收藏',
                    ),
                    Row(
                      children: <Widget>[
                        Container(
                          width: _left_distance,
                          color: Colors.white,
                          height: 0.5,
                        ),
                        Container(
                          height: 0.5,
                        )
                      ],
                    ),
                    DiscoverCell(
                      imageName: 'images/微信相册.png',
                      title: '相册',
                    ),
                    Row(
                      children: <Widget>[
                        Container(
                          width: _left_distance,
                          color: Colors.white,
                          height: 0.5,
                        ),
                        Container(
                          height: 0.5,
                        )
                      ],
                    ),
                    DiscoverCell(
                      imageName: 'images/微信卡包.png',
                      title: '卡包',
                    ),
                    Row(
                      children: <Widget>[
                        Container(
                          width: _left_distance,
                          color: Colors.white,
                          height: 0.5,
                        ),
                        Container(
                          height: 0.5,
                        )
                      ],
                    ),
                    DiscoverCell(
                      imageName: 'images/微信表情.png',
                      title: '表情',
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    DiscoverCell(
                      imageName: 'images/微信设置.png',
                      title: '设置',
                    ),
                  ],
                )),
          ), //列表
          Container(
            height: 25,
            color: Color.fromRGBO(0, 0, 0, 0),
            margin: EdgeInsets.only(top: 40, right: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[Image(image: AssetImage('images/相机.png'))],
            ),
          ), //相机
        ],
      ),
    );
  }
}

这里重点说一下头像这一块和右上角的相机。

2、解释

2.1、移除顶部刘海，也就是状态栏那个地方

MediaQuery.removePadding();

布局约束，removeTop 移除屏幕顶部刘海，这样刘海部分的颜色就跟主题配置的颜色一致了（因为没有配置导航栏）。

 

2.1、右上角相机

不添加导航栏，直接添加一个Container添加一个横向布局Row，靠右显示，添加一个相机的图片即可

Container(
  height: 25,
  color: Color.fromRGBO(0, 0, 0, 0),
  margin: EdgeInsets.only(top: 40, right: 10),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[Image(image: AssetImage('images/相机.png'))],
  ),
), //相机

 

2.2、头像、名称等

这里先用一个横向布局，将头像和名称分成两个部分横向

然后名称这个地方再用一个纵向布局，将名称和微信号布局出来

2.2.1、头像

头像是带圆角的，这个地方要注意。本文用一个本地图片作为头像显示。

因为image没有圆角属性，所以应该加在装饰器 的背景图上

BoxDecoration 装饰器

参考自：

https://www.jianshu.com/p/c00d527e5f3b

https://www.jianshu.com/p/9012bc9e2feb

更多实现可自行上网查阅

//图片通过装饰器去设置圆角是不起作用的，应该设置在装饰器内的背景图
//child: Image(image:AssetImage('images/新的朋友.png')),
decoration: BoxDecoration(
  color: Colors.blue,
  borderRadius: BorderRadius.circular(10.0), //设置圆角，image没有这个属性
  //fit 填充
  image: DecorationImage(
      image: AssetImage('images/新的朋友.png'), fit: BoxFit.cover),
),

名称和微信号看代码即可不在过多说明。后面有时间了补充一下点击头像从相册选择或拍照功能

 

如上内容如有错误还望指正，共同进步