Flutter自动补全文本插件autocompeletetxtfield的使用
Flutter自动补全文本插件autocompeletetxtfield的使用
autocompeletetxtfield 是一个用于在文本字段中自动完成输入的新 Flutter 小部件。它非常易于实现，并且可以根据给定的建议自动填充文本。
开始使用
要开始使用此插件，请在 pubspec.yaml 文件中添加以下依赖项：
dependencies:
autocompeletetxtfield: ^0.0.5
然后运行 flutter pub get 来安装该插件。
示例
简单示例
完整示例
你可以在以下代码中看到完整的示例：
import 'package:flutter/material.dart';
import 'AutoCompeleteTxtField/MultiAutoCompeleteTxtField.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
List<String> countries;
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: mainPage()
);
}
}
class mainPage extends StatefulWidget {
[@override](/user/override)
_MainState createState() => _MainState();
}
class _MainState extends State<mainPage> {
List<String> countries;
[@override](/user/override)
void initState() {
countries = [
"Egypt", "USA", "UK", "Russia", "France", "Spain", "Itally", "San Andrias",
"Estonia", "Ecuador", "Eran", "Ethiopia", "Etria", "Erangle"
];
super.initState();
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(),
body: Column(
children: <Widget>[
AutoCompeleteTextField(
decoration: InputDecoration(
labelText: 'Search',
border: OutlineInputBorder()
),
suggestions: countries,
listElevation: 9.0,
collapsed: true,
onTextSubmited: (val) {
// 处理提交的值
},
),
AutoCompeleteTextField(
decoration: InputDecoration(
labelText: 'Search',
border: UnderlineInputBorder()
),
suggestions: countries,
listElevation: 6.0,
collapsed: false,
width: 200.0,
onTextSubmited: (val) {
// 处理提交的值
},
),
],
)
);
}
}
完整示例代码
import 'package:flutter/material.dart';
import 'package:autocompeletetxtfield/autocompeletetxtfield.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
List<String> countries;
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: MainPage()
);
}
}
class MainPage extends StatefulWidget {
[@override](/user/override)
_MainState createState() => _MainState();
}
class _MainState extends State<MainPage> {
List<String> countries;
var width, hight;
var clr;
var currItem = 0;
[@override](/user/override)
void initState() {
countries = [
"Afghanistan", "Albania", "Algeria", "American Samoa", "Andorra", "Angola",
"Anguilla", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia",
"Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas (the)", "Bahrain",
"Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda",
"Bhutan", "Bolivia (Plurinational State of)", "Bonaire, Sint Eustatius and Saba",
"Bosnia and Herzegovina", "Botswana", "Bouvet Island", "Brazil",
"British Indian Ocean Territory (the)", "Brunei Darussalam", "Bulgaria",
"Burkina Faso", "Burundi", "Cabo Verde", "Cambodia", "Cameroon", "Canada",
"Cayman Islands (the)", "Central African Republic (the)", "Chad", "Chile",
"China", "Christmas Island", "Cocos (Keeling) Islands (the)", "Colombia",
"Comoros (the)", "Congo (the Democratic Republic of the)", "Congo (the)",
"Cook Islands (the)", "Costa Rica", "Croatia", "Cuba", "Curaçao", "Cyprus",
"Czechia", "Côte d'Ivoire", "Denmark", "Djibouti", "Dominica",
"Dominican Republic (the)", "Ecuador", "Egypt", "El Salvador",
"Equatorial Guinea", "Eritrea", "Estonia", "Eswatini", "Ethiopia",
"Falkland Islands (the) [Malvinas]", "Faroe Islands (the)", "Fiji",
"Finland", "France", "French Guiana", "French Polynesia",
"French Southern Territories (the)", "Gabon", "Gambia (the)", "Georgia",
"Germany", "Ghana", "Gibraltar", "Greece", "Greenland", "Grenada",
"Guadeloupe", "Guam", "Guatemala", "Guernsey", "Guinea", "Guinea-Bissau",
"Guyana", "Haiti", "Heard Island and McDonald Islands", "Holy See (the)",
"Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia",
"Iran (Islamic Republic of)", "Iraq", "Ireland", "Isle of Man", "Israel",
"Italy", "Jamaica", "Japan", "Jersey", "Jordan", "Kazakhstan", "Kenya",
"Kiribati", "Korea (the Democratic People's Republic of)", "Korea (the Republic of)",
"Kuwait", "Kyrgyzstan", "Lao People's Democratic Republic (the)", "Latvia",
"Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania",
"Luxembourg", "Macao", "Madagascar", "Malawi", "Malaysia", "Maldives",
"Mali", "Malta", "Marshall Islands (the)", "Martinique", "Mauritania",
"Mauritius", "Mayotte", "Mexico", "Micronesia (Federated States of)",
"Moldova (the Republic of)", "Monaco", "Mongolia", "Montenegro", "Montserrat",
"Morocco", "Mozambique", "Myanmar", "Namibia", "Nauru", "Nepal",
"Netherlands (the)", "New Caledonia", "New Zealand", "Nicaragua",
"Niger (the)", "Nigeria", "Niue", "Norfolk Island", "Northern Mariana Islands (the)",
"Norway", "Oman", "Pakistan", "Palau", "Palestine, State of", "Panama",
"Papua New Guinea", "Paraguay", "Peru", "Philippines (the)", "Pitcairn",
"Poland", "Portugal", "Puerto Rico", "Qatar", "Republic of North Macedonia",
"Romania", "Russian Federation (the)", "Rwanda", "Réunion", "Saint Barthélemy",
"Saint Helena, Ascension and Tristan da Cunha", "Saint Kitts and Nevis",
"Saint Lucia", "Saint Martin (French part)", "Saint Pierre and Miquelon",
"Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe",
"Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore",
"Sint Maarten (Dutch part)", "Slovakia", "Slovenia", "Solomon Islands",
"Somalia", "South Africa", "South Georgia and the South Sandwich Islands",
"South Sudan", "Spain", "Sri Lanka", "Sudan (the)", "Suriname",
"Svalbard and Jan Mayen", "Sweden", "Switzerland", "Syrian Arab Republic",
"Taiwan (Province of China)", "Tajikistan", "Tanzania, United Republic of",
"Thailand", "Timor-Leste", "Togo", "Tokelau", "Tonga", "Trinidad and Tobago",
"Tunisia", "Turkey", "Turkmenistan", "Turks and Caicos Islands (the)",
"Tuvalu", "Uganda", "Ukraine", "United Arab Emirates (the)",
"United Kingdom of Great Britain and Northern Ireland (the)",
"United States Minor Outlying Islands (the)", "United States of America (the)",
"Uruguay", "Uzbekistan", "Vanuatu", "Venezuela (Bolivarian Republic of)",
"Viet Nam", "Virgin Islands (British)", "Virgin Islands (U.S.)",
"Wallis and Futuna", "Western Sahara", "Yemen", "Zambia", "Zimbabwe",
"Åland Islands"
];
clr = Colors.white;
super.initState();
}
ScrollController scrollcontroller = ScrollController();
[@override](/user/override)
Widget build(BuildContext context) {
width = MediaQuery.of(context).size.width;
hight = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text("Auto Complete Text Field"),
),
body: Stack(
children: <Widget>[
lstView(),
searchBar()
],
)
);
}
ListView lstView() => ListView.builder(
itemCount: countries.length,
padding: EdgeInsets.only(top: 80),
controller: scrollcontroller,
itemBuilder: (context, index) => Card(
color: index == currItem ? Colors.green : clr,
elevation: 5,
child: ListTile(
onTap: () {
print(scrollcontroller.offset);
},
title: Text(countries[index]),
),
)
);
Widget searchBar() => Positioned(
top: 10,
left: 5,
right: 5,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
AutoCompeleteTextField(
suggestions: countries,
collapsed: false,
listElevation: 5.0,
width: (width) - 30.0,
decoration: InputDecoration(
border: UnderlineInputBorder(
borderRadius: BorderRadius.circular(10)
),
labelText: "Search Here",
filled: true,
fillColor: Colors.white,
),
onTextSubmited: (value) {
var index = countries.indexOf(value);
scrollcontroller.animateTo(
index * 61.0,
duration: Duration(seconds: 1),
curve: Curves.fastOutSlowIn
).then((val) {
setState(() {
currItem = index;
});
});
},
)
],
)
);
}
更多关于Flutter自动补全文本插件autocompeletetxtfield的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter自动补全文本插件autocompeletetxtfield的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何在Flutter中使用autocomplete_textfield插件来实现自动补全文本功能的代码示例。这个插件可以帮助你创建一个带有自动补全功能的文本输入框。
首先，你需要在你的pubspec.yaml文件中添加autocomplete_textfield依赖：
dependencies:
flutter:
sdk: flutter
autocomplete_textfield: ^2.0.0 # 请确保使用最新版本
然后，运行flutter pub get来安装依赖。
接下来，你可以在你的Flutter项目中使用这个插件。以下是一个简单的示例，展示了如何使用AutoCompleteTextField来实现自动补全功能：
import 'package:flutter/material.dart';
import 'package:autocomplete_textfield/autocomplete_textfield.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AutoCompleteTextField Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AutoCompleteDemo(),
);
}
}
class AutoCompleteDemo extends StatefulWidget {
@override
_AutoCompleteDemoState createState() => _AutoCompleteDemoState();
}
class _AutoCompleteDemoState extends State<AutoCompleteDemo> {
final List<String> suggestions = [
'Apple',
'Banana',
'Cherry',
'Date',
'Elderberry',
'Fig',
'Grape',
'Honeydew',
'Indian Fig',
'Jackfruit',
];
final TextEditingController controller = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AutoCompleteTextField Demo'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
AutoCompleteTextField<String>(
controller: controller,
suggestions: suggestions,
decoration: InputDecoration(
labelText: 'Type a fruit name',
suffixIcon: IconButton(
icon: Icon(Icons.clear),
onPressed: () {
controller.clear();
},
),
),
clearOnSubmit: false,
submitOnSuggestionTap: true,
onSuggestionSelected: (suggestion) {
// Handle the selected suggestion
print('Selected suggestion: $suggestion');
},
onTextChanged: (text) {
// Handle text changes if needed
print('Text changed: $text');
},
),
],
),
),
);
}
}
代码解释：
-
依赖添加：在
pubspec.yaml文件中添加了autocomplete_textfield依赖。 -
MaterialApp：创建一个基本的Flutter应用。
-
AutoCompleteDemo：这是一个包含自动补全功能的页面。
-
suggestions：这是一个包含建议项的字符串列表。
-
TextEditingController：用于控制文本输入框的内容。
-
AutoCompleteTextField：这是核心组件，用于创建带有自动补全功能的文本输入框。
controller：绑定到TextEditingController，用于控制文本输入。suggestions：提供自动补全的建议列表。decoration：输入框的装饰，包括标签文本和后缀图标（清除按钮）。clearOnSubmit：提交时是否清除文本。submitOnSuggestionTap：点击建议项时是否提交。onSuggestionSelected：选择建议项时的回调函数。onTextChanged：文本变化时的回调函数。
这个示例展示了如何使用autocomplete_textfield插件来实现一个简单的自动补全功能。你可以根据自己的需求进一步定制和扩展这个示例。
