Flutter 专题目录汇总: 这个目录方便大家快速查询你要学习的内容!!!
二: 微信项目发现页面
这个页面涉及到的可能前面没有讲解 就是关于布局. 在Flutter的世界里更多的是弹性盒子布局
弹性布局允许子组件按照一定比例来分配父容器空间。弹性布局的概念在其它
UI系统中也都存在，如H5中的弹性盒子布局，Android中的FlexboxLayout等。Flutter中的弹性布局主要通过Flex和Expanded来配合实现。
如果大家对这个还不是很理解,可以参考一下 : Flutter之 Flex 布局
① 发现页面实现
有上面弹性盒子布局的基础 下面我们开始搭建页面吧
import 'package:flutter/material.dart';
import 'package:wecaht/pages/discover/kc_discover_cell.dart';
class KCDiscoverPage extends StatefulWidget {
@override
_KCDiscoverPageState createState() => _KCDiscoverPageState();
}
class _KCDiscoverPageState extends State<KCDiscoverPage> {
Color _themeColor = Color.fromRGBO(220, 220, 220, 1.0);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: _themeColor,
centerTitle: true,
elevation: 0.0,
title: Text('发现'),
),
body: Container(
color: _themeColor,
child: ListView(
children: <Widget>[
KCDiscoverCell(
imageName: 'images/朋友圈.png',
title: '朋友圈',
),
SizedBox(height: 10,),
KCDiscoverCell(
imageName: 'images/扫一扫.png',
title: '扫一扫',
),
..... 这里省略一下没有必要的代码, 如果大家想查看详细代码可以移步github:
github项目地址 : https://github.com/LGCooci/KCFlutter
- 把这一排的
cell抽取出来了KCDiscoverCell - 状态管理设置
_themeColor - 整个页面采用
ListView显示
② 发现页面抽取KCDiscoverCell
这种抽取共用 Cell的方式,想必你已不再迷茫,无论 iOS还是 Android 用的太多了!
class KCDiscoverCell extends StatefulWidget {
final String title;
final String subTitle;
final String imageName;
final String subImageName;
KCDiscoverCell({
this.title,
this.subTitle,
this.imageName,
this.subImageName
});
@override
_KCDiscoverCellState createState() => _KCDiscoverCellState();
}
class _KCDiscoverCellState extends State<KCDiscoverCell> {
Color _currentColor = Colors.white;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
Navigator.of(context).push(
MaterialPageRoute(builder: (BuildContext context) =>
KCDiscoverChildPage(tittle: widget.title,)));
setState(() {
_currentColor = Colors.white;
});
},
onTapDown: (TapDownDetails details){ },
onTapCancel: (){},
child: Container(
color: _currentColor,
height: 54,
child: Row(
// 两端排列
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
//left
Container()
// right
Container()
]
- 公共方法点击进入子页面
KCDiscoverChildPage -
GestureDetector给我们的Cell添加用户交互能力 -
onTapCancel、onTapDown、onTap通过这几个手势设置用户点击效果 -
setState还是我们非常熟悉的状态管理 -
Navigator.of(context).push界面跳转
详情代码移步 Github 项目地址 欢迎大家点赞心心 谢谢
