flutter如何实现省市区选择器
在Flutter中,你可以使用CupertinoPicker
或ListWheelScrollView
来实现一个省市区的选择器。以下是一个简单的例子,使用CupertinoPicker
来创建三个轮询选择器,分别代表省、市、区。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CityPickerPage(),
);
}
}
class CityPickerPage extends StatefulWidget {
@override
_CityPickerPageState createState() => _CityPickerPageState();
}
class _CityPickerPageState extends State<CityPickerPage> {
String selectedProvince = '省';
String selectedCity = '市';
String selectedArea = '区';
final List<String> provinces = ['省1', '省2', '省3'];
final List<String> cities = ['城市1', '城市2', '城市3'];
final List<String> areas = ['区域1', '区域2', '区域3'];
void _onProvinceSelected(String province) {
setState(() {
selectedProvince = province;
});
}
void _onCitySelected(String city) {
setState(() {
selectedCity = city;
});
}
void _onAreaSelected(String area) {
setState(() {
selectedArea = area;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('省市区选择器'),
),
body: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: CupertinoPicker(
itemExtent: 32.0,
onSelectedItemChanged: _onProvinceSelected,
children: provinces.map((String province) {
return Text(province);
}).toList(),
),
),
Expanded(
child: CupertinoPicker(
itemExtent: 32.0,
onSelectedItemChanged: _onCitySelected,
children: cities.map((String city) {
return Text(city);
}).toList(),
),
),
Expanded(
child: CupertinoPicker(
itemExtent: 32.0,
onSelectedItemChanged: _onAreaSelected,
children: areas.map((String area) {
return Text(area);
}).toList(),
评论已关闭