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 {
State<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;
void initState() {
super.initState();
loadData();
}
void dispose() {
// TODO: implement dispose
super.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)});
});
}
}
}
Widget 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;
});
}