我想在DropDownButton
的左边添加图标,但是找不到方法,我想实现的是这样的:
我试过下面的代码,但它的地方图标的权利,我不希望它,它也覆盖箭头图标:
`@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
margin: EdgeInsets.only(top: 64.0, left: 16.0, right: 16.0),
color: Colors.white,
child: DropdownButton(
icon: Icon(
Icons.person,
color: Colors.redAccent,
size: 20.09,
),
isExpanded: true,
items: _studentList.map((val) {
return DropdownMenuItem(
value: val,
child: Text(val),
);
}).toList(),
value: _currentSelectedItem,
onChanged: (value) {
setState(() {
_currentSelectedItem = value;
});
},
),
),
);
}`
上面代码的输出是这样的:
我还尝试将Icon()
和DropDownButton()
放在Row()
小部件中,但这不允许DropDownButton()
扩展到全宽。
任何帮助都将不胜感激。
谢谢
8条答案
按热度按时间ltskdhd11#
使用DropdownButtonFormField,因为它具有decoration属性,您可以使用prefixIcon属性设置左侧图标。
示例:
结果:
7gs2gvoe2#
没有特定的属性来按照你想要的方式添加图标,但是你可以在你的代码中找到一些调整。使用下面的代码,它会把你的
Icon()
放在你的DropDownButton()
按钮的顶部。6l7fqoea3#
记住,一切都是小部件,所以:
yduiuuwa4#
这可能太晚了。但对即将到来的观众会有帮助。
不使用DropDownButton,我们可以使用DropDownButtonFormField。它有一个decoration属性。这样我们就可以利用prefixIcon属性在DropDownButton的左侧添加图标:
zazmityj5#
如果图标真的应该是DropDown组件的视觉部分,你可以走下面的路线。它有点黑客,缺乏响应,但它是更多实验的开始。我添加了一个完整的工作示例,所以你可以复制粘贴到一个可运行的主dart文件。
简而言之,它使用了堆栈布局,所以图标只是放在下拉组件上。然后我填充了文本,以便左侧有空间。
guykilcj6#
尝试使用
DropdownButtonFormField
的装饰属性和使用prefixIcon
属性。这将在左侧添加一个图标。
f8rj6qna7#
将你的图标和下拉窗口小部件 Package 在一个行小部件中,嵌套在一个容器中将完成如下工作:
ru9i0ody8#
简单的方法是将child prop传递给DropdownMenuItem,然后可以传递任何小部件,我已经创建了一行并在行中传递了图标和文本: