本文介绍了具有ListTiles和Button行的Flutter下拉菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试构建一个如下所示的自定义下拉菜单:
I'm trying to build out a custom dropdown menu that looks like this:
我设法实现了Buttons
的ListTiles
和Row
而没有下拉菜单,但是我不确定如何将所有这些嵌套在下拉菜单类中.这是到目前为止我得到的:
I've managed to implement the ListTiles
and Row
of Buttons
without the dropdown, but I'm not sure how to nest all of that within a dropdown menu class. This is what I've got so far:
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(),
body: SizedBox.expand(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[0]),
title: Text('All Circles'),
),
Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[1]),
title: Text('Pickup'),
),
Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[2]),
title: Text('Kappa Delta'),
),
Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[3]),
title: Text('Ok Boomer'),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("Join a Circle"),
color: Color(0xffb74093),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red),
),
),
RaisedButton(
child: Text("Create a Circle"),
color: Colors.red,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red),
),
),
],
),
],
),
),
),
);
}
}
推荐答案
这很简单,首先创建一个下拉菜单小部件,然后将您的小部件提供给下拉菜单项
this is very simple first create a drop-down menu widget and then give your widget to a drop-down menu item
像这样
根据您的对象数组为每个下拉菜单项赋值
give value to each drop-down item according to your objects array
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 ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[0]),
title: Text(value),
);
})
.toList(),
);
这篇关于具有ListTiles和Button行的Flutter下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!