带有 ListTiles 和 Button 行的 Flutter 下拉菜单

Posted 2023-05-07

【中文标题】带有 ListTiles 和 Button 行的 Flutter 下拉菜单

【英文标题】：Flutter dropdown menu with ListTiles and row of Buttons

【发布时间】：2020-06-07 00:39:41

【问题描述】：

我正在尝试构建一个如下所示的自定义下拉菜单：

我已经设法在没有下拉菜单的情况下实现了Buttons 的ListTiles 和Row，但我不确定如何将所有这些嵌套在下拉菜单类中。这是我到目前为止所得到的：

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),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  

【参考方案1】：

我不确定您是否可以直接在items: 之后使用ListTile。 如果您确实运行了上面的代码，则会出现错误。 它需要直接返回DropdownMenuItem而不是ListTile

return DropdownMenuItem<String>(
    value: value,
    child: Row(
    children: <Widget>[
        CircleAvatar(backgroundColor: Colors.primaries[3]),
        Text(value)
    ],
));

我觉得上面的代码会比较正确。

【讨论】：

Row 正在重复值

【参考方案2】：

这很简单，首先创建一个下拉菜单小部件，然后将您的小部件赋予一个下拉菜单项

喜欢这个

根据您的对象数组为每个下拉项赋值

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(),

);

【讨论】：

地图 怎么会有 ListTile 的元素？！你运行你的代码吗？