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

Flutter 专题目录汇总: 逻辑-Flutter专栏-它来咯！！！ 逻辑-Flutter专栏- 你环境配置好了? Flutter-从入门到项目 03: Flutter初体验 Flutter-从入门到项目 04:Dart语法快速掌握(上) Flutter-从入门到项目 05:Dart语法快速掌握(下) Flutter-从入门到项目 06: 微信项目搭建

二: 微信项目发现页面

这个页面涉及到的可能前面没有讲解 就是关于布局. 在Flutter的世界里更多的是弹性盒子布局

弹性布局允许子组件按照一定比例来分配父容器空间。弹性布局的概念在其它UI系统中也都存在，如H5 中的弹性盒子布局，Android中的 FlexboxLayout 等。Flutter中的弹性布局主要通过 Flex 和 Expanded 来配合实现。

如果大家对这个还不是很理解,可以参考一下 : Flutter之Flex布局https://www.jianshu.com/p/9e69acb20ded

① 发现页面实现

有上面弹性盒子布局的基础 下面我们开始搭建页面吧

代码语言：javascript复制

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 用的太多了!

代码语言：javascript复制

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 项目地址 ：https://github.com/LGCooci/KCFlutter 欢迎大家点赞

谢谢

flutter ios 微信 dart android

0 人点赞