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状态，因此您需要使用StatefulWidget。

第二，当使用StatefulWidget时，您需要调用setState来更新State。您还需要使用“堆栈”和“定位”窗口小部件将按钮放在您的特定位置。您的代码应该结束并看起来像这样。

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中的运行时按位置添加小部件？

1 个答案: