flutter城市选择页面

import 'dart:convert';import 'package:test/http/DioManager.dart';import 'package:test/http/api/life_api.dart';import 'package:test/util/hex_color.dart';import 'package:test/widget/custom_appbar.dart';import 'package:dio/dio.dart';import 'package:flutter/material.dart';import 'package:flutter/services.dart';import 'package:flutter_screenutil/flutter_screenutil.dart';class CitySearchPage extends StatefulWidget {@overrideState<StatefulWidget> createState() => _CitySearchPageState();}class _CitySearchPageState extends State<CitySearchPage> {List<Map<String, dynamic>> _cityList = List();List<Map<String, dynamic>> _hotCityList = List();List<Map<String, dynamic>> _searchList = List();final TextEditingController cityController = new TextEditingController();Dio _dio = DioManager.getInstance().dio;bool _isSearching = false;@overridevoid initState() {super.initState();loadData();}@overridevoid dispose() {// TODO: implement disposesuper.dispose();}void loadData() async {_hotCityList.add({"id": 1101,"parentId": 11,"name": "北京市","cityCode": "010","level": 2,"letter": "B"});_hotCityList.add({"id": 3101,"parentId": 31,"name": "上海市","cityCode": "021","level": 2,"letter": "S"});_hotCityList.add({"id": 4401,"parentId": 44,"name": "广州市","cityCode": "020","level": 2,"letter": "G"});_hotCityList.add({"id": 3301,"parentId": 33,"name": "杭州市","cityCode": "0571","level": 2,"letter": "H"});_hotCityList.add({"id": 4403,"parentId": 44,"name": "深圳市","cityCode": "0755","level": 2,"letter": "S"});//加载城市列表Response response = await _dio.get(LifeApi.LIFE_QUERY_CITY_LIST);if (response.statusCode == 200 && response.data['code'] == 200) {if (mounted) {setState(() {response.data['data'].forEach((element) => {_cityList.add(element)});});}}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: CustomAppBar(backgroundColor: HexColor('##5dc8b6'),leading: IconButton(onPressed: () {Navigator.pop(context);},icon: Icon(Icons.arrow_back_ios,color: HexColor('#ffffff'),),),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();for (Map<String, dynamic> element in _cityList) {if (element['letter'].contains(value)) {element['cityList'].forEach((item) => {_searchList.add(item)});} else {element['cityList'].forEach((item) => {if (item['name'].contains(value)) {_searchList.add(item)}});}}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]);},);} 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: ListView(children: <Widget>[Container(padding: EdgeInsets.fromLTRB(0, 30.h, 0, 0),child: Column(children: _cityItem(),),)],),),],));}_cityItem() {List<Widget> list = [];_cityList.forEach((element) => {list.add(Container(child: Column(children: _cityItemList(element),),))});return list;}_cityItemList(Map<String, dynamic> element) {List<Widget> list = [];list.add(Container(width: double.infinity,height: 40.h,padding: EdgeInsets.only(left: 40.w, right: 40.w),color: Colors.black.withOpacity(0.1),alignment: Alignment.centerLeft,child: Text('${element['letter']}'),));element['cityList'].forEach((item) => {list.add(GestureDetector(onTap: () {Navigator.pop(context, item);},child: Container(width: double.infinity,height: 80.h,padding: EdgeInsets.only(left: 40.w, right: 40.w),color: Colors.white,alignment: Alignment.centerLeft,child: Text('${item['name']}'),),))});return list;}}

调用

Map<String, dynamic> _selectCity;var result = await NavigatorUtil.push(CitySearchPage());if (result != null) {setState(() {_selectCity = result;});}