Flutter项目(1)之搭建微信发现界面及点击跳转

1. 发现界面的构成

发现页面的构成比较简单,是一个简单的ListView构成,所以需要创建一个ListView以及封装一个ListViewCell;
效果如下:
发现页面效果图

1.1 ListViewCell的封装

创建一个discover_cell.dart文件,这个cell是一个有状态的控件,在点击的时候背景颜色会变黑;

import 'package:flutter/material.dart';
import 'package:flutter_wechat/pages/sub_discover_page.dart';

class DisCover_Cell extends StatefulWidget {
  final String title;
  final String subTitle;
  final String imageName;
  final String subImagename;

  const DisCover_Cell({
    Key key,
    @required this.title,
    @required this.imageName,
    this.subTitle,
    this.subImagename,
  })  : assert(title != null, 'title 不能为空'),
        assert(imageName != null, 'imageName 不能为空');

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _DisCover_CellState();
  }

}

class _DisCover_CellState extends State<DisCover_Cell>{

  Color _StateBackColor = Colors.white;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        Navigator.of(context).push(
            MaterialPageRoute(builder: (BuildContext context){
              return SubDiscover_Page(title: widget.title,);
            })
        );
        setState(() {
          _StateBackColor = Colors.white;
        });
      },
      onTapDown: (TapDownDetails details){
        setState(() {
          _StateBackColor = Colors.grey[100];
        });
      },
      onTapCancel: (){
        print('onTapCance----');
        setState(() {
          _StateBackColor = Colors.white;
        });
      },
      child: Container(
        padding: EdgeInsets.all(10),
        color: _StateBackColor,
        height: 54,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Row(
              children: <Widget>[
                Image(width: 20, height: 20, image: AssetImage(widget.imageName)),
                SizedBox(
                  width: 15,
                ),
                Text(widget.title),
              ],
            ),
            Row(
              children: <Widget>[
                Text(widget.subTitle != null ? widget.subTitle : ''),
                SizedBox(
                  width: 15,
                ),
                widget.subImagename != null
                    ? Image(width: 15, image: AssetImage(widget.subImagename))
                    : Container(),
                SizedBox(width: 15),
                Image(width: 20, image: AssetImage('images/icon_right.png')),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

代码注意点:

先敲出需要传入的参数属性,然后按住option + enter,会自动创建出构造函数;
构造函数中的必传参数使用 @required 修饰;
使用 assert可以实现在传入的参数为空时报出错误;
有状态的创建manager使用createState函数创建;
_DisCover_CellState是继承于一个泛型的State;
添加点击使用的是 GestureDetector 将Container或者Widget包装起来;
- onTap: 点击时的回调,需要调用setState(() {}刷新;
- onTapDown: 按下时的回调,需要传参数TapDownDetails,这时候将颜色改成灰色并刷新;
- onTapCancel: 手势取消调用,比如点击后继续滑动到其他地方,这时候不需要跳转,但颜色需要改回白色,需要调用setState(() {}刷新;
使用Navigator进行界面的跳转,没有参数的话直接调用push()方法;
- 固定用法:使用MaterialPageRoute创建回调;

布局注意点:

主体使用个Container,然后使用Row布局;
单个的cell可以分为5个控件,Image,title,subtitle,subImage,箭头;
可以使用两个Row对这5个控件进行布局:
- 左Row:一个Image,一个间距SizedBox,一个title
- 右Row:
  - 判断是否有副标题,有就创建副标题;
  - 判断是否有子图片,有就创建子图片;
  - 箭头图片;

1.2 的封装发现界面ListView的实现

import 'package:flutter/material.dart';
import 'package:flutter_wechat/pages/discover_cell.dart';

class FindPage extends StatefulWidget {
  @override
  _FindPageState createState() => _FindPageState();
}

class _FindPageState extends State<FindPage> {
  Color _themeColor = Color.fromRGBO(220, 220, 220, 1);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: _themeColor,
        title: Text('发现'),
        elevation: 0.0, //导航栏阴影
      ),
      body: Container(
        color: _themeColor,
        child: ListView(
          children: <Widget>[
            DisCover_Cell(
              title: '朋友圈',
              imageName: 'images/朋友圈.png',
            ),
            Container(
              height: 10,
            ), //灰色分组
            DisCover_Cell(
              title: '扫一扫',
              imageName: 'images/扫一扫2.png',
            ),
            Row(
              children: <Widget>[
                Container(
                  height: 0.5,
                  width: 50,
                  color: Colors.white,
                ),
                Container(
                  height: 0.5,
                  color: Colors.grey,
                )
              ],
            ), //分割线
            DisCover_Cell(
              title: '摇一摇',
              imageName: 'images/摇一摇.png',
            ),
            Container(
              height: 10,
            ), //灰色分组

            DisCover_Cell(
              title: '看一看',
              imageName: 'images/看一看icon.png',
            ),
            Row(
              children: <Widget>[
                Container(
                  height: 0.5,
                  width: 50,
                  color: Colors.white,
                ),
                Container(
                  height: 0.5,
                  color: Colors.grey,
                )
              ],
            ), //分割线

            DisCover_Cell(
              title: '搜一搜',
              imageName: 'images/搜一搜2.png',
            ),
            Container(
              height: 10,
            ), //灰色分组

            DisCover_Cell(
              title: '购物',
              imageName: 'images/购物.png',
              subTitle: '618限时特惠',
              subImagename: 'images/badge.png',
            ),
            Row(
              children: <Widget>[
                Container(
                  height: 0.5,
                  width: 50,
                  color: Colors.white,
                ),
                Container(
                  height: 0.5,
                  color: Colors.grey,
                )
              ],
            ), //分割线

            DisCover_Cell(
              title: '游戏',
              imageName: 'images/游戏.png',
            ),
            Container(
              height: 10,
            ), //灰色分组

            DisCover_Cell(
              title: '小程序',
              imageName: 'images/小程序.png',
            ),
          ],
        ),
      ),
    );
  }
}

注意点:

修改整体的背景色为灰色;
去除导航栏阴影,将属性值 elevation 设置为0.0;
分组灰色使用Container;
分割线使用一个Row,放入两个Container,高度都为0.5,灰色的Container不需要给宽度;

总结: 一个简单的UI界面搭建有很多实现方式,只要能实现就行,但是在实际编写代码的时候发现有很多细节需要注意,万丈高楼平地起,加油加油!

wyyrls

发布了8 篇原创文章 · 获赞 0 · 访问量 467

私信关注

Flutter项目(1)之搭建微信发现界面及点击跳转

1. 发现界面的构成

1.1 ListViewCell的封装

1.2 的封装发现界面ListView的实现

猜你喜欢