【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】基本框架搭建

喜欢就点个赞吧

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

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

你可能感兴趣的:(【Flutter】微信项目实战【02】我的界面搭建(上))