flutter - 如何在点击 FAB 时显示卡片？

Question

所以这就是我到目前为止所得到的。基本上，我想在用户点击 FAB 时显示卡片。现在，当我点击 FAB 时，没有任何 react 。

Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.exit_to_app),
            onPressed: () => logoutUser().then((value) =>
                Navigator.of(context).pushReplacementNamed('/SignIn')),
          )
        ],
        title: Text('TODO'),
      ),
      body: Container(),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add), onPressed: () => displayCard()),
    );
  }

  Widget displayCard() {
    return Center(
      child: Card(
        color: Colors.blue,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const ListTile(
              leading: Icon(Icons.album),
              title: Text('The Enchanted Nightingale'),
              subtitle: Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
            ),
          ],
        ),
      ),
    );
  }

Answer 1

现在，您正在向 onPressed 函数返回一个 Widget，即 VoidCallBack .它不会对从 displayCard() 收到的 Widget 执行任何操作。 .

考虑使用对话框弹出窗口。更换您的小部件 displayCard()类似于以下内容。

void displayCard(BuildContext context) {
    showDialog(
        context: context,
        builder: (context) {
            return AlertDialog(
                title: Text("The Enchanted Nightingale"),
                content: Text("Music by Julie Gable. Lyrics by Sidney Stein."),
                actions: <Widget>[
                    FlatButton(
                        child: Text("Dismiss"),
                        onPressed: () {
                            //remove the dialog popup
                            Navigator.of(context).pop();
                        }

                    )
                ]
            );
        }
    );
}

然后，更新您的 floatActionButton要通过的代码 context作为参数

floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add), onPressed: () => displayCard(context)),