在上篇文章中已经开启了Flutter的微信实战项目,那么今天就继续来写微信实战项目,我的
界面的搭建!
上次搭建了微信的基础框架,今天把 4
个页面的切换也搭建出来,今天着重写我的
界面。
chat_page:微信聊天页面friends_page:通讯录页面discover_page:发现页面mine_page:我的界面要实现上面动图的效果,我们先建立 4 个界面。
导入上面建立的四个界面到根视图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
来实现,大体分为上下两部分。
头部也可以分为左右和上下来分解,左边是头像,右边是昵称、微信号、箭头部分,右边又是上下结构的,由此可以得到如下结构图。
头部整体可以使用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. 写在后面关注我,更多内容持续输出
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】基本框架搭建
🌹 喜欢就点个赞吧👍🌹
🌹 觉得有收获的,可以来一波 收藏+关注,以免你下次找不到我😁🌹
🌹欢迎大家留言交流,批评指正,
转发
请注明出处,谢谢支持!🌹
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)