英文:
The height of DropdownSearch is unnecessarily large in flutter
问题
我在Flutter中使用了DropDownSearch，并为其提供了一个menuItems列表。目前，该列表只包含一个单一项，但是下拉菜单非常长，显示了很多空白空间。如何减少它？
我的代码：
Expanded(
child: DropdownSearch<Branch>(
items: userP.branch ?? [],
onChanged: (item) {
setState(() {
_selectedBranch = item;
Provider.of<MainProvider>(context, listen: false)
.setSelectedBranchId(item!.id!);
});
},
selectedItem: _selectedBranch,
dropdownDecoratorProps: const DropDownDecoratorProps(
baseStyle: TextStyle(
overflow: TextOverflow.ellipsis,
),
dropdownSearchDecoration: InputDecoration(
labelText: 'Branch',
labelStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
color: AppColors.textPrimary,
),
floatingLabelAlignment: FloatingLabelAlignment.start,
contentPadding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
border: OutlineInputBorder(),
),
),
itemAsString: (Branch data) {
return data.branchName ?? "";
},
popupProps: PopupPropsMultiSelection.menu(
showSearchBox: false,
fit: FlexFit.tight,
itemBuilder: (context, branch, val) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: DropdownMenuItem(
child: Text(branch.branchName ?? ""),
),
);
},
),
),
),
这是图片：
英文:
I am using DropDownSearch in flutter, and I am giving it a list for menuItems. Currently, it has only a single item in it, but the menu is really long and showing a lot of blank space in it. How can I reduce it??
My code:
Expanded(
child: DropdownSearch<Branch>(
items: userP.branch ?? [],
onChanged: (item) {
setState(() {
_selectedBranch = item;
Provider.of<MainProvider>(context, listen: false)
.setSelectedBranchId(item!.id!);
});
},
selectedItem: _selectedBranch,
dropdownDecoratorProps: const DropDownDecoratorProps(
baseStyle: TextStyle(
overflow: TextOverflow.ellipsis,
),
dropdownSearchDecoration: InputDecoration(
labelText: 'Branch',
labelStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
color: AppColors.textPrimary,
),
floatingLabelAlignment: FloatingLabelAlignment.start,
contentPadding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
border: OutlineInputBorder(),
),
),
itemAsString: (Branch data) {
return data.branchName ?? "";
},
popupProps: PopupPropsMultiSelection.menu(
showSearchBox: false,
fit: FlexFit.tight,
itemBuilder: (context, branch, val) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: DropdownMenuItem(
child: Text(branch.branchName ?? ""),
),
);
},
),
),
),
Here is a picture:
答案1
得分: 1
尝试这个：
popupProps: PopupPropsMultiSelection.menu(
showSearchBox: false,
fit: FlexFit.loose, // << 更改此处
.....
英文:
try this:
popupProps: PopupPropsMultiSelection.menu(
showSearchBox: false,
fit: FlexFit.loose, // << change this
.....
答案2
得分: 1
popupProps 下有一个名为 constraints 的属性，通过它可以设置下拉菜单的高度和宽度。
这是实现方式：
popupProps: PopupPropsMultiSelection.menu(
constraints: BoxConstraints.tight(Size(
MediaQuery.sizeOf(context).width * 0.95,
MediaQuery.sizeOf(context).height * 0.15)),
showSearchBox: false,
fit: FlexFit.tight,
itemBuilder: (context, branch, val) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: DropdownMenuItem(
child: Text(branch),
),
);
},
),
希望这对您有帮助。
英文:
There is a property under popupProps which has an attribute called constraints through which you can set the height and width of the dropdown menu.
This is the implementation:
popupProps: PopupPropsMultiSelection.menu(
constraints: BoxConstraints.tight(Size(
MediaQuery.sizeOf(context).width * 0.95,
MediaQuery.sizeOf(context).height * 0.15)),
showSearchBox: false,
fit: FlexFit.tight,
itemBuilder: (context, branch, val) {
return Padding(
padding: const
EdgeInsets.symmetric(horizontal:8),
child: DropdownMenuItem(
child: Text(branch),
),
);
},
),
Hope this helps you.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论