仅在用户输入 flutter 时使用 TypeAheadField 显示建议
Show suggestion using TypeAheadField only when user type flutter
我使用 TypeAheadField
包创建了一个包含建议的文本字段。我只想在用户键入时显示建议(而不是在用户点击文本字段时)。但正如在酒吧 [https://pub.dev/packages/flutter_typeahead][1] 上展示的那样,这个例子正是我要找的。
我的代码:
TypeAheadField(
textFieldConfiguration:
TextFieldConfiguration(
autofocus: false,
decoration: InputDecoration(
border: InputBorder.none,
focusedBorder:
InputBorder.none,
enabledBorder:
InputBorder.none,
errorBorder:
InputBorder.none,
disabledBorder:
InputBorder.none,
hintText: localization
.insertCustomerName,
),
controller:
_typeAheadController,
),
suggestionsCallback:
(pattern) async {
return await getSuggestions(
pattern);
},
hideSuggestionsOnKeyboardHide:
true,
hideOnEmpty: true,
itemBuilder: (context,
String suggestion) {
return Padding(
padding:
const EdgeInsets.all(
10.0),
child: Text(
suggestion,
),
);
},
onSuggestionSelected:
(String suggestion) {
_typeAheadController.text =
suggestion;
},
),
在您的 suggestionsCallback
函数中,您可以尝试这样的操作:
suggestionsCallback: (pattern) async {
if (pattern != null && pattern.length > 0) {
return await getSuggestions(pattern);
} else {
return [];
}
},
它对我来说很好。
TypeAheadFormField(
direction: AxisDirection.down,
textFieldConfiguration: TextFieldConfiguration(
controller: controller,
style: primary14PxNormal.apply(color: blackColor),
autofocus: false,
enabled: true,
decoration: InputDecoration(
fillColor: whiteColor,
filled: true,
focusedBorder: textFormFieldBorderStyle,
disabledBorder: textFormFieldBorderStyle,
enabledBorder: textFormFieldBorderStyle,
errorBorder: textFormFieldBorderStyle,
focusedErrorBorder: textFormFieldBorderStyle,
contentPadding: EdgeInsets.fromLTRB(10.0, 16.0, 10.0, 16.0),
hintText: "Choose a Project",
hintStyle: primary14PxBold.copyWith(fontSize: isDisplayDesktop(context) ? 15 : 12,
fontWeight: FontWeight.w500,
color: hintTextColor),
border: new OutlineInputBorder(borderSide: new BorderSide(color: borderColor)),
suffixIcon: Icon(Icons.arrow_drop_down, color: primaryColor)),
onChanged: (text) {
setState(() {
clearCallback!();
});
},
),
validator: (value) {
return validationFunction != null ? validationFunction(value) : null;
},
suggestionsBoxDecoration: SuggestionsBoxDecoration(color: whiteColor),
suggestionsCallback: (pattern) async {
List<String> searchCityArray = [];
if(controller.text.length > 0){
searchCityArray.add(pattern);
return searchCityArray;
}
return searchCityArray;
},
errorBuilder: (context, error) {
return ListTile(
title: Text(
error.toString(),
style: primary14PxNormal.copyWith(color: titleColor),
),
);
},
itemBuilder: (context, String? project) {
return project == null
? new Container()
: ListTile(
title: Text(
project,
style: primary14PxNormal.copyWith(color: titleColor),
),
);
},
onSuggestionSelected: (String? suggestion) {
setState(() {
if (suggestion != null) {
FocusScope.of(context).unfocus();
controller.text = suggestion;
if (selectionCallBack != null) {
selectionCallBack(suggestion);
}
}
});
});
我使用 TypeAheadField
包创建了一个包含建议的文本字段。我只想在用户键入时显示建议(而不是在用户点击文本字段时)。但正如在酒吧 [https://pub.dev/packages/flutter_typeahead][1] 上展示的那样,这个例子正是我要找的。
我的代码:
TypeAheadField(
textFieldConfiguration:
TextFieldConfiguration(
autofocus: false,
decoration: InputDecoration(
border: InputBorder.none,
focusedBorder:
InputBorder.none,
enabledBorder:
InputBorder.none,
errorBorder:
InputBorder.none,
disabledBorder:
InputBorder.none,
hintText: localization
.insertCustomerName,
),
controller:
_typeAheadController,
),
suggestionsCallback:
(pattern) async {
return await getSuggestions(
pattern);
},
hideSuggestionsOnKeyboardHide:
true,
hideOnEmpty: true,
itemBuilder: (context,
String suggestion) {
return Padding(
padding:
const EdgeInsets.all(
10.0),
child: Text(
suggestion,
),
);
},
onSuggestionSelected:
(String suggestion) {
_typeAheadController.text =
suggestion;
},
),
在您的 suggestionsCallback
函数中,您可以尝试这样的操作:
suggestionsCallback: (pattern) async {
if (pattern != null && pattern.length > 0) {
return await getSuggestions(pattern);
} else {
return [];
}
},
它对我来说很好。
TypeAheadFormField(
direction: AxisDirection.down,
textFieldConfiguration: TextFieldConfiguration(
controller: controller,
style: primary14PxNormal.apply(color: blackColor),
autofocus: false,
enabled: true,
decoration: InputDecoration(
fillColor: whiteColor,
filled: true,
focusedBorder: textFormFieldBorderStyle,
disabledBorder: textFormFieldBorderStyle,
enabledBorder: textFormFieldBorderStyle,
errorBorder: textFormFieldBorderStyle,
focusedErrorBorder: textFormFieldBorderStyle,
contentPadding: EdgeInsets.fromLTRB(10.0, 16.0, 10.0, 16.0),
hintText: "Choose a Project",
hintStyle: primary14PxBold.copyWith(fontSize: isDisplayDesktop(context) ? 15 : 12,
fontWeight: FontWeight.w500,
color: hintTextColor),
border: new OutlineInputBorder(borderSide: new BorderSide(color: borderColor)),
suffixIcon: Icon(Icons.arrow_drop_down, color: primaryColor)),
onChanged: (text) {
setState(() {
clearCallback!();
});
},
),
validator: (value) {
return validationFunction != null ? validationFunction(value) : null;
},
suggestionsBoxDecoration: SuggestionsBoxDecoration(color: whiteColor),
suggestionsCallback: (pattern) async {
List<String> searchCityArray = [];
if(controller.text.length > 0){
searchCityArray.add(pattern);
return searchCityArray;
}
return searchCityArray;
},
errorBuilder: (context, error) {
return ListTile(
title: Text(
error.toString(),
style: primary14PxNormal.copyWith(color: titleColor),
),
);
},
itemBuilder: (context, String? project) {
return project == null
? new Container()
: ListTile(
title: Text(
project,
style: primary14PxNormal.copyWith(color: titleColor),
),
);
},
onSuggestionSelected: (String? suggestion) {
setState(() {
if (suggestion != null) {
FocusScope.of(context).unfocus();
controller.text = suggestion;
if (selectionCallBack != null) {
selectionCallBack(suggestion);
}
}
});
});