Flutter入门（六）微信项目---发现页

微信发现页

今天我们先来完成这样一个简单的页面

首先这里要讲下Flutter的布局， 在Flutter的世界里更多的是弹性盒子布局

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

如果大家不是太理解，可以参考下：Flutter Flex布局

好，废话不多说，我们开始今天的发现页的实现

发现页的实现

import 'package:flutter/material.dart';
import 'package:wechat/Pages/Discover/discover_cell.dart';

import '../const.dart';

class DiscoverPage extends StatelessWidget {
  const DiscoverPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text('发现', style: TextStyle(color: Colors.black)),
          backgroundColor: themeColor,
          elevation: 0.0,
        ),
        body: Container(
          color: themeColor,
          child: ListView(
            children: [
              DiscoverCell(imageName: 'images/icon_friend_circle.png', title: '朋友圈'),
              const SizedBox(height: 10),
              DiscoverCell(imageName: 'images/icon_scanning_blue.png', title: '扫一扫'),
              Container(
                height: 0.5,
                child: Row(
                  children: [
                    Container(
                      color: Colors.white,
                      width: 50,
                    ),
                    Container(
                      color: themeColor,
                    )
                  ],
                ),
              ),
              DiscoverCell(imageName: 'images/icon_shake.png', title: '摇一摇'),
              const SizedBox(height: 10),
              DiscoverCell(imageName: 'images/icon_look.png', title: '看一看'),
              Container(
                height: 0.5,
                child: Row(
                  children: [
                    Container(
                      color: Colors.white,
                      width: 50,
                    ),
                    Container(
                      color: themeColor,
                    )
                  ],
                ),
              ),
              DiscoverCell(imageName: 'images/icon_search.png', title: '搜一搜'),
              const SizedBox(height: 10),
              DiscoverCell(imageName: 'images/icon_people_nearby.png', title: '附近的人'),
              const SizedBox(height: 10),
              DiscoverCell(imageName: 'images/icon_shopping.png', title: '购物', subTitle: '618限时特价',smallPointName: 'images/icon_badge.png',),
              Container(
                height: 0.5,
                child: Row(
                  children: [
                    Container(
                      color: Colors.white,
                      width: 50,
                    ),
                    Container(
                      color: themeColor,
                    )
                  ],
                ),
              ),
              DiscoverCell(imageName: 'images/icon_game.png', title: '游戏'),
              const SizedBox(height: 10),
              DiscoverCell(imageName: 'images/icon_applets.png', title: '小程序'),
            ],
          ),
        )
      ),
    );
  }
}

• 和iOS类似我们把每一行的cell抽取出来了DiscoverCell
• themeColor是我们放在通用类const的通用主题色设置
• 这个页面我们采用ListView显示

发现页DiscoverCell的实现

import 'package:flutter/material.dart';
import 'package:wechat/Pages/Discover/discover_detail.dart';
import 'package:wechat/Pages/const.dart';

class DiscoverCell extends StatefulWidget {
  final String imageName;
  final String title;
  final String? subTitle;
  final String? smallPointName;

  const DiscoverCell({Key? key, required this.imageName, required this.title, this.subTitle, this.smallPointName}) : super(key: key);

  @override
  _DiscoverCellState createState() => _DiscoverCellState();
}

class _DiscoverCellState extends State<DiscoverCell> {
  Color _cellColor = Colors.white;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        Navigator.of(context).push(
            MaterialPageRoute(builder: (BuildContext context)
            => DiscoverDetail(title: widget.title,)
            ));
        _cellColor = Colors.white;
        setState(() {});
      },
      onTapCancel: (){
        _cellColor = Colors.white;
        setState(() {});
      },
      onTapDown: (TapDownDetails details){
        _cellColor = themeColor;
        setState(() {});
      },
      child: Container(
        color: _cellColor,
        height: 54.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            //left
            Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  Image(image: AssetImage(widget.imageName), height: 25),
                  const SizedBox(width: 15),
                  Text(widget.title),
                ],
              ),
            ),
            //right
            Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  Text(widget.subTitle ?? '', style: TextStyle(color: Colors.grey)),
                  widget.smallPointName != null ? Image(image: AssetImage(widget.smallPointName!), width: 15,) : Container(),
                  const Image(image: AssetImage('images/icon_right.png'), width: 20),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

• 由于cell需要由与用户交互的能力这里我们使用GestureDetector
• Navigator.of(context).push界面跳转
• DiscoverDetail设置的通用的二级页面
• onTap,onTapCancel,onTapDown通过这几个手势设置用户点击效果，效果与iOS一致
• setState还是我们非常熟悉的状态管理
• Row Flex中的横向布局方式

下一篇: 微信项目我页面开发