颤动：使用悬停小部件不适用于触摸输入设备

Question

我制作了一个由图像（个人资料图片）组成的小部件，当您将鼠标悬停在它上面时，您可以 select 一个文件用作新的个人资料图片。出于一个奇怪的原因，一些 PNG 文件无法工作。因此，我在显示之前将 PNG 转换为 JPG。它在桌面平台和桌面 Web 上运行良好。使用触摸时，它不起作用，并且试图用手势控制包裹它也不起作用。因此，这给了我们一个无法在网络上基于触摸的设备上使用的小部件。我为网络和桌面平台使用了不同的页面，因为文件选择器在网络上不起作用。

在桌面上：

HoverWidget(
                hoverChild: Container(
                  height: sy(68),
                  width: sy(68),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(
                      color: Colors.white,
                      width: 0.1,
                    ),
                  ),
                  child: CircleAvatar(
                    radius: sy(68),
                    backgroundColor: Colors.white,
                    backgroundImage: Img.FileImage(filee),
                    child: ClipRRect(
                      borderRadius:
                          BorderRadius.all(Radius.circular(sy(68))),
                      child: BackdropFilter(
                        filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
                        child: Container(
                          alignment: Alignment.center,
                          color: Colors.grey.withOpacity(0.1),
                          child: Center(
                              child: Material(
                            elevation: 5.0,
                            borderRadius: BorderRadius.circular(30.0),
                            color: const Color(0xff1f59b6),
                            child: ElevatedButton(
                              child: Container(
                                  height: sy(16),
                                  width: sy(42),
                                  child: Center(
                                      child: Text(
                                    "Choose Image",
                                    style: TextStyle(
                                        fontSize: sy(6),
                                        fontWeight: FontWeight.bold),
                                  ))),
                              onPressed: () {
                                _selectFile(context);
                              },
                            ),
                          )),
                        ),
                      ),
                    ),
                  ),
                ),
                onHover: (event) {
                  setState(() {
                    hovered = true;
                  });
                },
                child: Container(
                  height: sy(68),
                  width: sy(68),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(
                      color: Colors.white,
                      width: 0.1,
                    ),
                  ),
                  child: CircleAvatar(
                    radius: sy(68),
                    backgroundColor: Colors.white,
                    backgroundImage: Img.FileImage(filee),
                  ),
                ),
              ),

网络上：

HoverWidget(
                                    hoverChild: Container(
                                      height: sy(68),
                                      width: sy(68),
                                      decoration: BoxDecoration(
                                        shape: BoxShape.circle,
                                        border: Border.all(
                                          color: Colors.white,
                                          width: 0.1,
                                        ),
                                      ),
                                      child: CircleAvatar(
                                        radius: sy(68),
                                        backgroundColor: Colors.white,
                                        backgroundImage:
                                            Image.network(img).image,
                                        child: ClipRRect(
                                          borderRadius: BorderRadius.all(
                                              Radius.circular(sy(68))),
                                          child: BackdropFilter(
                                            filter: ImageFilter.blur(
                                                sigmaX: 4, sigmaY: 4),
                                            child: Container(
                                              alignment: Alignment.center,
                                              color:
                                                  Colors.grey.withOpacity(0.1),
                                              child: Center(
                                                  child: Material(
                                                elevation: 5.0,
                                                borderRadius:
                                                    BorderRadius.circular(30.0),
                                                color: const Color(0xff1f59b6),
                                                child: ElevatedButton(
                                                  child: Container(
                                                      height: sy(16),
                                                      width: sy(42),
                                                      child: Center(
                                                          child: Text(
                                                        "Choose Image",
                                                        style: TextStyle(
                                                            fontSize: sy(6),
                                                            fontWeight:
                                                                FontWeight
                                                                    .bold),
                                                      ))),
                                                  onPressed: () async {
                                                    var image =
                                                        await ImagePicker()
                                                            .pickImage(
                                                                source:
                                                                    ImageSource
                                                                        .gallery);
                                                    provider.setImage(image);
                                                    img = provider.image.path;
                                                  },
                                                ),
                                              )),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                    onHover: (event) {
                                      setState(() {
                                        hovered  = true;
                                      });
                                    },
                                    child: Container(
                                      height: sy(68),
                                      width: sy(68),
                                      decoration: BoxDecoration(
                                        shape: BoxShape.circle,
                                        border: Border.all(
                                          color: Colors.white,
                                          width: 0.1,
                                        ),
                                      ),
                                      child: CircleAvatar(
                                        radius: sy(68),
                                        backgroundColor: Colors.white,
                                        backgroundImage:
                                            Image.network(img).image,
                                      ),
                                    ),
                                  ),

Answer 1

用手势检测器替换悬停小部件，默认将悬停值设置为 false。现在它适用于点击。您可以使用 https://pub.dev/packages/platform_detect 来检测平台和浏览器来决定何时使用悬停以及何时使用点击。我运行遇到这个问题所以想和你分享，希望对你有帮助！

 GestureDetector(
                                  onTap: () {
                                    setState(() {
                                      hoverd = true;
                                    });
                                    Timer(Duration(seconds: 10), () {
                                      setState(() {
                                        hoverd = false;
                                      });
                                    });
                                  },
                                  child: hoverd == true
                                      ? Container(
                                          height: sy(68),
                                          width: sy(68),
                                          decoration: BoxDecoration(
                                            shape: BoxShape.circle,
                                            border: Border.all(
                                              color: Colors.white,
                                              width: 0.1,
                                            ),
                                          ),
                                          child: CircleAvatar(
                                            radius: sy(68),
                                            backgroundColor: Colors.white,
                                            backgroundImage:
                                                Image.network(img).image,
                                            child: ClipRRect(
                                              borderRadius: BorderRadius.all(
                                                  Radius.circular(sy(68))),
                                              child: BackdropFilter(
                                                filter: ImageFilter.blur(
                                                    sigmaX: 4, sigmaY: 4),
                                                child: Container(
                                                  alignment: Alignment.center,
                                                  color: Colors.grey
                                                      .withOpacity(0.1),
                                                  child: Center(
                                                      child: Material(
                                                    elevation: 5.0,
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            30.0),
                                                    color:
                                                        const Color(0xff1f59b6),
                                                    child: ElevatedButton(
                                                      child: Container(
                                                          height: sy(16),
                                                          width: sy(42),
                                                          child: Center(
                                                              child: Text(
                                                            "Choose Image",
                                                            style: TextStyle(
                                                                fontSize: sy(6),
                                                                fontWeight:
                                                                    FontWeight
                                                                        .bold),
                                                          ))),
                                                      onPressed: () async {
                                                        var image = await ImagePicker()
                                                            .pickImage(
                                                                source:
                                                                    ImageSource
                                                                        .gallery);
                                                        provider
                                                            .setImage(image);
                                                        img =
                                                            provider.image.path;
                                                        setState(() {
                                                          hoverd = false;
                                                        });
                                                      },
                                                    ),
                                                  )),
                                                ),
                                              ),
                                            ),
                                          ),
                                        )
                                      : Container(
                                          height: sy(68),
                                          width: sy(68),
                                          decoration: BoxDecoration(
                                            shape: BoxShape.circle,
                                            border: Border.all(
                                              color: Colors.white,
                                              width: 0.1,
                                            ),
                                          ),
                                          child: CircleAvatar(
                                            radius: sy(68),
                                            backgroundColor: Colors.white,
                                            backgroundImage:
                                                Image.network(img).image,
                                          ),
                                        ),
                                )

颤动：使用悬停小部件不适用于触摸输入设备

Flutter: Using Hover Widget not working on Touch Input devices

dart

flutter

flutter-layout

flutter-web