Flutter DropdownButton - 添加标题以分隔项目

Question

我正在尝试实现一个DropdownButton，它可以通过标题将特定项目彼此分开（请参阅下图中所需的输出，标题为绿色）

就像在示例中一样，我想将这些绿色标题添加到我现有的 DropdownButton，但没有找到任何东西告诉我如何向 DropdownButton 添加项目以外的东西

我还尝试使用ExpansionTile 从DropdownButton 切换到ListView，但我想保持DropdownButton 的行为...

是否可以将这些标题添加到DropdownButton items？或者我应该尝试通过其他方式来实现它？我现在卡住了，不知道如何继续

Answer 1

在 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});
}

Answer 2

除了 Ali Tenni 的回答，您还可以像这样子类DropdownMenuItem：

class DropdownMenuItemSeparator<T> extends DropdownMenuItem<T> {
  DropdownMenuItemSeparator() : super(
    enabled: false,     // As of Flutter 2.5.
    child: Container(), // Trick the assertion.
  ); 

  @override
  Widget build(BuildContext context) {
    return Divider(thickness: 3);
  }
}

这将使分隔符更窄，因为否则默认的build() 会增加一些最小高度。

UPD 2021-09-14 以下不再相关，因为该功能是在 Flutter 2.5 中实现的。上面的代码相应地更新了。

这解决了两个问题之一。不幸的是，第二个也是更大的问题是分隔符仍然可以点击，并且点击会关闭下拉菜单。为了解决这个问题，我向 Flutter 提交了一个功能请求： https://github.com/flutter/flutter/issues/75487