Flutter项目(1)之搭建微信发现界面及点击跳转
1. 发现界面的构成
发现页面的构成比较简单,是一个简单的ListView构成,所以需要创建一个ListView以及封装一个ListViewCell;
效果如下:
发现页面效果图
1.1 ListViewCell的封装
- 创建一个discover_cell.dart文件,这个cell是一个有状态的控件,在点击的时候背景颜色会变黑;
import 'package:flutter/material.dart';
import 'package:flutter_wechat/pages/sub_discover_page.dart';
class DisCover_Cell extends StatefulWidget {
final String title;
final String subTitle;
final String imageName;
final String subImagename;
const DisCover_Cell({
Key key,
@required this.title,
@required this.imageName,
this.subTitle,
this.subImagename,
}) : assert(title != null, 'title 不能为空'),
assert(imageName != null, 'imageName 不能为空');
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _DisCover_CellState();
}
}
class _DisCover_CellState extends State<DisCover_Cell>{
Color _StateBackColor = Colors.white;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
Navigator.of(context).push(
MaterialPageRoute(builder: (BuildContext context){
return SubDiscover_Page(title: widget.title,);
})
);
setState(() {
_StateBackColor = Colors.white;
});
},
onTapDown: (TapDownDetails details){
setState(() {
_StateBackColor = Colors.grey[100];
});
},
onTapCancel: (){
print('onTapCance----');
setState(() {
_StateBackColor = Colors.white;
});
},
child: Container(
padding: EdgeInsets.all(10),
color: _StateBackColor,
height: 54,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Image(width: 20, height: 20, image: AssetImage(widget.imageName)),
SizedBox(
width: 15,
),
Text(widget.title),
],
),
Row(
children: <Widget>[
Text(widget.subTitle != null ? widget.subTitle : ''),
SizedBox(
width: 15,
),
widget.subImagename != null
? Image(width: 15, image: AssetImage(widget.subImagename))
: Container(),
SizedBox(width: 15),
Image(width: 20, image: AssetImage('images/icon_right.png')),
],
),
],
),
),
);
}
}
代码注意点:
- 先敲出需要传入的参数属性,然后按住option + enter,会自动创建出构造函数;
- 构造函数中的必传参数使用 @required 修饰;
- 使用 assert可以实现在传入的参数为空时报出错误;
- 有状态的创建manager使用createState函数创建;
- _DisCover_CellState是继承于一个泛型的State;
- 添加点击使用的是 GestureDetector 将Container或者Widget包装起来;
- onTap: 点击时的回调,需要调用setState(() {}刷新;
- onTapDown: 按下时的回调,需要传参数TapDownDetails,这时候将颜色改成灰色并刷新;
- onTapCancel: 手势取消调用,比如点击后继续滑动到其他地方,这时候不需要跳转,但颜色需要改回白色,需要调用setState(() {}刷新;
- 使用Navigator进行界面的跳转,没有参数的话直接调用push()方法;
- 固定用法:使用MaterialPageRoute创建回调;
布局注意点:
- 主体使用个Container,然后使用Row布局;
- 单个的cell可以分为5个控件,Image,title,subtitle,subImage,箭头;
- 可以使用两个Row对这5个控件进行布局:
- 左Row:一个Image,一个间距SizedBox,一个title
- 右Row:
- 判断是否有副标题,有就创建副标题;
- 判断是否有子图片,有就创建子图片;
- 箭头图片;
1.2 的封装发现界面ListView的实现
import 'package:flutter/material.dart';
import 'package:flutter_wechat/pages/discover_cell.dart';
class FindPage extends StatefulWidget {
@override
_FindPageState createState() => _FindPageState();
}
class _FindPageState extends State<FindPage> {
Color _themeColor = Color.fromRGBO(220, 220, 220, 1);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: _themeColor,
title: Text('发现'),
elevation: 0.0, //导航栏阴影
),
body: Container(
color: _themeColor,
child: ListView(
children: <Widget>[
DisCover_Cell(
title: '朋友圈',
imageName: 'images/朋友圈.png',
),
Container(
height: 10,
), //灰色分组
DisCover_Cell(
title: '扫一扫',
imageName: 'images/扫一扫2.png',
),
Row(
children: <Widget>[
Container(
height: 0.5,
width: 50,
color: Colors.white,
),
Container(
height: 0.5,
color: Colors.grey,
)
],
), //分割线
DisCover_Cell(
title: '摇一摇',
imageName: 'images/摇一摇.png',
),
Container(
height: 10,
), //灰色分组
DisCover_Cell(
title: '看一看',
imageName: 'images/看一看icon.png',
),
Row(
children: <Widget>[
Container(
height: 0.5,
width: 50,
color: Colors.white,
),
Container(
height: 0.5,
color: Colors.grey,
)
],
), //分割线
DisCover_Cell(
title: '搜一搜',
imageName: 'images/搜一搜2.png',
),
Container(
height: 10,
), //灰色分组
DisCover_Cell(
title: '购物',
imageName: 'images/购物.png',
subTitle: '618限时特惠',
subImagename: 'images/badge.png',
),
Row(
children: <Widget>[
Container(
height: 0.5,
width: 50,
color: Colors.white,
),
Container(
height: 0.5,
color: Colors.grey,
)
],
), //分割线
DisCover_Cell(
title: '游戏',
imageName: 'images/游戏.png',
),
Container(
height: 10,
), //灰色分组
DisCover_Cell(
title: '小程序',
imageName: 'images/小程序.png',
),
],
),
),
);
}
}
注意点:
- 修改整体的背景色为灰色;
- 去除导航栏阴影,将属性值 elevation 设置为0.0;
- 分组灰色使用Container;
- 分割线使用一个Row,放入两个Container,高度都为0.5,灰色的Container不需要给宽度;
总结: 一个简单的UI界面搭建有很多实现方式,只要能实现就行,但是在实际编写代码的时候发现有很多细节需要注意,万丈高楼平地起,加油加油!
