【Flutter】微信项目实战【02】我的界面搭建(上)

1. 写在前面

在上篇文章中已经开启了Flutter的微信实战项目，那么今天就继续来写微信实战项目，我的界面的搭建！

11flutter.jpeg

2. 今天要做什么

上次搭建了微信的基础框架，今天把 4个页面的切换也搭建出来，今天着重写我的界面。

切换 tabbar

要实现上面动图的效果，我们先建立 4 个界面。

新建页面

chat_page：微信聊天页面
friends_page：通讯录页面
discover_page：发现页面
mine_page：我的界面

导入上面建立的四个界面到根视图root_page里面，建立一个List存放 4 个Widget，在切换 item 的时候，获取List里面的对应的Widget就可以达到切换的效果了。

import 'package:flutter_wechat/chat_page.dart';
import 'package:flutter_wechat/discover_page.dart';
import 'package:flutter_wechat/friends_page.dart';
import 'package:flutter_wechat/mine_page.dart';

具体的代码如下：

设置 List

我们今天主要实现的界面是我的界面，效果如下图所示，那么改怎么实现呢？

我的界面

我们先来实现上面的头部部分，下面是一个ListView来实现，大体分为上下两部分。

大体分为上下部分

3. 实现头部

3.1 结构分析

头部也可以分为左右和上下来分解，左边是头像，右边是昵称、微信号、箭头部分，右边又是上下结构的，由此可以得到如下结构图。

我的页面头部结构

头部整体可以使用Container，左右的布局我们使用Row，上下布局使用Column，头像可以使用一个Container，右边的Container里面使用又是上下的Container，使用Container是可以设置背景颜色，方便我们看布局，相当于 OC 中的 View，是充当一个容器的作用。

主要代码结构

头像

Container(
                  width: 70,
                  height: 70,
                  decoration: BoxDecoration(
                    // color: Colors.blue,
                      borderRadius: BorderRadius.circular(10),
                      image: const DecorationImage(
                          image: AssetImage("images/avatar.jpeg"),
                          fit:BoxFit.cover
                      )
                  ),
                ),

3.2 头像设置圆角

头像设置圆角需要一个decoration(装饰器)，里面可以设置borderRadius和图片，我们图片是使用了AssetImage本地的路径图片。

使用AssetImage需要在本地的pubspec.yaml 文件里面设置一下路径。如下图打开注释，设置文件夹：

assets

打开注释，设置图片文件夹，注意要对齐代码，这里的 images 是我本地工程里面的文件夹，这是是设置路径，当然你可以设置你自己的文件路径。

设置图片路径

设置头像image: AssetImage("images/avatar.jpeg")，设置微信昵称和微信号代码如下：

Container(
                  width: screenWidth(context)-90,
                  padding: const EdgeInsets.only(left: 10,top: 8),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children:[
                      //昵称
                       Container(
                        height: 35,
                        child:  Text("RENO",style: TextStyle(fontSize: 25,color: Colors.grey),),
                      ),
                      //微信号
                      Container(
                        height: 35,
                        child:Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: const [
                            Text("微信号：12345",style: TextStyle(fontSize: 17,color: Colors.grey),),
                            Image(image: AssetImage("images/icon_right.png"),width: 15,)
                          ],
                        ) ,),
                    ],
                  ),

                )

3.3 获取屏幕宽高

screenWidth是屏幕宽度，可以自己定义一个全局的文件来使用，也可以单独获取也可以。

double screenWidth(BuildContext context){
  return MediaQuery.of(context).size.width;
}

以上这就是微信我的，头部部分的代码实现

下一篇实现列表，自定制 cell

GitHub项目地址

4. 写在后面

关注我，更多内容持续输出

CSDN
掘金
[基础组件合集]

【Flutter】基础组件【01】Text

【Flutter】基础组件【02】Container

【Flutter】基础组件【03】Scaffold

【Flutter】基础组件【04】Row/Column

【Flutter】基础组件【05】Icon

【Flutter】基础组件【06】Image

【Flutter】基础组件【07】Appbar

【Flutter】基础组件【08】BottomNavigationBar

【Flutter】基础组件【09】Button

[项目实战合集]

【Flutter】微信项目实战【01】基本框架搭建

喜欢就点个赞吧

觉得有收获的，可以来一波收藏+关注，以免你下次找不到我

欢迎大家留言交流，批评指正，转发请注明出处，谢谢支持！