简介

城市选择，联系人选择，国家选择等等一般都会做成一个单独的选择页面。

• 由于数据较多，一般会按照字母顺序排序分类；

• 记忆上次选中的状态；

• 这个和省市区三级选择，职业等级联选择不一样；

这些事情如果都要自己做轮子，还是比较繁琐的。所以，选用插件合适的插件是首选。

插件引入

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("当前城市: 成都市"),
                    ),

选择的内容

实践

国家的选择和城市的选择很像，稍微改改就可以了。

国家的选择页面

参考文章

azlistview: ^2.0.0

azlistview

Flutter 城市列表AzListView 索引&悬停