user-interface - 如何在Flutter中使用扩展面板列表构建名片屏幕？

Question

Model

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

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

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

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

Answer 1

这是一个示例，提供了三种从只读文本更改为可编辑文本的方式:

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