我想在
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()
扩展到全宽。
任何帮助将不胜感激。
谢谢
使用 DropdownButtonFormField 因为它具有装饰属性。您可以使用 prefixIcon 属性在左侧设置图标。
例子:
DropdownButtonFormField<String>(
decoration: InputDecoration(
prefixIcon: Icon(Icons.person),
),
hint: Text('Please choose account type'),
items: <String>['A', 'B', 'C', 'D'].map((String value) {
return DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (_) {},
),
结果:
没有以您想要的方式添加图标的特定属性,但您始终可以解决您的代码并找到一些调整。使用以下代码将您
Icon()
放在DropDownButton()
按钮的顶部。
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 20.0,
spreadRadius: 0.5,
offset: Offset(1.0, 1.0),
),
],
),
padding: EdgeInsets.only(left: 44.0),
margin: EdgeInsets.only(top: 64.0, left: 16.0, right: 16.0),
child: DropdownButton(
isExpanded: true,
items: your_list.map(
(val) {
return DropdownMenuItem(
value: val,
child: Text(val),
);
},
).toList(),
value: _currentSelectedItem,
onChanged: (value) {
setState(() {
_currentSelectedItem = value;
});
},
),
),
Container(
margin: EdgeInsets.only(top: 80.0, left: 28.0),
child: Icon(
Icons.person,
color: Colors.redAccent,
size: 20.0,
),
),
],
),
);
}
记住,一切都是小部件,所以:
iconSize: 0,
hint: Row(
children: [
Container(
child: Text('Freguesias'),
),
Container(
child: Icon(Icons.arrow_drop_down),
),
],
),
这可能为时已晚。但对即将到来的观众有帮助。
代替使用DropDownButton,我们可以使用DropDownButtonFormField。它具有 decoration 属性。有了这个,我们可以利用prefixIcon属性将图标添加到DropDownButton的左侧:
DropDownButtonFormField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.person, color: Colors.redAccent),
),
...
);
如果图标确实应该在视觉上成为 DropDown 组件的一部分,您可以采用以下路线。它有点 hacky 并且缺乏响应,但它是进行更多实验的开始。我添加了一个完整的工作示例,因此您可以将其复制粘贴到可运行的主飞镖文件中。
简而言之,它使用 Stack 布局,因此图标只是放在下拉组件上。然后我填充文本,以便左侧有空间。
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: MyStatefulWidget(),
),
);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
String dropdownValue = 'One';
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Stack(
children: <Widget>[
DropdownButton<String>(
value: dropdownValue,
//icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Text("$value"),
),
);
}).toList(),
),
Container(
margin: EdgeInsets.symmetric(vertical: 10),
child: Icon(Icons.arrow_downward)),
],
),
),
);
}
}
尝试使用
DropdownButtonFormField
的装饰属性并使用prefixIcon
属性。
DropdownButtonFormField(
isDense: false,
itemHeight: 48,
isExpanded: true,
decoration: InputDecoration(
prefixIcon: Icon(Icons.question_answer_rounded),//Add this line
filled: true,
...
),
...
)
这将在左侧添加一个图标。
将你的图标和下拉小部件包裹在一个行小部件中,嵌套在一个容器中将完成如下工作:
body: Container(
margin: EdgeInsets.only(top: 64.0, left: 16.0, right: 16.0),
color: Colors.white,
child:
child: Row(
children: <Widget>[
Icon(
Icons.person,
color: Colors.redAccent,
size: 20.09,
),
Expanded(
flex:1,
child:DropdownButton(
isExpanded: true,
items: _studentList.map((val) {
return DropdownMenuItem(
value: val,
child: Text(val),
);
}).toList(),
value: _currentSelectedItem,
onChanged: (value) {
setState(() {
_currentSelectedItem = value;
});
},
),
)
]
)
简单的方法是将子属性传递给 DropdownMenuItem,然后你可以传递任何小部件,我创建了一行并传递了行中的图标和文本:
items: <String>['George Green School', 'George Blue School', 'George Red School', 'George Yellow School']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Row(
children: [
Icon(Icons.dangerous),
Text(value, style: TextStyle(fontSize : 12),),
],
),
);
}).toList(),