flutter城市选择页面

**Flutter 城市选择页面**

在 Flutter 应用中，城市选择页面是常见的功能之一。用户需要从一个列表中选择他们想要的城市。下面我们将一步步地实现这个功能。

###1. 页面布局首先，我们需要设计页面的布局。我们使用 `ListView` 来展示城市列表，并使用 `BottomNavigationBar` 来提供导航选项。

dartimport 'package:flutter/material.dart';

class CitySelectPage extends StatefulWidget {
 @override _CitySelectPageState createState() => _CitySelectPageState();
}

class _CitySelectPageState extends State {
 List cities = [
 "北京",
 "上海",
 "广州",
 "深圳",
 "天津",
 // ...
 ];

 @override Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text("城市选择"),
 ),
 body: ListView.builder(
 itemCount: cities.length,
 itemBuilder: (context, index) {
 return ListTile(
 title: Text(cities[index]),
 trailing: Checkbox(
 value: false,
 onChanged: (value) {},
 ),
 );
 },
 ),
 bottomNavigationBar: BottomNavigationBar(
 items: [
 BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
 BottomNavigationBarItem(icon: Icon(Icons.map), label: "地图"),
 BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
 ],
 currentIndex:0,
 onTap: (index) {},
 ),
 );
 }
}

dartclass CitySelectPage extends StatefulWidget {
 @override _CitySelectPageState createState() => _CitySelectPageState();
}

class _CitySelectPageState extends State {
 List cities = [
 "北京",
 "上海",
 "广州",
 "深圳",
 "天津",
 // ...
 ];

 Map selectedCities = {};

 @override Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text("城市选择"),
 ),
 body: ListView.builder(
 itemCount: cities.length,
 itemBuilder: (context, index) {
 String city = cities[index];
 bool isSelected = selectedCities[city] ?? false;
 return ListTile(
 title: Text(city),
 trailing: Checkbox(
 value: isSelected,
 onChanged: (value) {
 setState(() {
 selectedCities[city] = value;
 });
 },
 ),
 );
 },
 ),
 bottomNavigationBar: BottomNavigationBar(
 items: [
 BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
 BottomNavigationBarItem(icon: Icon(Icons.map), label: "地图"),
 BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
 ],
 currentIndex:0,
 onTap: (index) {
 if (index ==1) {
 // 跳转到地图页面 Navigator.push(
 context,
 MaterialPageRoute(builder: (context) => MapPage()),
 );
 }
 },
 ),
 );
 }
}

dartimport 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapPage extends StatefulWidget {
 @override _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State {
 GoogleMapController _mapController;

 @override Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text("地图"),
 ),
 body: GoogleMap(
 onMapCreated: (controller) {
 setState(() {
 _mapController = controller;
 });
 },
 initialCameraPosition: CameraPosition(
 target: LatLng(39.9042,116.4074),
 zoom:12,
 ),
 markers: {
 Marker(
 markerId: MarkerId("marker"),
 position: LatLng(39.9042,116.4074),
 icon: BitmapDescriptor.defaultMarker,
 ),
 },
 ),
 );
 }
}