【问题标题】:How to build a card screen with expansion panel list in Flutter?如何在 Flutter 中构建带有扩展面板列表的卡片屏幕?
【发布时间】:2020-02-08 06:26:45
【问题描述】:

Model

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

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

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

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

【问题讨论】:

标签: user-interface flutter dart flutter-layout


【解决方案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,
                  ),
                ),
        ),
      ],
    ),
  );
}

【讨论】:

  • 感谢您的想法。批准!
猜你喜欢
  • 1970-01-01
  • 2018-01-15
  • 2021-02-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-20
  • 2022-10-06
  • 2022-01-19
相关资源
最近更新 更多