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

Flutter如何用扩展面板列表构建卡片屏幕？

1 个答案: