Question

我正在尝试实现一个DropdownButton，该标题可以将带有标题的特定项目彼此分开（请参见下图的期望输出，标题为绿色）

像示例中一样，我想将这些绿色标题添加到我现有的DropdownButton中，但是没有找到任何东西向我展示如何向DropdownButton添加除项目之外的内容

我还尝试使用DropdownButton从ListView切换到ExpansionTile，但是我想保持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(child: Container()); // Trick the assertion.

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

这将使分隔符更窄，否则默认 build() 会增加一些最小高度。这解决了两个问题之一。

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

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

2 个答案: