用 Flutter 仿写微信“发现 + 我”的页面

↓推荐关注↓

发现页面实现

bbf60b1b8c91f1a8cb6ed0572be92e01.png

这里我们仿照微信的发现页面用 Flutter 类实现这页面的简单布局及每个 cell 的点击效果及点击每条 cell 之后跳转到一个新的页面。这里我们分几步分别来实现这些功能。

自定义 cell

8c892e99e0f3476cb19d9a895924c55a.png

针对 cell 的布局我们可以分为两部分,左边跟右边,左边是主图片加标题,右边是子标题、 子图片加箭头。主图片名称、主标题、子标题、子图片名称这些都可以由于 cell 初始化的时候由外部传进来。这里主图片、标题跟箭头是固定的每个 cell 都有的,子标题、 子图片是可选的。针对 cell 布局的代码如下。

String title;
  String imageName;
  String subTitle;
  String subImageName;
  DiscoverCell(this.title, this.imageName, this.subTitle, this.subImageName);
Container(
        color: _currentColor,
        height: 55,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            // left
            Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  // 图标
                  Image(image: AssetImage(widget.imageName), width: 20,),
                  // 间隙
                  SizedBox(width: 15,),
                  // Title
                  Text(widget.title),
                ],
              ),
            ),
            // right
            Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  // subTitle
                  widget.subTitle != null ? Text(widget.subTitle) : Text(''),
                  // subImage
                  widget.subImageName.length > 0 ? Image.asset(widget.subImageName, width: 15,) : Container(),
                  // 箭头
                  Image(image: AssetImage('images/icon_right.png'), width: 15,)
                ],
              ),
            ),
          ],
        ),
      )

列表布局

class _DiscoverPageState extends State<DiscoverPage> {
  Color _themColor = Color.fromRGBO(230, 230, 230, 1.0);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: _themColor,
        // 安卓里面用到,切 app 的时候显示
        centerTitle: true,
        title: Text('发现'),
        elevation: 0.0,
      ),
      body: Container(
        height: 800,
        color: _themColor,
        child: ListView(
          children: [
            DiscoverCell('朋友圈', 'images/朋友圈.png', '', ''),
            SizedBox(height: 10,),
            DiscoverCell('扫一扫', 'images/扫一扫2.png', '', ''),
            //分割线
            Row(
              children: [
                // 左边线条
                Container(width: 50, height: 0.5, color: Colors.white,),
                // 右边线条
                Container(height: 0.5, color: Colors.grey,)
              ],
            ),
            DiscoverCell('摇一摇', 'images/摇一摇.png', '', ''),
            SizedBox(height: 10,),
            DiscoverCell('看一看', 'images/看一看icon.png', '', ''),
            //分割线
            Row(
              children: [
                // 左边线条
                Container(width: 50, height: 0.5, color: Colors.white,),
                // 右边线条
                Container(height: 0.5, color: Colors.grey,)
              ],
            ),
            DiscoverCell('搜一搜', 'images/搜一搜.png', '', ''),
            SizedBox(height: 10,),
            DiscoverCell('附近的人', 'images/附近的人icon.png', '', ''),
            SizedBox(height: 10,),
            DiscoverCell('购物', 'images/购物.png', '双十一限时特价', 'images/badge.png'),
            Row(
              children: [
                // 左边线条
                Container(width: 50, height: 0.5, color: Colors.white,),
                // 右边线条
                Container(height: 0.5, color: Colors.grey,)
              ],
            ),
            DiscoverCell('游戏', 'images/游戏.png', '', ''),
            SizedBox(height: 10,),
            DiscoverCell('小程序', 'images/小程序.png', '', ''),
          ],
        ),
      )
    );
  }
}

针对列表的布局我们用的是 ListView,在 children 里面按顺序添加每条 cell 数据,这里每组之间的间隔我们用 SizedBoxcell 上的下划线我们用 Row 来实现,分为左边线条跟右边线条。

cell 点击跳转

04bcddba27c13cd5552804c38f350f2c.png
return GestureDetector(
      // cell 手势点击
      onTap: (){
        Navigator.of(context).push(
            MaterialPageRoute(builder:
                (BuildContext context) => DiscoverChildPage(widget.title)
            )
        );

这里我们定义一个新的页面 DiscoverChildPage 标题由 cell 点击的时候传入。在 cell 中我们添加点击方法,然后 push 到一个新的页面。

cell 添加点击状态

GestureDetector(
      // cell 手势点击
      onTap: (){
        Navigator.of(context).push(
            MaterialPageRoute(builder:
                (BuildContext context) => DiscoverChildPage(widget.title)
            )
        );
        setState(() {
          _currentColor = Colors.white;
        });
      },
      // cell 手势点击下去
      onTapDown: (TapDownDetails details){
        setState(() {
          _currentColor = Colors.grey;
        });
      },
      // cell 手势点击取消
      onTapCancel: (){
        setState(() {
          _currentColor = Colors.white;
        });
      },
      child: Container(
        color: _currentColor,
      ),
    );

cell 加上点击状态的话就需要继承于有状态的 Widget,然后在不同的点击状态下设置不同的颜色,然后调用 setState 方法。因为调用 setState 方法的时候会重新构建 widget,所以针对复杂的控件的时候我们只让需要改变状态的子控件继承于 StatefulWidget,把需要改变的部分抽取出来。我们这里因为 cell 整体的子控件也不多,所以我们就直接让 cell 继承于 StatefulWidget 。也是为了偷下懒🐶。

我的页面实现

f060f01b827eabebd226f40c9bdd0efd.png

我的页面首先我们可以分为两大块,列表跟相机,这里我们采用 Stack 部件来布局。其中列表部分又可以分为两大块头部跟底部 cell 部分。按照这种布局思路我们的代码如下。

class _MinePageState extends State<MinePage> {
  Widget headerWidget() {
    return Container(
      height: 200,
      color: Colors.white,
      child: Container(
        margin: EdgeInsets.only(top: 90, bottom: 20, left: 16, right: 10),
        child: Row(
          children: [
            // 头像
            Container(
              width: 70,
              height: 70,
              // 设置圆角属性
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                image: DecorationImage(
                    image: AssetImage('images/ChenXi.JPG')
                )
              ),
            ),
            // 右边部分
            Expanded(child: Container(
              padding: EdgeInsets.only(left: 10, top: 8, right: 10),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 昵称
                  Container(
                    height: 35,
                    child: Text('Chenxi', style: TextStyle(fontSize: 25, color: Colors.black87),)
                  ),
                  // 微信号加箭头
                  Container(
                    height: 35,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('微信号:CX123', style: TextStyle(fontSize: 17, color: Colors.grey),),
                        Image(image: AssetImage('images/icon_right.png'), width: 15,)
                      ],
                    ),
                  ),
                ],
              ),
            )),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Color.fromRGBO(230, 230, 230, 1.0),
        child: Stack(
          children: [
            // 列表
            Container(
              child: MediaQuery.removePadding(
                  removeTop: true,
                  context: context,
                  child: ListView(
                children: [
                  // 头部
                  headerWidget(),

                  // 列表
                  SizedBox(height: 10,),
                  DiscoverCell('支付', 'images/微信 支付.png', '', ''),
                  SizedBox(height: 10,),
                  DiscoverCell('收藏', 'images/微信收藏.png', '', ''),
                  //分割线
                  Row(
                    children: [
                      // 左边线条
                      Container(width: 50, height: 0.5, color: Colors.white,),
                      // 右边线条
                      Container(height: 0.5, color: Colors.grey,)
                    ],
                  ),
                  DiscoverCell('朋友圈', 'images/微信相册.png', '', ''),
                  //分割线
                  Row(
                    children: [
                      // 左边线条
                      Container(width: 50, height: 0.5, color: Colors.white,),
                      // 右边线条
                      Container(height: 0.5, color: Colors.grey,)
                    ],
                  ),
                  DiscoverCell('卡包', 'images/微信卡包.png', '', ''),
                  //分割线
                  Row(
                    children: [
                      // 左边线条
                      Container(width: 50, height: 0.5, color: Colors.white,),
                      // 右边线条
                      Container(height: 0.5, color: Colors.grey,)
                    ],
                  ),
                  DiscoverCell('表情', 'images/微信表情.png', '', ''),
                  SizedBox(height: 10,),
                  DiscoverCell('设置', 'images/微信设置.png', '', ''),
                ],
              )
              ),
            ),
            // 相机
            Container(
              margin: EdgeInsets.only(right: 10, top: 25),
              height: 25,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Image(image: AssetImage('images/相机.png')),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

总结:其实实现这些布局的方式有很多,如果需要评定哪种布局方式更好的话,我们遵循页面复杂度最低的布局方式总归是没有错的。

作者:晨曦_iOS

https://juejin.cn/post/7031467075663036452

- EOF -


1. 回复“m”可以查看历史记录;

2. 回复“h”或者“帮助”,查看帮助;

   开发者已开通多个技术群交流学习,请加若飞微信:1321113940  (暗号k)进开发群学习交流

  说明:我们都是开发者。视频或文章来源于网络,如涉及版权或有误,请您与若飞(1321113940)联系,将在第一时间删除或者修改,谢谢!

eca31950f95e11ef281c2486695bd649.png

开 发 者 : KaiFaX

面向全栈工程师的开发者
专注于前端、Java/Python/Go/PHP的技术社区

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值