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

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

「这是我参与11月更文挑战的第8天,活动详情查看:2021最后一次更文挑战

📝【Flutter】学习养成记,【程序员必备技能】

📔【Flutter】微信项目实战!

1. 写在前面

上篇文章中已经开启了Flutter的微信实战项目,那么今天就继续来写微信实战项目!

  • 基础语法合集

【Flutter】Dart中的var、final 和 const基本使用

【Flutter】Dart数据类型之num

【Flutter】Dart数据类型之String

【Flutter】Dart的数据类型list&Map(数组和字典)

【Flutter】Dart的方法与箭头函数

【Flutter】Dart的方法中的可选参数、方法作为参数传递

【Flutter】Dart中的匿名函数、闭包

【Flutter】Dart中的类和对象

【Flutter】Dart中的构造函数

【Flutter】Dart的工厂构造方法&单例对象&初始化列表

【Flutter】Dart的类方法和对象操作符

【Flutter】Dart中的继承

【Flutter】Dart中的抽象类和接口

【Flutter】Dart中的Mixins混入你知道是什么吗?

  • [基础组件合集]

【Flutter】基础组件【01】Text

【Flutter】基础组件【02】Container

【Flutter】基础组件【03】Scaffold

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

【Flutter】基础组件【05】Image

【Flutter】基础组件【06】Icon

【Flutter】基础组件【07】Appbar

【Flutter】基础组件【08】BottomNavigationBar

【Flutter】基础组件【09】Button

  • [项目实战合集]

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

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:<Widget>[
                      //昵称
                       Container(
                        height: 35,
                        child:  Text("RENO",style: TextStyle(fontSize: 25,color: Colors.grey),),
                      ),
                      //微信号
                      Container(
                        height: 35,
                        child:Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: const <Widget>[
                            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. 写在后面

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

🌹 喜欢就点个赞吧👍🌹

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

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

分类:
iOS
标签:
收藏成功!
已添加到「」, 点击更改