Flutter- 从入门到项目 07: 微信项目 - 发现页面

iOSer

关注

发布于: 2021 年 02 月 25 日

Flutter-从入门到项目 07: 微信项目-发现页面

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 项目地址欢迎大家点赞心心谢谢

资料推荐

如果你正在跳槽或者正准备跳槽不妨动动小手，添加一下咱们的交流群1012951431来获取一份详细的大厂面试资料为你的跳槽多添一份保障。

更多精彩分享

发布于: 2021 年 02 月 25 日阅读数: 9

iOSer

关注

微信搜索添加微信 mayday1739 进微信群哦 2020.09.12 加入

更多大厂面试资料进企鹅群931542608

发布

暂无评论

创作场景

Flutter- 从入门到项目 07: 微信项目 - 发现页面

Flutter-从入门到项目 07: 微信项目-发现页面

二: 微信项目发现页面

① 发现页面实现

② 发现页面抽取`KCDiscoverCell`

iOSer

评论