flutter实战项目,教你使用flutter打造仿微信app页面!(完善部分功能)

·  阅读 4644

flutter_wechat

源码地址:github.com/ding-zou/fl…

🔥A flutter app which clones wechat! 这是一个仿照微信样式基于flutter实现的app,还在继续完善中,欢迎提意见

包含了flutter中基本所有的组件,适合以此项目进行flutter学习。

页面展示

主要功能实现QA

1. 通讯录页右侧字母表

Q:如何实现列表滚动而字母表不滚动

A:因为通讯录列表是可以滚动的,所以我们想到使用Stack来把字符表放在固定位置而不会因为ListView滑动而滑动。

Q:如何控制字母表滚到对应位置触发外部轮廓圆?

A:首先我们使用的是BoxDecoration实现的外部轮廓,然后我们需要一个标志来控制其轮廓的显示,其实我们通过控制轮廓的颜色就好了,我们定义了一个颜色,滚动到时通过setState来改变颜色,就可以实现滚动是变化。

Q:如何确定对应字母的对应ListView的位置?

A:我们知道构建每一个ListTile时它的高度都是一样的,我们就可以通过计算来得到每个字母在ListView中的位置。我们模拟接收到数据,我们用一个map保存对应字母对应所在的位置,比如字母a所在为110,然后a有10个通讯录Item,那么b的位置就是a的位置加上10*每个Item的高度。此外我们每个字母还有一行显示,所以我们还要加上这行的高度。

2. 搜索栏

Q:怎么通过TextField实现自定义搜索栏?

A:我们通过设置TextField的装饰属性decoration,传入一个InputDecoration控件,里面我们可以设置很多属性来自定义显示。还不能满足你的情况的话可以自己在外层进行包装。

decoration: InputDecoration(
  icon: Container(
    padding: EdgeInsets.only(left: 10),
    child: Icon(Icons.search,
                size: 23, color: Colors.grey[400])),
  contentPadding: EdgeInsets.fromLTRB(0, 0, 0, 13),
  border: InputBorder.none,
  hintText: widget.hint,
  hintStyle: TextStyle(
    fontSize: 15,
  )),
复制代码

3.主页右上角点击按钮弹窗

Q:如何实现这样的弹窗?

A:我们可以通过官方提供的PopupMenuButton来实现,可以通过以下这种方式构建

PopupMenuButton(
  offset: Offset(0,70),
  color: Color(0xff4c4c4c),
  itemBuilder: (BuildContext context) {
    return <PopupMenuItem<int>>[
      /// 设置你的弹窗Item数组
      PopupMenuItem(
        child: _popupItem(0xe69e,0),
        value: 0,
      ),
    ];
  },
  /// 设置按钮的Icon 是一个Widget类型的
  icon: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(10),
      border: Border.fromBorderSide(BorderSide(
        color: Colors.black87,
        style: BorderStyle.solid))),
    child: Icon(
      Icons.add,
      size: 19,
      color: Colors.black87,
    ),
  ))
复制代码

Q:如何设置弹窗出现的位置?它遮住了其他控件怎么办?

A:我们可以通过它的offset属性传入一个Offset偏移量就好了

4.图片红点以及导航栏红点

Q:怎么实现红点显示在图片上?

A:我们可以通过万能的Stack来实现,我们可以用Container包裹,设置一个较大的宽和高,然后里面放上图片,再通过Positioned把小红点放在右上角

参见下面实现方式:

Container(
  height: 43,
  width: 43,
  child: Stack(children: <Widget>[
    Positioned(
      left: 0,
      bottom: 0,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(4),
        child: Image.network(
          imgUrl 
          fit: BoxFit.cover,
          height: 40,
          width: 40,
        ))),
    Positioned(
      right: 0,
      top: 0,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(4),
          border: Border.fromBorderSide(
            BorderSide(width: 1, color: Colors.red[600]))),
        child: Container(
          color: Colors.red[600],
          height: 6,
          width: 6,
        ),
      ),
    )
  ]),
)
复制代码

Q:flutter提供的*BottomNavigationBar*怎么实现红点?

A:你可以使用BottomNavigationBar来使用上述方式构建红点,分别设置icon和activeIcon

DONE

  • 首页

  • 通讯录页(通讯录页字母表跳转)

  • 发现页

  • 我的页面

  • 搜索页

  • 聊天页

  • Splash页

  • 二维码扫描页(native+flutter)

TODO

  • 朋友圈页面
  • 我的资料卡片页
  • 设置页
  • 支付页
  • 多语言

源码地址:github.com/ding-zou/fl…

分类:
Android
标签:
收藏成功!
已添加到「」, 点击更改