我想更改DropdownSearch中显示的项目的TextStyle，该项目位于flutter中的dropdown_se

Question

Transform.scale(标度：0.91，child:下拉搜索(验证器：(v)=>v==空"所需字段"：无效的提示："；选择一个国家"；，dropdownSearchDecoration:InputDecoration(

//filled: true,
//fillColor: Theme.of(context).inputDecorationTheme.fillColor,
),
mode: Mode.MENU,
showSelectedItem: false,
items: [
"India",
"Maldeep",
"Austria",
"Phillipins",
"Itly",
],

label: "No of Auto Print",

showClearButton: false,

//onChanged: print,
//popupItemDisabled: (String s) => s.startsWith('I'),
selectedItem: "India",



),
),

在这里，我想更改下拉列表中项目的字体系列。。也属于selectedItem。。请协助。。以及如何更改下拉列表中的箭头图标。。该进程不能作为组件使用。。

Answer 1

为了设置selectedItem的样式，您可以使用下面代码片段中提到的自定义小部件。您可以将FontFamily包含在小部件的TextStyle属性中。

Widget _customDropDownAddress(
BuildContext context, _addressFilteredName, String itemDesignation) {
return Container(
child: Text(
_addressFilteredName.toString(),
style: TextStyle(
fontSize: 10,
color: Colors.green,
)
)); }

并且可以将此自定义小部件用作下拉生成器。

DropdownSearch<UserModel>(
mode: Mode.BOTTOM_SHEET,
maxHeight: 700,
isFilteredOnline: true,
showClearButton: true,
showSearchBox: true,
label: 'Address',
dropdownSearchDecoration: InputDecoration(
filled: true,
fillColor: Theme.of(context).inputDecorationTheme.fillColor,
),
onFind: (String filter) => getData(filter),
onChanged: (data) {
print(data);
},
dropdownBuilder: _customDropDownAddress,
popupItemBuilder: _customPopupItemBuilderExample,
popupSafeArea: PopupSafeArea(top: true, bottom: true),
scrollbarProps: ScrollbarProps(
isAlwaysShown: true,
thickness: 7,
),
),

这将有助于向所选项目添加任何适用的样式。

Answer 2

我通过在这个生成器上创建两个函数来定制下拉菜单

return SizedBox(
height: 300,
child: AlertDialog(
content: DropdownSearch<String>(
dropdownSearchBaseStyle:
TextStyle(
fontFamily: 'MeQuran2'),
showSearchBox: true,
mode: Mode.DIALOG,
showSelectedItems: true,
dropdownBuilder: _style,
popupItemBuilder: _style1,
items: list,
dropdownSearchDecoration:
InputDecoration(
labelText: "Word Detail",
hintText: "word type detail",
),
onChanged: print,
selectedItem:
aya.wordName[index].name,
),),);

这是具有自定义textsyle 的两个小部件

Widget _style(BuildContext context, String? selectedItem) {
return Text(
selectedItem!,
style: TextStyle(fontFamily: 'MeQuran2'),
);
}
Widget _style1(BuildContext context, String? item, bool isSelected) {
return Directionality(
textDirection: TextDirection.rtl,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
item!,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'MeQuran2',
color: isSelected ? Colors.cyanAccent : null),
),
),
);
}

Answer 3

如果你查看包的源代码，我相信你无法更改下拉菜单中文本的textStyle。

对于箭头图标，DropdownSearch有dropDownButton。

DropdownSearch<String>(
dropDownButton: Icon(Icons.ac_unit) // icon of your choice
)

Answer 4

您可以为自定义外观添加参数dropdownBuilder。以下是使用水平ListView:的实现

Widget _customDropDown(BuildContext context, List<String> selectedItems) {
List<Widget> list = [];
if (selectedItems.isEmpty) return Text('Hint text');
for (var item in selectedItems) {
list.add(Padding(
padding: const EdgeInsets.all(4.0),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade300),
borderRadius: BorderRadius.circular(20.0),
color: Colors.grey.shade300,
),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Center(
child: Text(
item,
)),
)),
));
}
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: list.length,
itemBuilder: (context, index) {
return list[index];
});
}

Answer 5

我遇到了同样的问题，该包使用了当前主题中的TextStyle，因此您可以执行以下操作：

Theme(
data: ThemeData(
textTheme: const TextTheme(subtitle1: TextStyle(fontSize: 22))
),
child: DropdownSearch<String>(),
);