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 {
  @override
  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;
  @override
  void initState() {
    super.initState();
    loadData();
  }

  @override
  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)});
        });
      }
    }
  }

  @override
  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;
  }
}

调用文章来源地址https://www.toymoban.com/news/detail-692293.html

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

到了这里，关于flutter城市选择页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！