Flutter 颤振下拉按钮-为分离项目添加标题

我正在尝试实现一个

下拉按钮

，它可以用一个标题将特定的项目彼此分开（请参见下图中所需的输出，标题为绿色）

就像在示例中一样，我想将这些绿色标题添加到现有的

下拉按钮

，但没有找到任何东西向我展示如何向

下拉按钮

我还尝试使用

expansionfile

从

DropdownButton

切换到

ListView

，但我希望保持

DropdownButton

的行为

---

是否可以将这些标题添加到

下拉按钮

项目

？或者我应该试着用另一种方法来实现它吗？我现在陷入困境，不知道如何继续

在dartpad中尝试以下代码：

 import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return HomeScreen();
  }
}

class HomeScreen extends StatefulWidget {
  @override
  HomeScreenState createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  String dropdownValue;
  List<Product> products = [
    Product(name: 'sep1', type: 'sep'),
    Product(name: 'milk', type: 'data'),
    Product(name: 'oil', type: 'data'),
    Product(name: 'sep2', type: 'sep'),
    Product(name: 'suger', type: 'data'),
    Product(name: 'salt', type: 'data'),
    Product(name: 'sep3', type: 'sep'),
    Product(name: 'potatoe', type: 'data'),
    Product(name: 'tomatoe', type: 'data'),
    Product(name: 'apple', type: 'data'),
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('text')),
      body: Column(
        children: [
          Text('test'),
          Expanded(
            child: DropdownButton<String>(
              value: dropdownValue,
              items: products.map((value) {
                return DropdownMenuItem(
                  value: value.name,
                  child: value.type == 'data'
                      ? Text(value.name)
                      : Divider(
                          color: Colors.red,
                          thickness: 3,
                        ),
                );
              }).toList(),
              onChanged: (newValue) {
                
                setState(() {
                  
                    dropdownValue = newValue;
                  
                });
                print('$newValue $dropdownValue');
                
              },
            ),
          ),
        ],
      ),
    );
  }
}

class Product {
  String name;
  String type;

  Product({this.name, this.type});
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp(
材料聚丙烯(
debugShowCheckedModeBanner:false，
主页：MyApp（），
),
);
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回主屏幕（）；
}
}
类主屏幕扩展StatefulWidget{
@凌驾
HomeScreenState createState（）=>HomeScreenState（）；
}
类HomeScreenState扩展状态{
字符串下拉值；
列出产品=[
产品（名称：“sep1”，类型：“sep”），
产品（名称：“牛奶”，类型：“数据”），
产品（名称：“油”，类型：“数据”），
产品（名称：“sep2”，类型：“sep”），
产品（名称：“suger”，类型：“data”），
产品（名称：'salt'，类型：'data'），
产品（名称：“sep3”，类型：“sep”），
产品（名称：“potatoe”，类型：“data”），
产品（名称：“tomatoe”，类型：“data”），
产品（名称：“苹果”，类型：“数据”），
];
@凌驾
void initState（）{
super.initState（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：Text（'Text'）），
正文：专栏(
儿童：[
文本（“测试”），
扩大(
孩子：下拉按钮(
value:dropdownValue，
项目：products.map（（值）{
返回下拉菜单项(
value:value.name，
子项：value.type==“数据”
？文本（值、名称）
：分隔器(
颜色：颜色，红色，
厚度：3，
),
);
}).toList（），
一旦更改：（newValue）{
设置状态（）{
dropdownValue=newValue；
});
打印（“$newValue$dropdownValue”）；
},
),
),
],
),
);
}
}
类产品{
字符串名；
字符串类型；
产品（{this.name，this.type}）；
}

除了Ali Tenni的答案之外，您还可以将DropdownMenuItem子类化如下：

类DropdownMenuItemSeparator扩展了DropdownMenuItem{
DropdownMenuItemSeparator（）：super（child:Container（））；//欺骗断言。
@凌驾
小部件构建（构建上下文）{
回流隔板（厚度：3）；
}
}

这将使分隔符更窄，因为否则默认的

build（）

会增加一些最小高度。这解决了两个问题之一

不幸的是，第二个也是更大的问题是，分离器仍然可以攻丝，攻丝关闭下拉菜单。为了解决这个问题，我向Flatter提交了一个功能请求：

---

我相信没有一款小部件能完全满足您的需求。当前可用的flatterwidget是为移动设备创建的，这种下拉列表中的标题占用了大量空间，并且往往难以使用。我也没有找到任何可以复制这个的软件包。您很可能需要自己构建它。感谢您的努力！很好的解决办法，但一个集成的下拉项目分隔将是非常好的！但由于我已经问了一年了，我建议这将是实现下拉分隔符的最佳方式。。。我将标记为回答我希望这对您有所帮助感谢您的回答&感谢您为Flitter团队填写功能请求！它希望他们考虑到这一点，并添加一个解决方案，使下拉菜单中的子菜单，这是不可选择的呵呵^^