如何在 flutter 运行时按位置添加小部件？

Question

我正在尝试在点击位置的图像上添加按钮。我已经通过使用 onTapUp 的 detail 参数成功地获得了位置。

但是，我无法在用户点击图像时添加图标按钮。

下面的代码显示了我的示例。

class ArticlesShowcase extends StatelessWidget {
  final commentWidgets = List<Widget>();
  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
          child: new Center(
            child: Image.network(
              'https://via.placeholder.com/300x500',
            ),
          ),
          onTapUp: (detail) {
            final snackBar = SnackBar(
                content: Text(detail.globalPosition.dx.toString() +
                    " " +
                    detail.globalPosition.dy.toString()));
            Scaffold.of(context).showSnackBar(snackBar);
            new Offset(detail.globalPosition.dx, detail.globalPosition.dy);
            var btn = new RaisedButton(
              onPressed: () => {},
              color: Colors.purple,
              child: new Text(
                "Book",
                style: new TextStyle(color: Colors.white),
              ),
            );
            commentWidgets.add(btn);
          },
        );          
  }
}

我尝试将按钮添加到列表中，但没有成功。

Answer 1

所以，您缺少一些东西。首先你不能更新 StatelessWidget state ，所以你需要使用 StatefulWidget.

其次，使用StatefulWidget时，需要调用setState来更新State。您还需要使用 Stack 和 Positioned 小部件将按钮放在您的特定位置。您的代码应该像这样结束。

class ArticlesShowcaseState extends State<ArticlesShowcase> {
  final commentWidgets = List<Widget>();
  void addButton(detail) {
    {
      final snackBar = SnackBar(
          content: Text(
              "${detail.globalPosition.dx.toString()} ${detail.globalPosition.dy.toString()}"));
      Scaffold.of(context).showSnackBar(snackBar);
      var btn = new Positioned(
          left: detail.globalPosition.dx,
          top: detail.globalPosition.dy,
          child: RaisedButton(
            onPressed: () => {},
            color: Colors.purple,
            child: new Text(
              "Book",
              style: new TextStyle(color: Colors.white),
            ),
          ));

      setState(() {
        commentWidgets.add(btn);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
            GestureDetector(
              child: new Center(
                child: Image.network(
                  'https://via.placeholder.com/300x500',
                ),
              ),
              onTapUp: (detail) => addButton(detail),
            )
          ] +
          commentWidgets,
    );
  }
}

如何在 flutter 运行时按位置添加小部件？

How to add a widget by position on runtime in flutter?

flutter

flutter-layout