Flutter模仿12306城市搜索、城市列表、索引。

最新推荐文章于 2024-08-20 09:27:50 发布
最新推荐文章于 2024-08-20 09:27:50 发布
阅读量1.8k 收藏 4
点赞数 2
分类专栏： Flutter 移动app 文章标签： android ios flutter android studio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tiger_gy/article/details/107517634
版权

Flutter模仿12306城市搜索、城市列表、索引。

项目中报销模块需要选择城市，看了一下12306的效果，就模仿做了一个先看一下效果图：
在这里插入图片描述
文中使用的pub插件:

azlistview: ^0.1.2
  lpinyin: ^1.0.7

刚开始也没什么思路，网上找了一篇博客，感觉和我的需求大致很是相似，就在上面做了一些修改，实现自己的需求。
博客地址

所有城市的json目录
在这里插入图片描述
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": "路氹城"
    }
  ]
}

具体的实现代码：city_search.dart

import 'dart:convert';
import 'dart:math';

import 'package:azlistview/azlistview.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:lpinyin/lpinyin.dart';
import 'package:ws/model/city.dart';

class CitySearchPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _CitySearchPageState();
}

class _CitySearchPageState extends State<CitySearchPage> {
  List<CityInfo> _cityList = List();
  List<CityInfo> _hotCityList = List();
  List<CityInfo> _searchList = List();

  int _suspensionHeight = 40;
  int _itemHeight = 50;
  String _suspensionTag = "";
  final TextEditingController cityController = new TextEditingController();

  bool _isSearching=false;
  @override
  void initState() {
    super.initState();
    loadData();
  }
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  void loadData() async {
    _hotCityList.add(CityInfo(name: "北京市", tagIndex: "★"));
    _hotCityList.add(CityInfo(name: "上海市", tagIndex: "★"));
    _hotCityList.add(CityInfo(name: "广州市", tagIndex: "★"));
    _hotCityList.add(CityInfo(name: "深圳市", tagIndex: "★"));
    _hotCityList.add(CityInfo(name: "杭州市", tagIndex: "★"));
    _hotCityList.add(CityInfo(name: "武汉市", tagIndex: "★"));
    _hotCityList.add(CityInfo(name: "重庆市", tagIndex: "★"));
    _hotCityList.add(CityInfo(name: "大连市", tagIndex: "★"));

    //加载城市列表
    rootBundle.loadString('static/file/china.json').then((value) {
      Map countyMap = json.decode(value);
      List list = countyMap['china'];
      list.forEach((value) {
        _cityList.add(CityInfo(name: value['name']));
      });
      _handleList(_cityList);
      setState(() {
        _suspensionTag = _hotCityList[0].getSuspensionTag();
      });
    });
  }

  void _handleList(List<CityInfo> list) {
    if (list == null || 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();
      String shrink="";
      List<String> strings=pinyin.split(" ");
      strings.forEach((element) {
        shrink+=element.substring(0, 1);
      });
      list[i].shrink=shrink;
      list[i].namePinyin = pinyin;
      if (RegExp("[A-Z]").hasMatch(tag)) {
        list[i].tagIndex = tag;
      } else {
        list[i].tagIndex = "#";
      }
    }
    //根据A-Z排序
    SuspensionUtil.sortListBySuspensionTag(_cityList);
  }

  void _onSusTagChanged(String tag) {
    setState(() {
      _suspensionTag = tag;
    });
  }

  Widget _buildSusWidget(String susTag) {
    susTag = (susTag == "★" ? "热门城市" : susTag);
    return Container(
      height: _suspensionHeight.toDouble(),
      padding: const EdgeInsets.only(left: 15.0),
      color: Color(0xfff3f4f5),
      alignment: Alignment.centerLeft,
      child: Text(
        '$susTag',
        softWrap: false,
        style: TextStyle(
          fontSize: 14.0,
          color: Color(0xff999999),
        ),
      ),
    );
  }

  Widget _buildListItem(CityInfo model) {
    String susTag = model.getSuspensionTag();
    susTag = (susTag == "★" ? "热门城市" : susTag);
    return Column(
      children: <Widget>[
        Offstage(
          offstage: model.isShowSuspension != true,
          child: _buildSusWidget(susTag),
        ),
        SizedBox(
          height: _itemHeight.toDouble(),
          child: ListTile(
            title: Text(model.name),
            onTap: () {
              Navigator.pop(context, model.name);
            },
          ),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:  AppBar(
        title: const Text('城市选择'),
        centerTitle: true,
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(42.0),
          child: Theme(
            data:Theme.of(context).copyWith(accentColor: Theme.of(context).accentColor),
            child: Container(
              height: 42,
              margin: EdgeInsets.only(left: 10.0,right: 10.0,bottom: 6.0),
              decoration: BoxDecoration(
                  color:  Color(0xfff3f4f5),
                  borderRadius: BorderRadius.circular(5)),
              child: Row(
                children: <Widget>[
                  Expanded(
                    child:TextFormField(
                      controller: cityController,
                      decoration: InputDecoration(
                        hintText: '请输入城市',
                        border: InputBorder.none,
                        prefixIcon: Icon(Icons.search),
                      ),
                      onChanged: (value){
                        if(value!=null&&value.length>0){
                          _searchList.clear();
                          _cityList.forEach((element) {
                            if(element.namePinyin.contains(value)
                                ||element.shrink.contains(value)
                                ||element.name.contains(value))
                              _searchList.add(element);
                          });
                          setState(() {
                            _isSearching=true;
                            _searchList;
                          });
                        }else{
                          setState(() {
                            _isSearching=false;
                          });
                        }

                      },
                    ),
                  ),
                  InkWell(
                    onTap: (){
                      setState(() {
                        cityController.value=TextEditingValue(text: "");
                        setState(() {
                          _isSearching=false;
                        });
                        FocusScope.of(context).requestFocus(FocusNode());
                      });
                    },
                    child: Icon(
                      Icons.clear,
                      size: 22,
                      color: Colors.grey,
                    ),
                  ),
                  SizedBox(width: 6.0,)
                ],
              ),
            ),
          ),
        ),
      ),
      body: Stack(
        children: <Widget>[
          Offstage(
            offstage: !_isSearching,
            child:ListView.separated(
              itemCount: _searchList.length==0?1:_searchList.length,
              itemBuilder: (context, index) {
                if(_searchList.length>0){
                  return ListTile(
                    title: Text(_searchList[index].name),
                    onTap: (){
                      Navigator.pop(context, _searchList[index].name);
                    },
                  );
                }else{
                  return Container(
                    margin: EdgeInsets.only(top:40.0),
                    child:Center(
                      child: Text(
                        "无法查询到城市",
                        style: TextStyle(fontSize: 16.0,color:Colors.grey),),
                    ),
                  );
                }
              },
              separatorBuilder: (context, index) {
                return Divider(height: 0.0, thickness: 0.0, indent: 0);
              },
            ) ,
          ),
          Offstage(
            offstage: _isSearching,
            child: Column(
              children: <Widget>[
                InkWell(
                  onTap: (){
                    Navigator.pop(context, '北京市');
                  },
                  child: Container(
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(left: 15.0),
                    height: 50.0,
                    child: Text("当前城市: 北京市"),
                  ),
                ),
                Expanded(
                    flex: 1,
                    child: AzListView(
                      data: _cityList,
                      topData: _hotCityList,
                      itemBuilder: (context, model) => _buildListItem(model),
                      suspensionWidget: _buildSusWidget(_suspensionTag),
                      isUseRealIndex: true,
                      itemHeight: _itemHeight,
                      suspensionHeight: _suspensionHeight,
                      onSusTagChanged: _onSusTagChanged,
                      //showCenterTip: false,
                    )
                ),
              ],
            ),
          ),
        ],
      )
    );
  }
}
Guancya
关注
专栏目录
Flutter实用工具Indexer列表索引和Search搜索帮助。
许天成的博客
09-06 692
上面的只是帮助类，帮助数据分组和索引，界面的分组和展示需要自己布局实现。
GreenTravel：Flutter仿滴滴出行〜仿滴滴主界面，地图中心请求动效果，服务标签展开效果，地址检索界面，城市列表界面
02-24
绿色出行 Flutter仿滴滴出行App地图：采用高德地图，仅简单完成了部分功能，基础地图，地址检索，逆地理编码。界面：仿滴滴主界面，地图中心请求动效果，服务标签展开效果，地址检索界面，城市列表界面。项目结构：详见作者另外一个Flutter完整项目 。 :fire: :fire: :fire: 注意！总本项目仅部分开源〜并不包含地图相关功能。 已公开内容： 1，Dart汉字转拼音库 2，仿滴滴城市列表，索引和悬停效果 3，仿滴滴某个版本引导页效果4，仿滴滴某个版本主页面效果5，仿滴滴国际化效果 6，Flutter常用工具类库 近期github无法预览图片和外链下载。 1，App无法下载问题 这里提供最新下载方式 2，无法查看截图，大家可以去简书或掘金查看！ 拼音 import 'package:lpinyin/lpinyin.dart' ; String pinyin = PinyinHelper . getP
az索引滑动城市列表选择
06-01
城市列表选择 ， 可滑动， 带历史记录
Flutter azlistview城市列表页面
华山论码
12-21 2412
城市列表页面效果 在根目录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})
推荐文章： Flutter开发者的得力助手 - AzListView
gitblog_00486的博客
08-20 288
推荐文章： Flutter开发者的得力助手 - AzListView 项目地址:https://gitcode.com/gh_mirrors/az/azlistview 在构建高效、直观的用户界面时，开发者常常面对的一个挑战是如何优雅地展示大量分组信息，如城市列表或联系人目录。 Flutter社区中的一个明星项目——AzListView，正是为解决这一难题而生。接下来，让我们深入了解AzListV...
Flutter 只需要几步就可以完成级联索引列表（仿微信通讯录/城市索引列表）
qq_38774121的博客
05-18 1706
索引列表、放微信通讯录、城市索引列表
android 城市列表listview,GitHub - kaich/azlistview: Flutter 城市列表，联系人列表，索引&悬停。Flutter CityList View, Cont...
weixin_32475629的博客
05-26 472
azlistviewAzListView，Flutter 城市列表，联系人列表，自定义Header，索引，悬停效果。IndexBar(A-Z 索引Bar)SuspensionView(悬停效果view)AzListView(对SuspensionView & IndexBar封装，方便使用)SuspensionUtilsortListBySuspensionTag(list) 根据[A-Z...
flutter选择城市页面
androidhyf的博客
07-12 1236
【代码】flutter城市选择页面。
Flutter 实现 A ~ Z字母索引列表，带自定义头部 ｜悬浮Header
最新发布
08-23
Flutter 实现 A ~ Z字母索引列表，带自定义头部 ｜悬浮Header
Flutter 侧滑栏及城市选择UI的实现方法
01-06
Flutter简介 Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、...
flutter城市选择插件
03-10
Flutter 城市列表、联系人列表，索引&悬停。基于scrollable_positioned_list. AzListView, SuspensionView, IndexBar. Features 轻松创建城市列表或联系人列表界面。 列表项按A-Z分组。 带有悬停效果Header。 支持...
Flutter学习之旅(六)----ListView控件自定义Adapter以及带参数跳转
07-30
Flutter学习之旅(六)----ListView控件自定义Adapter以及带参数跳转，博客对应地址：http://blog.csdn.net/zhangxiangliang2/article/details/76383244
Android自定义A_Z字母排序ListView，悬停Listview ，字母列表排序
12-27
listview支持顶部悬停，按字母分组排序，右侧带字母列表索引
android列表索引加悬停,Flutter 城市列表AzListView 索引&悬停
weixin_42506152的博客
06-02 815
AzListViewAzListView，Flutter 城市列表，联系人列表，自定义Header，索引，悬停效果。IndexBar(A-Z 索引Bar)SuspensionView(悬停效果view)AzListView(对SuspensionView & IndexBar封装，方便使用)SuspensionUtilsortListBySuspensionTag(list) 根据[A-Z...
推荐开源项目：AzListView - Flutter的理想之选打造精美城市和联系人列表
gitblog_00041的博客
05-15 511
推荐开源项目：AzListView - Flutter的理想之选打造精美城市和联系人列表 azlistviewA Flutter sticky headers & index ListView. Flutter 城市列表、联系人列表，索引&悬停。项目地址:https://gitcode.com/gh_mirrors/az/azlistview 在开发移动端应用时，构建高效且易于导航的城市列表或联...
Flutter 侧滑栏及城市选择UI的实现
dingdegao的博客
07-19 1620
Flutter 侧滑栏UI及城市选择UI的实现 前言   目前移动市场上很多业务都需要开发Android/IOS两个端，开发成本比较高. Flutter 在跨端上凭借着性能优势关注量，使用度也持续上升.今天给大家分享在去年就写的一个Flutter版本的侧滑栏. 实现 先上一张实现效果图 SliderBar 实现   侧边是一个支持手势滑动的SliderBar,一个自定义的StatefulWid...
Flutter 城市/通讯录列表字母索引联动效果实现
谢栋的专栏
04-30 7165
在像通讯录，联系人列表，城市选择列表等数据量比较多的长列表页面中国呢，我们经常会留意到产品设计会在页面的右侧区域提供一个竖向的字母索引列表，供用户点击选择快速定位到长列表中的指定索引位置，以便于用户快速定位到自己要筛选的数据，从而提升用户体验，今天我们就以`城市列表`为例，来剖析一下，这样的体验效果如果用`Flutter`来实现
html 12306页面实现,jQuery模拟12306城市选择框功能简单实现方法示例
weixin_39721853的博客
06-09 305
本文实例讲述了jQuery模拟12306城市选择框功能简单实现方法。分享给大家供大家参考，具体如下：www.jb51.net jQuery城市选择框#parent{width:500px;position:relative;}#text{height:25px;}#select{width:420px;height:185px;position:absolute;top:31px;left:0;b...
Flutter入门学习--(8)列表组件ListView
游响云停专栏
01-22 650
Flutter中的列表组件是ListView,使用该组件可以以列表方式显示内容，和ANDROID中的效果一样的，我们 先看下效果图 代码如下 import 'package:flutter/material.dart'; void main() =&gt; runApp(MyApp()); class MyApp extends StatelessWidget { // This...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值