我尝试实现像 youtube 这样的搜索栏,但当我在屏幕底部附近的视图中使用此搜索栏时,我遇到了问题,当我单击此搜索栏键盘时,键盘会弹出,但它会立即关闭,因为空间不足,请帮忙。
class YouTubeSearchBar extends GetView<YouTubeSearchBarController> {
YouTubeSearchBarController youTubeSearchBarController;
List<String> Suggestions;
final String? hintText;
final Color? textColor;
final TextStyle? hintStyle;
YouTubeSearchBar({
super.key,
required this.youTubeSearchBarController,
required this.Suggestions,
this.hintText,
this.textColor,
this.hintStyle,
});
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Row(
children: [
Expanded(
child: AutoCompleteTextField<String>(
key: GlobalKey<AutoCompleteTextFieldState<String>>(),
clearOnSubmit: false,
suggestionsAmount: 50,
style: TextStyle(color: textColor),
suggestions: Suggestions,
keyboardType: TextInputType.text,
controller: controller.searchController,
focusNode: controller.focusNode,
decoration: InputDecoration(
hintText: hintText ?? '',
hintStyle: hintStyle,
filled: true,
fillColor: Color(0xFFFFF7EB),
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderSide:
BorderSide(color: Color(0xFFF9A826), width: 1.0)),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderSide:
BorderSide(color: Color(0xFFF9A826), width: 1.0)),
prefixIcon: Icon(Icons.search),
),
itemBuilder: (context, suggestion) => ListTile(
title: Text(suggestion),
leading: SizedBox(
width: 15,
height: 15,
child: Obx(() => Checkbox(
value: true, // Replace with your logic
onChanged: (bool? value) {},
)),
),
),
itemFilter: (item, input) {
if (input.isBlank!) return true;
return item.toLowerCase().startsWith(input.toLowerCase());
},
itemSorter: (a, b) => a.compareTo(b),
itemSubmitted: (item) {
if (item.isEmpty) {
// Handle when an empty text is submitted (show all suggestions)
print('Show all suggestions');
} else {
// Handle when a non-empty text is submitted
print('Selected item: $item');
}
},
),
),
],
),
),
);
}
}
我正在尝试解决这个键盘 UI 间距问题。
您可以从
viewInsetsOf
添加底部填充
return SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(
top: 5,
left: 5,
right: 5,
bottom: MediaQuery.viewInsetsOf(context).bottom,
),