我正在尝试实现一个DropdownButton
,该标题可以将带有标题的特定项目彼此分开(请参见下图的期望输出,标题为绿色)
像示例中一样,我想将这些绿色标题添加到我现有的DropdownButton
中,但是没有找到任何东西向我展示如何向DropdownButton
添加除项目之外的内容
我还尝试使用DropdownButton
从ListView
切换到ExpansionTile
,但是我想保持DropdownButton
的行为...
是否可以将这些标题添加到DropdownButton
items
?还是我想通过其他方式实现它?我此刻陷入困境,不知道如何进行
答案 0 :(得分: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});
}
答案 1 :(得分:0)
除了 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