Flutter 城市/通讯录列表字母索引联动效果实现

前言

在像通讯录，联系人列表，城市选择列表等数据量比较多的长列表页面中，我们经常会留意到产品设计会在页面的右侧区域提供一个竖向的字母索引列表，供用户点击选择快速定位到长列表中的指定索引位置，以便于用户快速定位到自己要筛选的数据，从而提升用户体验，今天我们就以城市列表为例，来剖析一下，这样的体验效果如果用Flutter来实现

技术实现分析

  • 页面城市列表布局采用ListView嵌套ListView，其中外层ListView负责显示当前城市的分组字母信息，内层Listview负责显示当前字母索引分组下的所有城市
  • 右侧竖向字母索引列表采用ListView展示，当点击右侧字母索引的某一个时，动态的计算出，当前字母索引在城里列表的角标索引值，然后计算得出被点击的字符索引在城里列表里的高度值，通过ScrollController让城里列表自动定位到计算出的高度位置，从而实现，点击字母所以动态定位城市列表位置的联动效果

效果如下

在这里插入图片描述

我先把上述效果的相关代码贴出来供大家参考，然后再把代码里涉及到计算位置的核心代码做下详细的讲解，代码里涉及到网络请求，以及网络工具类的封装这里就不再赘述了，读者可以查看我往期博客关于Flutter入门进阶之旅（十七）Flutter dio网络请求里的具体讲解，或者从github上直接找到源代码阅读https://github.com/xiedong11/flutter_app

核心代码

/**
 * @desc   选择城市地区联动索引页
 * @author xiedong
 * @date   2020-04-30.
 */

class PhoneCountryCodePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => PageState();
}

class PageState extends State<PhoneCountryCodePage> {
  var GET_PHONE_COUNTRY_CODE_URL =
      "https://raw.githubusercontent.com/xiedong11/flutter_app/master/static/phoneCode.json";
  List<String> letters = [];
  List<PhoneCountryCodeData> data;

  ScrollController _scrollController = ScrollController();
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    getPhoneCodeDataList();
  }

  getPhoneCodeDataList() async {
    var response = await DioUtils.getInstance().get(GET_PHONE_COUNTRY_CODE_URL);

    var resultEntity = new PhoneCountryCodeEntity.fromJson(json.decode(response));

    if(resultEntity.code==200){
      this.setState(() {
        data = resultEntity.data;
        for (int i = 0; i < data.length; i++) {
          letters.add(data[i].name.toUpperCase());
        }
      });
    }

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("城市地区选择"),
        centerTitle: true,
      ),
      body: Stack(
        children: <Widget>[
          data == null || data.length == 0
              ? Text("")
              : Padding(
                  padding: EdgeInsets.only(left: 20),
                  child: ListView.builder(
                      controller: _scrollController,
                      itemCount: data.length,
                      itemBuilder: (BuildContext context, int index) {
                        return Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            PhoneCodeIndexName(data[index].name.toUpperCase()),
                            ListView.builder(
                                itemBuilder:
                                    (BuildContext context, int index2) {
                                  return Container(
                                    height: 46,
                                    child: GestureDetector(
//                      behavior: HitTestBehavior.translucent,
                                      child: Padding(
                                        padding:
                                            EdgeInsets.symmetric(vertical: 10),
                                        child: Row(
                                          children: <Widget>[
                                            Text(
                                                "${data[index].listData[index2].name}",
                                                style: TextStyle(
                                                    fontSize: 16,
                                                    color: Color(0xff434343))),
                                            Margin(width: 10),
                                            Text(
                                              "+${data[index].listData[index2].code}",
                                              style: TextStyle(
                                                  fontSize: 16,
                                                  color: Color(0xffD6D6D6)),
                                            )
                                          ],
                                        ),
                                      ),
                                      onTap: () {
                                        Navigator.of(context).pop(
                                            data[index].listData[index2].code);
                                      },
                                    ),
                                  );
                                },
                                itemCount: data[index].listData.length,
                                shrinkWrap: true,
                                physics:
                                    NeverScrollableScrollPhysics()) //禁用滑动事件),
                          ],
                        );
                      }),
                ),
          Align(
            alignment: new FractionalOffset(1.0, 0.5),
            child: SizedBox(
              width: 25,
              child: Padding(
                padding: EdgeInsets.only(top: 20),
                child: ListView.builder(
                  itemCount: letters.length,
                  itemBuilder: (BuildContext context, int index) {
                    return GestureDetector(
                      child: Text(
                        letters[index],
                        style: TextStyle(color: Colors.black),
                      ),
                      onTap: () {
                        setState(() {
                          _currentIndex = index;
                        });
                        var height = index * 45.0;
                        for (int i = 0; i < index; i++) {
                          height += data[i].listData.length * 46.0;
                        }
                        _scrollController.jumpTo(height);
                      },
                    );
                  },
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

class PhoneCodeIndexName extends StatelessWidget {
  String indexName;

  PhoneCodeIndexName(this.indexName);

  Widget build(BuildContext context) {
    return Container(
      height: 45,
      child: Padding(
        child: Text(indexName,
            style: TextStyle(fontSize: 20, color: Color(0xff434343))),
        padding: EdgeInsets.symmetric(vertical: 10),
      ),
    );
  }
}

Json数据映射实体类

class PhoneCountryCodeEntity {
  int code;
  List<PhoneCountryCodeData> data;
  String message;

  PhoneCountryCodeEntity({this.code, this.data, this.message});

  PhoneCountryCodeEntity.fromJson(Map<String, dynamic> json) {
    code = json['code'];
    if (json['data'] != null) {
      data = new List<PhoneCountryCodeData>();
      (json['data'] as List).forEach((v) {
        data.add(new PhoneCountryCodeData.fromJson(v));
      });
    }
    message = json['message'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['code'] = this.code;
    if (this.data != null) {
      data['data'] = this.data.map((v) => v.toJson()).toList();
    }
    data['message'] = this.message;
    return data;
  }
}

class PhoneCountryCodeData {
  List<PhoneCountryCodeDataListdata> listData;
  String name;

  PhoneCountryCodeData({this.listData, this.name});

  PhoneCountryCodeData.fromJson(Map<String, dynamic> json) {
    if (json['listData'] != null) {
      listData = new List<PhoneCountryCodeDataListdata>();
      (json['listData'] as List).forEach((v) {
        listData.add(new PhoneCountryCodeDataListdata.fromJson(v));
      });
    }
    name = json['name'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.listData != null) {
      data['listData'] = this.listData.map((v) => v.toJson()).toList();
    }
    data['name'] = this.name;
    return data;
  }
}

class PhoneCountryCodeDataListdata {
  String code;
  String name;
  int id;
  String groupCode;

  PhoneCountryCodeDataListdata({this.code, this.name, this.id, this.groupCode});

  PhoneCountryCodeDataListdata.fromJson(Map<String, dynamic> json) {
    code = json['code'];
    name = json['name'];
    id = json['id'];
    groupCode = json['groupCode'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['code'] = this.code;
    data['name'] = this.name;
    data['id'] = this.id;
    data['groupCode'] = this.groupCode;
    return data;
  }
}

博客中Json数据的测试地址为：https://raw.githubusercontent.com/xiedong11/flutter_app/master/static/phoneCode.json 读者测试代码时如果自己的json数据格式跟我的不一样，应该对应自己的json数据格式去解析对应的实体类，确保数据能正确的绑定到视图上。

难点分析

文章开头当点击右侧字母索引的某一个时，动态的计算出当前字母索引在城里列表的角标索引值，然后计算得出被点击的字符索引在城里列表里的高度值，通过ScrollController让城里列表自动定位到计算出的高度位置，从而实现，点击字母所以动态定位城市列表位置的联动效果。

在这里插入图片描述

我们通过分析上图可以得出，当我们点击需要定位到的指定位置时，我们只需要计算出当前被点击的字母索引之前的所有item的累加高度值，然后通过ListView中的ScrollController.jumpTo(double value)滑动到指定的高度值，就完成了这整个联动效果。

这里，我们通过遍历我们从网络上获取数据值，很容易计算出需要滑动的高度累加值

核心代码如下

       var height = index * 45.0;  //45.0 字母分组的高度
       for (int i = 0; i < index; i++) {
           height += data[i].listData.length * 46.0;   //46.0 每个Item的高度
             }
       _scrollController.jumpTo(height);

至此整个实现效果已经完成，完整的项目跟代码请参阅：Flutter进阶之旅专栏

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,736评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,167评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,442评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,902评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,302评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,573评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,847评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,562评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,260评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2赞 245
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,367评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,016评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2赞 269