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

2501_90291320

于 2025-01-17 07:46:11 发布

阅读量286

点赞数 7

CC 4.0 BY-SA版权

文章标签： flutter javascript 前端

本文链接：https://blog.csdn.net/2501_90291320/article/details/145196520

/\*\*
 \* @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: Cr