第六章：Flutter之wechatDemo（我的页面）

前言：上一节， 为大家搭建了“发现”页面的大致，本节课为大家带来“我的页面”的构造

本节实现的效果图

16.png

分析：右上角的‘相机’按钮是悬浮着的，不随着下面的listview滑动而滑动，所以我们考虑用到‘Stack’重叠布局来实现

17.png

1.新增相机按钮

方法一：
Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
          children: [
            Container(//listView
              color: Colors.yellow,
            ),
            Container(//相机
              height: 25,
              color: Colors.red,
              margin: EdgeInsets.only(left: MediaQuery.of(context).size.width - 25 -10 ,top: 40),
              child: Image.asset('images/相机.png',),
            )
          ],
        ),
    );
  }
}
方法二：
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
          children: [
            Container(//listView
              color: Colors.yellow,
            ),
            Container(//相机
              height: 25,
              color: Colors.red,
              margin: EdgeInsets.only(right: 10 ,top: 40),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Image.asset('images/相机.png',),
                  ],)
            )
          ],),
    );
  }
}

run

18.png

2.创建listView(下面的cell复用上节课的“发现”cell)

Widget myListView(){
    return ListView(
        children: [
          Container(//头部视图
            color: Colors.white,
            height: 200,
          ),
          SizedBox(height: 5,),
          DiscoverCell(title: '支付',iconUrl: 'images/微信 支付.png',),
          SizedBox(height: 5,),
          DiscoverCell(title: '收藏',iconUrl: 'images/微信收藏.png',),
          Container(height: 0.5,color: Color.fromRGBO(220, 220, 220, 1), child: Row(children: [Container(width: 50,color: Colors.white,),],),),
          DiscoverCell(title: '朋友圈',iconUrl: 'images/微信相册.png',),
          Container(height: 0.5,color: Color.fromRGBO(220, 220, 220, 1), child: Row(children: [Container(width: 50,color: Colors.white,),],),),
          DiscoverCell(title: '卡包',iconUrl: 'images/微信卡包.png',),
          Container(height: 0.5,color: Color.fromRGBO(220, 220, 220, 1), child: Row(children: [Container(width: 50,color: Colors.white,),],),),
          DiscoverCell(title: '表情',iconUrl: 'images/微信表情.png',),
          SizedBox(height: 5,),
          DiscoverCell(title: '设置',iconUrl: 'images/微信设置.png',),
        ],
    );
  }

image.png

run：简单的mine页面

19.png

3.缩进上面的状态栏，

20.png

我们采用MediaQuery.removePadding(context : context,removeTop: true, child:ListView)

image.png

run:

21.png
.

4.构造头部视图

22.png

添加头像

 Widget HeaderView(){
    return Container(
      color: Colors.yellow,
      margin: EdgeInsets.only(top: 80,bottom: 20),
      child: Container(
        margin: EdgeInsets.all(10),
        color: Colors.red,
        child: Row(
          children: [
            Container(
              margin: EdgeInsets.all(10),
              child: Image.asset('images/ice.png'),
            )
          ],
        ),
      ),
    );
  }

23.png

go on

Widget HeaderView(){
    return Container(
      color: Colors.yellow,
      margin: EdgeInsets.only(top: 80,bottom: 20),
      child: Container(
        margin: EdgeInsets.all(10),
        color: Colors.red,
        child: Row(
          children: [
            Container(
              margin: EdgeInsets.all(10),
              child: Image.asset('images/ice.png'),
            ),
            Container(
              color: Colors.greenAccent,
              width: MediaQuery.of(context).size.width - 100,
              padding: EdgeInsets.only(left: 10,top: 10,bottom: 10),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('ice',style: TextStyle(fontSize: 22,color: Colors.black,fontWeight: FontWeight.bold),),
                  Container(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('微信号：slqsss',style: TextStyle(fontSize: 18,color: Colors.grey)),
                        Image.asset('images/icon_right.png',width: 15,height: 15,),
                      ],
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

run

24.png

ok，把测试用的颜色都去掉吧

6.补充

将一些常用到的变量，封装起来，以便于后面直接用，而不用写一大串代码

image.png

import 'package:flutter/material.dart';

//app的主题色
final Color wechatThemeColor = Color.fromRGBO(220, 220, 220, 1);

//获取屏幕宽度
double ScreenWidth(BuildContext context) => MediaQuery.of(context).size.width;
//获取屏幕高度
double ScreenHeight(BuildContext context) => MediaQuery.of(context).size.height;

总结：

本机课主要还是熟练掌握布局，大家在画界面前，先思考，如何画才最省力。

完结✿✿ヽ(°▽°)ノ✿