[英]How do I search in Flutter DropDown button
我在本地 json 中有一個國家名稱列表。 我可以加載我的本地 json 並分配給DropDown button 。 json 文件中有 193 個國家/地區,例如。 如下所示。 如果我想選擇美國,用戶必須一直向下滾動。 如何輸入國家名稱,例如; 如果我用戶輸入 U 或 u,下拉菜單可以進行快速過濾並列出所有以 U 開頭的國家/地區,例如美國。 如何在 Flutter DropDownbutton 項目中搜索?
{
"country": [
{
"countryCode": "AD",
"countryName": "Andorra",
"currencyCode": "EUR",
"isoNumeric": "020"
},
{
"countryCode": "AE",
"countryName": "United Arab Emirates",
"currencyCode": "AED",
"isoNumeric": "784"
},
{
"countryCode": "AF",
"countryName": "Afghanistan",
"currencyCode": "AFN",
"isoNumeric": "004"
},
//...
]
}
您可以改用 searchable_dropdown 包: https : //pub.dev/packages/searchable_dropdown
這是我的示例代碼searchable_dropdown 不適用於類列表
如果您使用類似我的示例的類列表,請確保輸入以下內容
@override
String toString() {
return this.key;
}
一種方法是使用TextEditingController
像這樣過濾你的ListView
:
class YourPage extends StatefulWidget {
@override
State createState() => YourPageState();
}
class YourPageState extends State<YourPage> {
List<Country> countries = new List<Country>();
TextEditingController controller = new TextEditingController();
String filter;
@override
void initState() {
super.initState();
//fill countries with objects
controller.addListener(() {
setState(() {
filter = controller.text;
});
});
}
@override
void dispose() {
super.dispose();
controller.dispose();
}
@override
Widget build(BuildContext context) {
return new Material(
color: Colors.transparent,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Padding(
padding: new EdgeInsets.only(top: 8.0, left: 16.0, right: 16.0),
child: new TextField(
style: new TextStyle(fontSize: 18.0, color: Colors.black),
decoration: InputDecoration(
prefixIcon: new Icon(Icons.search),
suffixIcon: new IconButton(
icon: new Icon(Icons.close),
onPressed: () {
controller.clear();
FocusScope.of(context).requestFocus(new FocusNode());
},
),
hintText: "Search...",
),
controller: controller,
)),
new Expanded(
child: new Padding(
padding: new EdgeInsets.only(top: 8.0),
child: _buildListView()),
)
],
));
}
Widget _buildListView() {
return ListView.builder(
itemCount: countries.length,
itemBuilder: (BuildContext context, int index) {
if (filter == null || filter == "") {
return _buildRow(countries[index]);
} else {
if (countries[index].countryName
.toLowerCase()
.contains(filter.toLowerCase())) {
return _buildRow(countries[index]);
} else {
return new Container();
}
}
});
}
Widget _buildRow(Country c) {
return new ListTile(
title: new Text(
c.countryName,
),
subtitle: new Text(
c.countryCode,
));
}
}
我找到了另一個插件。 它有很多功能(例如InputDecoration
),它看起來像TextFormField()
。 所以你的用戶界面將是相同的。
我推薦你使用這個神奇的插件: dropdown_search
使用 textfield_search: ^0.8.0插件視圖示例
TextFieldSearch(
decoration: InputDecoration(
hintText: "Search",
prefixIcon: Icon(
Icons.search,
color: Colors.black45,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Colors.grey[200],
),
initialList: constants.VEHICLELIST,
label: "label",
controller: selectedVehicle),
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.