flutter 微信语言选择_Flutter 玩转微信—

概述

鄙人于闲暇之日，自学Flutter已有两月之久，古人曰：百闻不如一见，百见不如一试，特此利用生平之所学，实战微信以项目。Flutter，学语法之轻易，用组件之简单，源码开源，插件丰富。然一份代码，却可完美运行于iOS和Android之上，其运行流畅，且效果杠杠，岂不拍案叫绝，牛B轰轰~。

如有iOS、Android、Web开发之经验，联想之前之所学，类比之前之所用，除写法不同，但语法通用，若多加练习，定能快速上手，耳熟蓝翔，不多逼逼，推荐以下之文档。

此文作微信通讯录以文章，虽功能看似简单，但内含技术丰富，且功能十分有趣。作为初学Flutter，拿其小试牛刀，必将初有成效。于Flutter而言，鄙人也算是初生牛犊不怕虎，并非是天神下凡一锤五。当然，笔者必将知无不言、言无不尽，梳理实战过程之问题，总结解决问题之方案，让尔等知其然，知其所以然。望能抛玉引砖，摆渡众生，如有纰漏，还望斧正。

效果图

列表

索引

侧滑

contacts_page_0.png

contacts_page_1.png

contacts_page_2.png

列表

一、功能分析

搭建通讯录之列表，其知识点涵盖A-Z 索引Bar、悬停效果view、自定义Header、索引联动、汉字转拼音，若想实现前面之功能，这里推荐以下之插件，好风凭借力，送我上青云。

azlistview 实现A-Z 索引Bar、悬停效果view、自定义Header、索引联动

lpinyin 实现汉字转拼音

关于具体其使用，还请下载其Demo，运行于电脑之上，查看其运行效果，在此就不多逼逼。

二、数据配置

// 获取联系人列表

Future fetchContacts() async {

// 先清除掉数据

_contactsList.clear();

_contactsMap.clear();

// 获取用户信息列表

final jsonStr =

await rootBundle.loadString(Constant.mockData + 'contacts.json');

// contactsJson

final List contactsJson = json.decode(jsonStr);

// 遍历

contactsJson.forEach((json) {

final User user = User.fromJson(json);

_contactsList.add(user);

_contactsMap[user.idstr] = user;

});

for (int i = 0, length = _contactsList.length; i < length; i++) {

String pinyin = PinyinHelper.getPinyinE(_contactsList[i].screenName);

String tag = pinyin.substring(0, 1).toUpperCase();

_contactsList[i].screenNamePinyin = pinyin;

if (RegExp("[A-Z]").hasMatch(tag)) {

_contactsList[i].tagIndex = tag;

} else {

_contactsList[i].tagIndex = "#";

}

// 根据A-Z排序

SuspensionUtil.sortListBySuspensionTag(_contactsList);

// 返回数据

return _contactsList;

}

三、UI搭建

由azlistview组件提供的API或Property可知，需要提供以下之部件(Widget)：

// 列表中某一个 item 部件

itemBuilder: (context, model) => _buildListItem(model),

// 顶部悬浮的Widget

suspensionWidget: _buildSusWidget(_suspensionTag, isFloat: true),

// 自定义header

header: AzListViewHeader(

// - [特殊字符](https://blog.csdn.net/cfxy666/article/details/87609526)

// - [特殊字符](http://www.fhdq.net/)

tag: "♀",

height: 5 * _itemHeight,

builder: (context) {

return _buildHeader();

// IndexBar 这个可以不写，使用默认的IndexBar

indexBarBuilder: (context, tagList, onTouch){},

// 自定义点击IndexBar 中的某个 tag，放大显示在屏幕中间的 hint，必须showIndexHint: true, 默认就是true

indexHintBuilder: (context, hint) {

return Container(

alignment: Alignment.center,

width: 80.0,

height: 80.0,

decoration: BoxDecoration(color: Color(0xFFC7C7CB), shape: BoxShape.circle),

child:Text(hint, style: TextStyle(color: Colors.white, fontSize: 30.0)),

);

具体UI搭建，这里不多赘述，还请移驾鄙人提供的Demo，翻阅查看其代码。这里笔者以自定义悬浮View和组头View为例，穿针引线，搭建符合要求之UI。效果图如下所示：

contacts_page_3.png

A：悬浮View

B：组头View

代码实现：

/// 构建悬浮部件

/// [susTag] 标签名称

/// [isFloat] 是否悬浮默认是 false

Widget _buildSusWidget(String susTag, {bool isFloat = false}) {

return Container(

height: _suspensionHeight.toDouble(),

padding: EdgeInsets.only(left: ScreenUtil.getInstance().setWidth(51.0)),

decoration: BoxDecoration(

color: isFloat ? Colors.white : Style.pBackgroundColor,

border: isFloat

? Border(bottom: BorderSide(color: Color(0xFFE6E6E6), width: 0.5))

: null,

alignment: Alignment.centerLeft,

child: Text(

'$susTag',

softWrap: false,

style: TextStyle(

fontSize: ScreenUtil.getInstance().setSp(39.0),

color: isFloat ? Style.pTintColor : Color(0xff777777),

);

}

四、特别提醒

azlistview 中要求itemCell 、悬停View、自定义的Header、以及IndexBar中每个tag的高度必须是 int类型且不可动态修改。如涉及屏幕适配，还请向上(下)取整。

/// 悬浮view 高度向上取整

int _suspensionHeight =

(ScreenUtil.getInstance().setHeight(99.0) as double).ceil();

/// 每个item 高度向上取整

int _itemHeight =

(ScreenUtil.getInstance().setHeight(168.0) as double).ceil();

AzListView：只是对SuspensionView & IndexBar的封装，方便使用罢了，尔等完全可以使用 SuspensionView & IndexBar 定制更加丰富的UI效果。

索引条

一、功能分析

由于，AzListView提供的IndexBar并不满足微信通讯录的要求，需求驱动生产，不可墨守成规，尔等可运行以下代码，查看默认和自定义的效果对比，尔等方能辨雌雄。

/// 构建联系人列表

/// [defaultMode] 是否使用默认的IndexBar

Widget _buildContactsList({bool defaultMode = false}) {

if (defaultMode) {

return _buildDefaultIndexBarList();

} else {

return _buildCustomIndexBarList();

}

功能对比

类型

Custom

Default

效果

contacts_page_1.png

contacts_page_4.png

组件

AzListView

条件

showIndexHint: false,

indexBarBuilder: (_, _, _) => MHIndexBar()

showIndexHint: true,

功能

1、列表和IndexBar能相互联动

2、IndexBar当前选中的Tag高亮

3、手指触碰IndexBar中Tag, 弹出指向该Tag的气泡

4、通过设置ignoreTags属性，控制其中某个Tag,不高亮，不弹气泡

4、通过设置mapTag和mapSelTag，可以将某个tag映射称自定义的默认或选中样式，eg: ♀ =>

flutter 微信语言选择_Flutter 玩转微信——通讯录相关推荐

flutter 微信语言选择_Flutter/dart聊天实例|仿微信界面|红包|朋友圈
FlutterChatroom项目是基于flutter+dart+image_picker等技术实现的仿微信app聊天室实战项目. 一.技术框架编码/技术:Vscode + Flutter 1.12. ...
flutter 微信语言选择_Flutter 模仿微信读书效果！
原标题:Flutter 模仿微信读书效果! 作者:xq9527链接:https://www.jianshu.com/p/ee9d30ba2c42 前言各位同学大家好,有一段时间没有给大家更新博客了, ...
flutter 微信语言选择_flutter实战项目，教你使用flutter打造微信app页面！
flutter_wechat
flutter 微信语言选择_#Flutter项目(3)之仿写微信通讯录界面
1 导航栏按钮的添加导航栏 appBar 使用AppBar()方法创建:主要用到的控件属性如下: title:导航栏标题 /// The primary widget displayed in th ...
android微信图片选择框架,Android仿微信图片选择器ImageSelector使用详解
今天给大家介绍一个仿微信的图片选择器:ImageSelector.ImageSelector支持图片的单选.限数量的多选和不限数量的多选.支持图片预览和图片文件夹的切换.在上一篇文章 <Andr ...
android 微信图片选择,Android之仿微信图片选择器
先上效果图.第一张图显示的是"相机"文件夹中的所有图片:通过点击多张图片可以到第二张图所示的效果(被选择的图片会变暗,同时选择按钮变亮):点击最下面的那一栏可以到第三张图所示的效果 ...
玩转微信为您推荐十大生活服务类微信公众号
微信,超越了通讯工具后,它将如何丰富你的移动生活? 你在用微信吗?这个拥有超2亿用户的移动应用已不仅仅是个"通讯工具",它正在让你的移动生活变得更加有趣.但完成这个使命的除了微信本 ...
用python创建微信机器人_用Python创建微信机器人
原标题:用Python创建微信机器人文/裸睡的猪哥图片来源于网络微信,一个日活10亿的超级app,不仅在国内社交独领风骚,在国外社交也同样占有一席之地.今天我们要讲的便是如何用Python来做一 ...
神策营销云：「在线教育」行业，如何借“运营工具”玩转微信生态？
中国在线教育行业自 20 世纪 90 年代开始,已有近 30 年的发展历程.这 30 年中,陆续经历了"多媒体.数字化.互联网.移动化.人工智能.AI+ 智能"6 个发展阶段,并呈 ...

flutter 微信语言选择_Flutter 玩转微信——通讯录

flutter 微信语言选择_Flutter 玩转微信——通讯录相关推荐

最新文章

热门文章