Question

我想使用Expandable-ExpandablePanel。问题是第二个打开时如何关闭第一个ExpandablePanel？我尝试使用controller.value，但是找不到诸如action或onChange之类的东西。该怎么做？

ExpandablePanel(
                controller: categoryController,
                iconPlacement: ExpandablePanelIconPlacement.right,
                header: Container(
                    margin: EdgeInsets.only(left: 40.0),
                    child: Text(
                      'Category',
                      style: TextStyle(
                          fontSize: 21.0, fontWeight: FontWeight.bold),
                      textAlign: TextAlign.center,
                    )),
                expanded: Container(
                  child: Icon(Icons.close)),
                tapHeaderToExpand: true,
                hasIcon: true,
              ),
ExpandablePanel(
                controller: subCategoryController,
                iconPlacement: ExpandablePanelIconPlacement.right,
                header: Container(
                    margin: EdgeInsets.only(left: 40.0),
                    child: Text(
                      'SubCategory',
                      style: TextStyle(
                          fontSize: 21.0, fontWeight: FontWeight.bold),
                      textAlign: TextAlign.center,
                    )),
                expanded: Container(
                  child: Icon(Icons.close)),
                tapHeaderToExpand: true,
                hasIcon: true,
              ),

Answer 1

您是否正在使用 Expandable 软件包来扑扑？

如果是，则该软件包不具有此功能。

read this

不过，您可以自己制作一些自定义代码来实现此目的。

我尝试了一下，并且能够通过一些自定义的技巧来做到这一点。


class _ExpandableDemoState extends State<ExpandableDemo> {
  ExpandableController categoryController, subCategoryController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    categoryController = ExpandableController(initialExpanded: false);
    subCategoryController = ExpandableController(initialExpanded: false);
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: <Widget>[
            GestureDetector(
              onTap: (){
                _toggleExpandables(0);
              },
              child: ExpandablePanel(
                controller: categoryController,
                iconPlacement: ExpandablePanelIconPlacement.right,
                header: Container(
                    margin: EdgeInsets.only(left: 40.0),
                    child: Text(
                      'Category',
                      style: TextStyle(fontSize: 21.0, fontWeight: FontWeight.bold),
                      textAlign: TextAlign.center,
                    )),
                expanded: Container(child: Icon(Icons.close)),
                tapHeaderToExpand: false,
                hasIcon: true,
              ),
            ),
            GestureDetector(
              behavior: HitTestBehavior.deferToChild,
              onTap: (){
                _toggleExpandables(1);
              },
              child: ExpandablePanel(
                controller: subCategoryController,
                iconPlacement: ExpandablePanelIconPlacement.right,
                header: Container(
                    margin: EdgeInsets.only(left: 40.0),
                    child: Text(
                      'SubCategory',
                      style: TextStyle(fontSize: 21.0, fontWeight: FontWeight.bold),
                      textAlign: TextAlign.center,
                    )),
                expanded: Container(child: Icon(Icons.close)),
                tapHeaderToExpand: false,
                hasIcon: true,
              ),
            ),
          ],
        ),
      ),
    );
  }

  _toggleExpandables(int index){
    setState(() {
     categoryController.value = false;
    subCategoryController.value = false;

    _getController(index).value = true; 
    });
  }

  ExpandableController _getController(int index){
    switch(index){
      case 0:
        return categoryController;
      case 1:
        return subCategoryController;
    }
  }
}

注意-该代码不是最终代码，请尽快编写。您可以根据需要重构此代码以提高性能。

Answer 2

这可能是最简单的解决方案。

categoryController.addListener((){
      if(categoryController.value)sexController.value=false;
    });
    sexController.addListener((){
      if(sexController.value)categoryController.value=false;
    });

Answer 3

您可以将ExpansionPanelList.radio与ExpansionPanelRadio check it in the documentation

一起使用

Widget _buildPanel() {
    return ExpansionPanelList.radio(
      initialOpenPanelValue: 0,
      children: _data.map<ExpansionPanelRadio>((Item item) {
        return ExpansionPanelRadio(
            value: item.id,
            headerBuilder: (BuildContext context, bool isExpanded) {
              return ListTile(
                title: Text(item.headerValue),
              );
            },
            body: ListTile(
                title: Text(item.expandedValue),
                subtitle: Text('To delete this panel, tap the trash can icon'),
                trailing: Icon(Icons.delete),
                onTap: () {
                  setState(() {
                    _data.removeWhere((currentItem) => item == currentItem);
                  });
                }));
      }).toList(),
    );
  }

另一个打开时如何关闭一个ExpandablePanel？

3 个答案: