Question

我正试图找到一种解决方案，以在抖动模式对话框中出现，例如屏幕上的覆盖小部件。

用例：我的用户照片显示为小圆圈头像图像。如果用户点击照片，则“弹出”将覆盖屏幕，允许用户查看完整尺寸的照片。例如，使用“ photo_view软件包”软件包。任何想法如何解决这个问题？我无法将photo_view小部件直接添加到支架中，因为它将永久覆盖屏幕。我只有在点击迷你图标时才需要它。

谢谢！

Answer 1

您可以使用Dialog和Gesture Detector或InkWell来获得onTap功能。这是一个示例：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Image Popup example')
        ),
        backgroundColor: Colors.grey[800],
        body: CircleAvatar(
          child: GestureDetector(
            onTap: () async {
              await showDialog(
                context: context,
                builder: (_) => ImageDialog()
              );
            },
          ),
          radius: 50.0,
          //Photo by Tamas Tuzes-Katai on Unsplash
          backgroundImage: AssetImage('assets/tamas.jpg')
        )
    );
  }
}

class ImageDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: ExactAssetImage('assets/tamas.jpg'),
            fit: BoxFit.cover
          )
        ),
      ),
    );
  }
}

输出：

Circle Avatar

Overlay Dialog

颤振：将照片或图像显示为模式弹出窗口

1 个答案: