下拉菜单中的 Flutter 可扩展

Question

我正在尝试做一个下拉菜单，里面有可扩展的项目。 我也让它以某种方式工作，但我不确定这是否是最好的方法。

我想要一个与此类似的 UI。下拉菜单

转换成这个。

到目前为止，我所做的都是这样的。

点击就会发生这种情况

所以我得到了一个可以工作的原型。我的问题是下拉菜单箭头图标、“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;
}

Answer 1

ExpansionTile 和 ExpansionPanel 可能正是您正在寻找的许多示例 here

Answer 2

要实现您想做的事情，您可以使用扩展图块。我目前正在从事的项目中有类似的东西。看看您是否可以尝试自己定制它：

//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()),
                      ),
                    ),
                  ))
          ],
        ),
      ],
    );