flutter - 下拉菜单中的 Flutter 可扩展
问题描述
我正在尝试做一个下拉菜单,里面有可扩展的项目。我也让它以某种方式工作,但我不确定这是否是最好的方法。
我想要一个与此类似的用户界面。下拉菜单
变成这个。
到目前为止,我所做的看起来像这样。
单击时会发生这种情况
所以我得到了一个可以工作的原型。我的问题是下拉菜单箭头图标、“X”和“+”图标等图标。就像现在的示例一样,我隐藏了下拉菜单箭头,因为它与“+”图标重叠。此外,DropdownMenuItem 不是字符串而是 PanleItem。所以我可以在不打开 DropdownMenu 的情况下展开列表。
我无法让它在不同的阶段工作。我希望我能在这里得到一些帮助,或者有人可以添加一些对有用文章等的引用。
到目前为止,这是我的代码。
import 'package:expandable/expandable.dart';
import 'package:flutter/material.dart';
class CustomExandableDropDown extends StatefulWidget {
@override
_CustomExandableDropDownState createState() =>
_CustomExandableDropDownState();
}
class _CustomExandableDropDownState extends State<CustomExandableDropDown> {
late String itemName;
late List<PanelItem> _data;
int currentIndex = 0;
List<String> items = ["first", "second", "third"];
@override
void initState() {
super.initState();
_data = generateItems(items.length);
itemName = _data.first.itemName;
}
List<PanelItem> generateItems(int numberOfItems) {
return List<PanelItem>.generate(numberOfItems, (int index) {
return PanelItem(
itemName: items[index],
);
});
}
@override
Widget build(BuildContext context) {
return Expanded(
child: Container(
decoration: BoxDecoration(
border: Border(
left: BorderSide(
width: 1,
color: Color(0xFFACACAC),
),
right: BorderSide(
width: 1,
color: Color(0xFFACACAC),
),
top: BorderSide(
width: 1,
color: Color(0xFFACACAC),
),
bottom: BorderSide(
width: 1,
color: Color(0xFFACACAC),
),
),
),
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: Container(
child: DropdownButton<String>(
value: itemName,
isExpanded: true,
icon: Container(),
underline: Container(),
items: _data.map<DropdownMenuItem<String>>((item) {
return DropdownMenuItem<String>(
value: item.itemName,
child: ExpandablePanel(
theme: ExpandableThemeData(
hasIcon: false, tapHeaderToExpand: true),
header: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(item.itemName),
Icon(Icons.add),
],
),
collapsed: Container(),
expanded: Container(
width: MediaQuery.of(context).size.width,
color: Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.itemName,
softWrap: true,
),
Text(
item.itemName,
softWrap: true,
),
Text(
item.itemName,
softWrap: true,
),
],
),
)),
);
}).toList(),
onChanged: (String? value) {
if (value != null) {
setState(() {
itemName = value;
});
}
},
),
),
),
),
);
}
}
class PanelItem {
PanelItem({
required this.itemName,
this.isExpanded = false,
});
String itemName;
bool isExpanded;
}
解决方案
要实现您想要做的事情,您可以使用扩展磁贴。我目前正在从事的项目中有类似的东西。看看您是否可以尝试为自己定制它:
//items is list of things which you want to include under each tile for example your //Rinnen Rinnenhalten .....
ExpansionTile(
trailing: Text(
'See all',
style: TextStyle(color: Colors.blue),
),
title: Text('Categories'),
children: [
Wrap(
children: [
for (var i in items)
Container(
width: 100,
height: 50,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => BasedOnCats(i.toString())));
},
child: Card(
child: Center(
child: Text(i.toString()),
),
),
))
],
),
],
);
推荐阅读
- cakephp - Configure::read 和控制器全局变量在 cakephp 2.10.12 中不起作用
- c# - 如何在一个 NUnit 项目中正确测试弱/强命名的内部类?
- laravel - 在laravel的select标签中选择供应商名称时如何显示其他数据
- ios - 文件提供程序扩展的显示名称
- linux - GCC 将 uint8_t 和 uint16_t 解释为已签名?
- python-3.x - 无法使用 matplotlib 绘制 3d 条形图
- python - 如何在网上抓取谷歌学者每年每篇论文的引用次数?
- css - React:如何以编程方式在反应组件中设置元素的宽度和高度
- node.js - 如何使用 Node 12 导入 rxjs 静态函数?
- php - 如何将多个变量发送到 codeigniter 的视图?