Flutter azlistview城市列表页面

城市列表页面效果

在根目录pubspec.yaml文件中添加依赖

dependencies:
    azlistview: ^1.1.1
    lpinyin: ^2.0.3

import 'package:flutter/material.dart';
import 'city_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("azlistview"),
        ),
        body: CityHome(),
      ),
    );
  }
}

class CityHome extends StatefulWidget {
  const CityHome({Key key}) : super(key: key);

  @override
  _CityHomeState createState() => _CityHomeState();
}

class _CityHomeState extends State<CityHome> {
  String city = '深圳市';
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Padding(
        padding: EdgeInsets.all(50),
        child: Row(children: [
          Text(city),
          Icon(
            Icons.expand_more,
            color: Colors.grey,
            size: 26,
          )
        ]),
      ),
      onTap: () => _jumpToCity(),
    );
  }

  void _jumpToCity() async {
    String result = await NavigatorUtil.push(context, CityPage(city: city));
    setState(() {
      city = result;
    });
  }
}

class NavigatorUtil {
  //跳转页面
  static push(BuildContext context, Widget page) async {
    final result = await Navigator.push(
        context, MaterialPageRoute(builder: (context) => page));
    return result;
  }
}

调用CityPage 类

import 'dart:convert';
import 'package:azlistview/azlistview.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:lpinyin/lpinyin.dart';

class CityPage extends StatefulWidget {
  final String city;

  const CityPage({Key key,this.city}) : super(key: key);

  @override
  _CityPageState createState() => _CityPageState();
}

const CITY_NAME_LIST = ['北京市', '广州市', '成都市', '深圳市', '杭州市', '武汉市'];

class _CityPageState extends State<CityPage> {
  List<CityModel> cityList = [];
  List<CityModel> _hotCityList = [];

  @override
  void initState() {
    super.initState();
    CITY_NAME_LIST.forEach((value) {
      _hotCityList.add(CityModel(name: value, tagIndex: '★'));
    });
    cityList.addAll(_hotCityList);
    SuspensionUtil.setShowSuspensionStatus(cityList);
    Future.delayed(Duration(milliseconds: 16), () {
      loadData();
    });
  }

  void loadData() {
    rootBundle.loadString('assets/data/china.json').then((value) {
      cityList.clear();
      Map countyMap = json.decode(value);
      List list = countyMap['china'];
      list.forEach((v) {
        cityList.add(CityModel.fromJson(v));
      });
      _handleList(cityList);
    });
  }

  void _handleList(List<CityModel> list) {
    if (list.isEmpty) return;
    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;
      if (RegExp("[A-Z]").hasMatch(tag)) {
        list[i].tagIndex = tag;
      } else {
        list[i].tagIndex = "#";
      }
    }

    // A-Z sort.
    SuspensionUtil.sortListBySuspensionTag(list);

    // add hotCityList.
    cityList.insertAll(0, _hotCityList);

    // show sus tag.
    SuspensionUtil.setShowSuspensionStatus(cityList);

    setState(() {});
  }

  Widget header() {
    return Container(
      color: Colors.white,
      height: 44.0,
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              autofocus: false,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.only(left: 10, right: 10),
                border: InputBorder.none,
                labelStyle: TextStyle(fontSize: 14, color: Color(0xFF333333)),
                hintText: '城市中文名或拼音',
                hintStyle: TextStyle(
                  fontSize: 14,
                  color: Color(0xFFCCCCCC),
                ),
              ),
            ),
          ),
          Container(
            width: 0.33,
            height: 14.0,
            color: Color(0xFFEFEFEF),
          ),
          InkWell(
            onTap: () {
              Navigator.pop(context, widget.city);
            },
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Text(
                "取消",
                style: TextStyle(color: Color(0xFF999999), fontSize: 14),
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        child: Column(
          children: [
            header(),
            Expanded(
              child: Material(
                color: Color(0x80000000),
                child: Card(
                  clipBehavior: Clip.hardEdge,
                  margin: const EdgeInsets.only(left: 8, top: 8, right: 8),
                  shape: const RoundedRectangleBorder(
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(4.0),
                      topRight: Radius.circular(4.0),
                    ),
                  ),
                  child: Column(
                    children: [
                      Container(
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.only(left: 15.0),
                        height: 50.0,
                        child: Text("当前城市: ${widget.city}"),
                      ),
                      Expanded(
                        child: AzListView(
                          data: cityList,
                          itemCount: cityList.length,
                          itemBuilder: (BuildContext context, int index) {
                            CityModel model = cityList[index];
                            return Utils.getListItem(context, model);
                          },
                          padding: EdgeInsets.zero,
                          susItemBuilder: (BuildContext context, int index) {
                            CityModel model = cityList[index];
                            String tag = model.getSuspensionTag();
                            return Utils.getSusItem(context, tag);
                          },
                          indexBarData: ['★', ...kIndexBarData],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class CityModel extends ISuspensionBean {
  String name;
  String tagIndex;
  String namePinyin;

  CityModel({
     this.name,
    this.tagIndex,
    this.namePinyin,
  });

  CityModel.fromJson(Map<String, dynamic> json) : name = json['name'];

  Map<String, dynamic> toJson() => {
        'name': name,
      };

  @override
  String getSuspensionTag() => tagIndex;

  @override
  String toString() => json.encode(this);
}

class Utils {
  static Widget getSusItem(BuildContext context, String tag,
      {double susHeight = 40}) {
    if (tag == '★') {
      tag = '★ 热门城市';
    }
    return Container(
      height: susHeight,
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.only(left: 16.0),
      color: Color(0xFFF3F4F5),
      alignment: Alignment.centerLeft,
      child: Text(
        '$tag',
        softWrap: false,
        style: TextStyle(
          fontSize: 14.0,
          color: Color(0xFF666666),
        ),
      ),
    );
  }

  static Widget getListItem(BuildContext context, CityModel model,
      {double susHeight = 40}) {
    return ListTile(
      title: Text(model.name),
      onTap: () {
        Navigator.pop(context, model.name);
      },
    );
  }
}

数据存储assets/data/china.json

pubspec.yaml文件中添加china.json引用路径

  assets:
    - assets/data/

china.json文件

{"china":[{"name":"北京市"},{"name":"天津市"},{"name":"石家庄市"},{"name":"唐山市"},{"name":"秦皇岛市"},{"name":"邯郸市"},{"name":"邢台市"},{"name":"保定市"},{"name":"张家口市"},{"name":"承德市"},{"name":"沧州市"},{"name":"廊坊市"},{"name":"衡水市"},{"name":"太原市"},{"name":"大同市"},{"name":"阳泉市"},{"name":"长治市"},{"name":"晋城市"},{"name":"朔州市"},{"name":"晋中市"},{"name":"运城市"},{"name":"忻州市"},{"name":"临汾市"},{"name":"吕梁市"},{"name":"呼和浩特市"},{"name":"包头市"},{"name":"乌海市"},{"name":"赤峰市"},{"name":"通辽市"},{"name":"鄂尔多斯市"},{"name":"呼伦贝尔市"},{"name":"巴彦淖尔市"},{"name":"乌兰察布市"},{"name":"兴安盟"},{"name":"锡林郭勒盟"},{"name":"阿拉善盟"},{"name":"沈阳市"},{"name":"大连市"},{"name":"鞍山市"},{"name":"抚顺市"},{"name":"本溪市"},{"name":"丹东市"},{"name":"锦州市"},{"name":"营口市"},{"name":"阜新市"},{"name":"辽阳市"},{"name":"盘锦市"},{"name":"铁岭市"},{"name":"朝阳市"},{"name":"葫芦岛市"},{"name":"长春市"},{"name":"吉林市"},{"name":"四平市"},{"name":"辽源市"},{"name":"通化市"},{"name":"白山市"},{"name":"松原市"},{"name":"白城市"},{"name":"延边朝鲜族自治州"},{"name":"哈尔滨市"},{"name":"齐齐哈尔市"},{"name":"鸡西市"},{"name":"鹤岗市"},{"name":"双鸭山市"},{"name":"大庆市"},{"name":"伊春市"},{"name":"佳木斯市"},{"name":"七台河市"},{"name":"牡丹江市"},{"name":"黑河市"},{"name":"绥化市"},{"name":"大兴安岭地区"},{"name":"上海市"},{"name":"南京市"},{"name":"无锡市"},{"name":"徐州市"},{"name":"常州市"},{"name":"苏州市"},{"name":"南通市"},{"name":"连云港市"},{"name":"淮安市"},{"name":"盐城市"},{"name":"扬州市"},{"name":"镇江市"},{"name":"泰州市"},{"name":"宿迁市"},{"name":"杭州市"},{"name":"宁波市"},{"name":"温州市"},{"name":"嘉兴市"},{"name":"湖州市"},{"name":"绍兴市"},{"name":"金华市"},{"name":"衢州市"},{"name":"舟山市"},{"name":"台州市"},{"name":"丽水市"},{"name":"合肥市"},{"name":"芜湖市"},{"name":"蚌埠市"},{"name":"淮南市"},{"name":"马鞍山市"},{"name":"淮北市"},{"name":"铜陵市"},{"name":"安庆市"},{"name":"黄山市"},{"name":"滁州市"},{"name":"阜阳市"},{"name":"宿州市"},{"name":"巢湖市"},{"name":"六安市"},{"name":"亳州市"},{"name":"池州市"},{"name":"宣城市"},{"name":"福州市"},{"name":"厦门市"},{"name":"莆田市"},{"name":"三明市"},{"name":"泉州市"},{"name":"漳州市"},{"name":"南平市"},{"name":"龙岩市"},{"name":"宁德市"},{"name":"南昌市"},{"name":"景德镇市"},{"name":"萍乡市"},{"name":"九江市"},{"name":"新余市"},{"name":"鹰潭市"},{"name":"赣州市"},{"name":"吉安市"},{"name":"宜春市"},{"name":"抚州市"},{"name":"上饶市"},{"name":"济南市"},{"name":"青岛市"},{"name":"淄博市"},{"name":"枣庄市"},{"name":"东营市"},{"name":"烟台市"},{"name":"潍坊市"},{"name":"济宁市"},{"name":"泰安市"},{"name":"威海市"},{"name":"日照市"},{"name":"莱芜市"},{"name":"临沂市"},{"name":"德州市"},{"name":"聊城市"},{"name":"滨州市"},{"name":"菏泽市"},{"name":"郑州市"},{"name":"开封市"},{"name":"洛阳市"},{"name":"平顶山市"},{"name":"安阳市"},{"name":"鹤壁市"},{"name":"新乡市"},{"name":"焦作市"},{"name":"濮阳市"},{"name":"许昌市"},{"name":"漯河市"},{"name":"三门峡市"},{"name":"南阳市"},{"name":"商丘市"},{"name":"信阳市"},{"name":"周口市"},{"name":"驻马店市"},{"name":"武汉市"},{"name":"黄石市"},{"name":"十堰市"},{"name":"宜昌市"},{"name":"襄樊市"},{"name":"鄂州市"},{"name":"荆门市"},{"name":"孝感市"},{"name":"荆州市"},{"name":"黄冈市"},{"name":"咸宁市"},{"name":"随州市"},{"name":"恩施土家族苗族自治州"},{"name":"仙桃市"},{"name":"潜江市"},{"name":"天门市"},{"name":"神农架林区"},{"name":"长沙市"},{"name":"株洲市"},{"name":"湘潭市"},{"name":"衡阳市"},{"name":"邵阳市"},{"name":"岳阳市"},{"name":"常德市"},{"name":"张家界市"},{"name":"益阳市"},{"name":"郴州市"},{"name":"永州市"},{"name":"怀化市"},{"name":"娄底市"},{"name":"湘西土家族苗族自治州"},{"name":"广州市"},{"name":"韶关市"},{"name":"深圳市"},{"name":"珠海市"},{"name":"汕头市"},{"name":"佛山市"},{"name":"江门市"},{"name":"湛江市"},{"name":"茂名市"},{"name":"肇庆市"},{"name":"惠州市"},{"name":"梅州市"},{"name":"汕尾市"},{"name":"河源市"},{"name":"阳江市"},{"name":"清远市"},{"name":"东莞市"},{"name":"中山市"},{"name":"潮州市"},{"name":"揭阳市"},{"name":"云浮市"},{"name":"南宁市"},{"name":"柳州市"},{"name":"桂林市"},{"name":"梧州市"},{"name":"北海市"},{"name":"防城港市"},{"name":"钦州市"},{"name":"贵港市"},{"name":"玉林市"},{"name":"百色市"},{"name":"贺州市"},{"name":"河池市"},{"name":"来宾市"},{"name":"崇左市"},{"name":"海口市"},{"name":"三亚市"},{"name":"重庆市"},{"name":"成都市"},{"name":"自贡市"},{"name":"攀枝花市"},{"name":"泸州市"},{"name":"德阳市"},{"name":"绵阳市"},{"name":"广元市"},{"name":"遂宁市"},{"name":"内江市"},{"name":"乐山市"},{"name":"南充市"},{"name":"眉山市"},{"name":"宜宾市"},{"name":"广安市"},{"name":"达州市"},{"name":"雅安市"},{"name":"巴中市"},{"name":"资阳市"},{"name":"阿坝藏族羌族自治州"},{"name":"甘孜藏族自治州"},{"name":"凉山彝族自治州"},{"name":"贵阳市"},{"name":"六盘水市"},{"name":"遵义市"},{"name":"安顺市"},{"name":"铜仁市"},{"name":"黔西南布依族苗族自治州"},{"name":"毕节市"},{"name":"黔东南苗族侗族自治州"},{"name":"黔南布依族苗族自治州"},{"name":"昆明市"},{"name":"曲靖市"},{"name":"玉溪市"},{"name":"保山市"},{"name":"昭通市"},{"name":"丽江市"},{"name":"思茅市"},{"name":"临沧市"},{"name":"楚雄彝族自治州"},{"name":"红河哈尼族彝族自治州"},{"name":"文山壮族苗族自治州"},{"name":"西双版纳傣族自治州"},{"name":"大理白族自治州"},{"name":"德宏傣族景颇族自治州"},{"name":"怒江傈僳族自治州"},{"name":"迪庆藏族自治州"},{"name":"拉萨市"},{"name":"昌都地区"},{"name":"山南地区"},{"name":"日喀则地区"},{"name":"那曲地区"},{"name":"阿里地区"},{"name":"林芝地区"},{"name":"西安市"},{"name":"铜川市"},{"name":"宝鸡市"},{"name":"咸阳市"},{"name":"渭南市"},{"name":"延安市"},{"name":"汉中市"},{"name":"榆林市"},{"name":"安康市"},{"name":"商洛市"},{"name":"兰州市"},{"name":"嘉峪关市"},{"name":"金昌市"},{"name":"白银市"},{"name":"天水市"},{"name":"武威市"},{"name":"张掖市"},{"name":"平凉市"},{"name":"酒泉市"},{"name":"庆阳市"},{"name":"定西市"},{"name":"陇南市"},{"name":"临夏回族自治州"},{"name":"甘南藏族自治州"},{"name":"西宁市"},{"name":"海东地区"},{"name":"海北藏族自治州"},{"name":"黄南藏族自治州"},{"name":"海南藏族自治州"},{"name":"果洛藏族自治州"},{"name":"玉树藏族自治州"},{"name":"海西蒙古族藏族自治州"},{"name":"银川市"},{"name":"石嘴山市"},{"name":"吴忠市"},{"name":"固原市"},{"name":"中卫市"},{"name":"乌鲁木齐市"},{"name":"克拉玛依市"},{"name":"吐鲁番地区"},{"name":"哈密地区"},{"name":"昌吉回族自治州"},{"name":"博尔塔拉蒙古自治州"},{"name":"巴音郭楞蒙古自治州"},{"name":"阿克苏地区"},{"name":"克孜勒苏柯尔克孜自治州"},{"name":"喀什地区"},{"name":"和田地区"},{"name":"伊犁哈萨克"},{"name":"塔城地区"},{"name":"阿勒泰地区"},{"name":"石河子市"},{"name":"阿拉尔市"},{"name":"图木舒克市"},{"name":"五家渠市"},{"name":"台北"},{"name":"高雄"},{"name":"基隆"},{"name":"台中"},{"name":"台南"},{"name":"新竹"},{"name":"嘉义"},{"name":"宜兰"},{"name":"桃园"},{"name":"苗栗"},{"name":"彰化"},{"name":"南投"},{"name":"云林"},{"name":"屏东"},{"name":"台东"},{"name":"花莲"},{"name":"澎湖"},{"name":"香港岛"},{"name":"九龙"},{"name":"新界"},{"name":"澳门半岛"},{"name":"氹仔岛"},{"name":"路环岛"},{"name":"路氹城"}]}