flutter_wechat
源码地址:ding-zou/flutter-wechat
A flutter app which clones wechat! 这是一个仿照微信样式基于flutter实现的app,还在继续完善中,欢迎提意见
包含了flutter中基本所有的组件,适合以此项目进行flutter学习。
页面展示
![966c2d2039cc44453129caab51a8cad5.png](https://i-blog.csdnimg.cn/blog_migrate/d79126ea35270e70ebc082a0f984f858.jpeg)
![93a72f7fa316af5eb6771b1fa80a6cf9.png](https://i-blog.csdnimg.cn/blog_migrate/1865c3b4f01e64f22811d627db507ded.jpeg)
![8dc3a0a117b0adc2081cfc246dd8a8ac.png](https://i-blog.csdnimg.cn/blog_migrate/fbedccb4f4e6152fb501f66de9ed70bf.jpeg)
![a960fdccedca0c9718064c5bf4477f2a.png](https://i-blog.csdnimg.cn/blog_migrate/fca6af873960ec1942ba5cae80ff6c6e.jpeg)
![873dbbcae16d6c35af96147a762b4e4a.png](https://i-blog.csdnimg.cn/blog_migrate/656595b00029c20dd774e5d6d238f86d.jpeg)
![3cf273a444961b05ddd5cd170da3f48b.png](https://i-blog.csdnimg.cn/blog_migrate/032c23f59f8c98a2b66ad60d0ac0fc03.jpeg)
主要功能实现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:你可以使用BottomNavigationBa来使用上述方式构建红点,分别设置icon和activeIcon
源码地址:ding-zou/flutter-wechat