Flutter下如何制作下拉选择
在Flutter中使用DropdownButton Widget可以轻松制作下拉选择。以下是制作下拉选择的步骤:
1.导入下拉选择组件
import 'package:flutter/material.dart';
2.定义下拉选择数据
List<String> _dropdownItems = [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
'Item 5'
];
String _selectedItem = 'Item 1'; // 默认选中的项
3.创建下拉选择Widget
DropdownButton<String>(
value: _selectedItem, // 当前选中的项
items: _dropdownItems.map((String item) {
return DropdownMenuItem<String>(
value: item,
child: Text(item),
);
}).toList(),
onChanged: (String newValue) {
setState(() {
_selectedItem = newValue;
});
},
)
这里使用了DropdownButton Widget来创建下拉选择,其中value表示当前选中的项,items表示下拉列表中的选项,onChanged表示当用户选择下拉列表中的某个选项时触发的回调函数。
4.完整代码示例
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> _dropdownItems = [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
'Item 5'
];
String _selectedItem = 'Item 1';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: DropdownButton<String>(
value: _selectedItem,
items: _dropdownItems.map((String item) {
return DropdownMenuItem<String>(
value: item,
child: Text(item),
);
}).toList(),
onChanged: (String newValue) {
setState(() {
_selectedItem = newValue;
});
},
),
),
);
}
}
这就是制作下拉选择的完整代码,你可以根据自己的需求进行修改和优化。
原文地址: https://www.cveoy.top/t/topic/6K6 著作权归作者所有。请勿转载和采集!