Flutter微信项目实战02我的界面搭建(上)
Posted 卡卡西Sensei
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter微信项目实战02我的界面搭建(上)相关的知识,希望对你有一定的参考价值。
1. 写在前面
在上篇文章中已经开启了Flutter的微信实战项目,那么今天就继续来写微信实战项目,我的
界面的搭建!
2. 今天要做什么
上次搭建了微信的基础框架,今天把 4
个页面的切换也搭建出来,今天着重写我的
界面。
要实现上面动图的效果,我们先建立 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';
- 具体的代码如下:
我们今天主要实现的界面是我的界面,效果如下图所示,那么改怎么实现呢?
我们先来实现上面的头部部分,下面是一个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
文件里面设置一下路径。如下图打开注释,设置文件夹:
打开注释,设置图片文件夹,注意要对齐代码,这里的 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. 写在后面
关注我,更多内容持续输出
【Flutter】基础组件【08】BottomNavigationBar
- [项目实战合集]
🌹 喜欢就点个赞吧👍🌹
🌹 觉得有收获的,可以来一波 收藏+关注,以免你下次找不到我😁🌹
🌹欢迎大家留言交流,批评指正,
转发
请注明出处,谢谢支持!🌹
以上是关于Flutter微信项目实战02我的界面搭建(上)的主要内容,如果未能解决你的问题,请参考以下文章