user-interface - 如何在 Flutter 中构建带有扩展面板列表的卡片屏幕？

Question

模型

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

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

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

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

标签： user-interfaceflutterdartflutter-layout

Answer 1

这是一个示例，其中有 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,
                  ),
                ),
        ),
      ],
    ),
  );
}