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

二: 微信项目发现页面

这个页面涉及到的可能前面没有讲解 就是关于布局. 在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 项目地址 欢迎大家点赞心心 谢谢