4

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

绿色标题分隔下拉列表的项目

就像在示例中一样，我想将这些绿色标题添加到我现有的DropdownButton中，但没有找到任何可以向我展示如何向DropdownButton

我也尝试从with切换DropdownButton到，但我想保持...的行为ListViewExpansionTileDropdownButton

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

4

2 回答 2

2

在 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});
}
于 2021-01-06T23:02:50.023 回答
1

除了 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

于 2021-02-05T08:24:52.350 回答