Question

我正在尝试以全屏显示我选择的图像，该图像在手机上可以正常工作，但是在平板电脑上，图像无法覆盖屏幕。我正在使用boxFit.cover，所以不确定为什么它没有覆盖屏幕。

一种解决方案是使用height: double.infinity和width: double.infinity。然后，平板电脑屏幕被覆盖。但是，如果这样做，我必须删除“ SingleChildScrollView”，这意味着我无法在需要时滚动更宽的图片。

这是我的代码：

      @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Container(
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Image(
              image: NetworkImage(widget.imPath),
              fit: BoxFit.cover,
            ),
          ),
        ),

有没有解决方法，以便我既可以覆盖屏幕又可以在需要时滚动？

Answer 1

首先，我要指出的是，您将无法使用当前设置进行滚动。看，您只有一个窗口小部件，它恰好覆盖了滚动视图可用的区域。
我只是假设您打算将其他小部件添加到SingleChildScrollView 中，但是图像要占据整个屏幕或可用高度。

我有两种解决方法。其中之一可以覆盖整个屏幕，因此会更容易一些，而另一个则更健壮，并且可以解决填充问题或您没有全屏显示图像的情况。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: GestureDetector(
      child: Container(
        child: LayoutBuilder(
          builder: (context, constraints) => SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: SizedBox(
              height: constraints.biggest.height,
              child: Image(
                image: NetworkImage(widget.imPath),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ), 
    ),
  );
}

在这种可能的解决方案中，我在SingleChildScrollView之前添加了LayoutBuilder，然后使用最大的高度约束将Image包围在使用该高度的SizedBox周围。

仅在全屏情况下起作用的更简单的解决方案使用MediaQuery处的高度：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: GestureDetector(
      child: Container(
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: SizedBox(
            height: MediaQuery.of(context).size.height,
            child: Image(
              image: NetworkImage(widget.imPath),
              fit: BoxFit.cover,
            ),
          ),
        ),
      ), 
    ),
  );
}

如何同时使用ScrollView和全尺寸图像？

1 个答案: