首页 > 解决方案 > 如何允许用户点击标题以在 ExpansionPanel 上打开

问题描述

我在我的颤振应用程序中构建了一个帮助/常见问题解答屏幕。使用扩展磁贴我创建了 UI,但在点击标题时遇到问题。

我想让用户点击标题以打开该磁贴。目前,用户必须点击箭头才能打开。

我添加了“canTapOnHeader:true”,但这似乎不起作用。我搜索了 Stackoverflow 但仍然没有运气

任何帮助都会很棒!

ExpansionPanel(
                headerBuilder: (BuildContext context, bool isExpanded) {
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.all(10),
                        child: Padding(
                          padding: const EdgeInsets.only(left: 8.0),
                          child: Text(
                            itemData[index].headerItem,
                            style: TextStyle(
                              color: Theme.of(context).accentColor,
                              fontSize: 17,
                            ),
                          ),
                        ),
                      ),
                    ],
                  );
                },
                body: Container(
                  padding: EdgeInsets.only(left: 10, right: 10, bottom: 30),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Image.asset(
                        itemData[index].img,
                        fit: BoxFit.cover,
                      ),
                      SizedBox(height: 10),
                      Divider(
                          thickness: 3.0,
                          height: 3.0,
                          color: Theme.of(context).accentColor,
                          indent: 10,
                          endIndent: 300),
                      Padding(
                        padding: const EdgeInsets.only(left: 8.0, top: 10),
                        child: Text(
                          itemData[index].description,
                          style: TextStyle(
                            color: Theme.of(context).accentColor,
                            fontSize: 15,
                            height: 1.3,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                canTapOnHeader: true,
                isExpanded: itemData[index].expanded,
              )
            ],
            expansionCallback: (int item, bool status) {
              setState(() {
                itemData[index].expanded = !itemData[index].expanded;
              });
            },
          ),
        );
      },
    ),
  ),
);}




List<ItemModel> itemData = <ItemModel>[
    ItemModel(
      headerItem: 'This is a header question?',
      description:
          "This is the description for the question.",
      img: 'assets/images/typingtextgiphy.gif',
    ),
  ];
}

class ItemModel {
  bool expanded;
  String headerItem;
  String description;
  String img;

  ItemModel({
    this.expanded: false,
    this.headerItem,
    this.description,
    this.img,
  });
}

标签: flutterdart

解决方案


推荐阅读