User interface 如何在Flatter中使用扩展面板列表构建卡片屏幕？

我正在Flitter中构建一个屏幕，主要包含支付卡列表及其可编辑的信息

当我们到达页面时，最初我们会看到一个带有卡片名称或某些属性的卡片列表

但是，当我们单击下拉按钮时，卡会展开并显示卡信息，标题中会出现一个编辑按钮。单击编辑按钮后，我希望卡片信息小部件更改为可编辑字段，我们可以使用子窗口中的保存按钮更新单击的卡片信息

---

我决定使用扩展面板列表来构建此功能。但是，我的问题是如何将子项（扩展面板的主体小部件从文本框更改为可编辑的容器）。

下面是一个示例，其中有3种不同的方法可以将只读文本更改为可编辑文本：

bool editMode = false;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: ListView(
      children: <Widget>[
        RaisedButton(
          child: Text(editMode ? "Save" : "Edit"),
          onPressed: () {
            setState(() {
              editMode = !editMode;
            });
          },
        ),
        Padding(
          padding: EdgeInsets.all(8.0),
          child: TextFormField(
            enabled: editMode,
            controller: TextEditingController(text: "Abc"),
          ),
        ),
        Padding(
          padding: EdgeInsets.all(8.0),
          child: TextField(
            enabled: editMode,
            controller: TextEditingController(text: "Abc"),
          ),
        ),
        Padding(
          padding: EdgeInsets.all(8.0),
          child: editMode
              ? TextField(
                  controller: TextEditingController(text: "Abc"),
                )
              : Padding(
                  padding: EdgeInsets.symmetric(vertical: 12.0),
                  child: Text(
                    "Abc",
                    style: Theme.of(context).textTheme.subhead,
                  ),
                ),
        ),
      ],
    ),
  );
}

bool editMode=false；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：ListView(
儿童：[
升起的按钮(
子项：文本（编辑模式？“保存”：“编辑”），
已按下：（）{
设置状态（）{
editMode=！editMode；
});
},
),
填充物(
填充：边缘设置。全部（8.0），
子项：TextFormField(
启用：编辑模式，
控制器：文本编辑控制器（文本：“Abc”），
),
),
填充物(
填充：边缘设置。全部（8.0），
孩子：TextField(
启用：编辑模式，
控制器：文本编辑控制器（文本：“Abc”），
),
),
填充物(
填充：边缘设置。全部（8.0），
孩子：编辑模式
？文本字段(
控制器：文本编辑控制器（文本：“Abc”），
)
：填充(
填充：边缘组。对称（垂直：12.0），
子：文本(
“Abc”，
风格：Theme.of（context）.textTheme.subhead，
),
),
),
],
),
);
}

我们有

ExpansionPanelList

在flatter中，感谢您的想法。批准它！