简介
城市选择，联系人选择，国家选择等等一般都会做成一个单独的选择页面。
由于数据较多，一般会按照字母顺序排序分类；
记忆上次选中的状态；
这个和省市区三级选择，职业等级联选择不一样；
这些事情如果都要自己做轮子，还是比较繁琐的。所以，选用插件合适的插件是首选。
插件引入
azlistview: ^2.0.0
数据
- 既然是一个ListView，那么就需要提供一个List作为数据。作为List的成员，需要继承一个抽象类。（抽象类用来继承，接口用来实现）（继承好还是接口好，见仁见智）
/// ISuspension Bean.
abstract class ISuspensionBean {
bool isShowSuspension = false;
String getSuspensionTag(); //Suspension Tag
}
我们自己的数据Model要以ISuspensionBean为基类，并且重写
String getSuspensionTag()方法；这个很重要，这个方法的结果是数据分块的标准。例子中的城市列表，城市的Model定义如下：
class CityModel extends ISuspensionBean {
String? name;
String? tagIndex; // 这个字段就是tag
String? namePinyin;
@override
String getSuspensionTag() => tagIndex!;
}
默认的tag是字母A~Z和#，所以tag一般就是大写的字母，如果取不到大写字母，那么就用#代替。
提供了一个工具类SuspensionUtil，可以对数据列表进行排序。例子中提供了一个方法来处理数据排序和tag的获取。
void _handleList(List<CityModel> list) {
if (list.isEmpty) return;
// 城市名字是中文，所以取拼音的首字母，并且大写来做tag
for (int i = 0, length = list.length; i < length; i++) {
String pinyin = PinyinHelper.getPinyinE(list[i].name);
String tag = pinyin.substring(0, 1).toUpperCase();
list[i].namePinyin = pinyin;
// tag由大写字母A~Z和#组成
if (RegExp('[A-Z]').hasMatch(tag)) {
list[i].tagIndex = tag;
} else {
list[i].tagIndex = '#';
}
}
// A-Z sort.
SuspensionUtil.sortListBySuspensionTag(list);
// show sus tag.
SuspensionUtil.setShowSuspensionStatus(cityList);
}
tag列表
- tag的处理是整个数据处理中最关键的一步。
- 图中的*是因为例子程序增加了热门城市，增加了一种tag，实际使用的时候并不需要。大多数时候，默认的tag列表（字母A~Z加#）足够用了
- 点击具体tag，列表项会自动滑动到对应的分块，比如途中就是点击了字母K的效果。这是整个插件提供的最重要的功能。
列表项
列表项通过一个
Widget Function(BuildContext context, int index);来动态创建。例子代码就用一个最简单的ListTile来表示。
用户的选择，插件没有管。例子程序通过ListTile的onTap成员来实现。也就是说，用户的点击响应需要自己来处理。
// 列表项
itemBuilder: (BuildContext context, int index) {
CityModel model = cityList[index];
return ListTile(
title: Text(model.name),
onTap: () {
LogUtil.e("onItemClick : $model");
Utils.showSnackBar(context, 'onItemClick : ${model.name}');
},
);
},
列表项
浮层
浮层通过一个
Widget Function(BuildContext context, int index);来创建。例子代码就给了一个横条，显示了作为tag的内容而已。
// 浮层，一个横条，显示当前的Tag
susItemBuilder: (BuildContext context, int index) {
CityModel model = cityList[index];
String tag = model.getSuspensionTag();
return Container(
height: 40.h,
width: ScreenUtil.defaultSize.width.w + 20.w,
padding: EdgeInsets.only(left: 16.0.w),
color: const Color(0xFFF3F4F5),
alignment: Alignment.centerLeft,
child: Text(
tag,
softWrap: false,
style: TextStyle(
fontSize: 14.0.sp,
color: const Color(0xFF666666),
),
),
);
},
浮层
选择的内容
选中状态，用户当前选择的内容等，插件都没有提供，需要自己来处理。
例子程序中没有实时记录，而是固定写死了，大致意思了一下而已。
// 用户的选择，需要处理一下，在onTap中进行更新。例子代码偷懒了。
Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.only(left: 15.0),
height: 50.0,
child: Text("当前城市: 成都市"),
),
选择的内容
实践
国家的选择和城市的选择很像，稍微改改就可以了。
国家的选择页面
