如何同时使用ScrollView和完整大小的图像？

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,
              ),
            ),
          ),
        ),
      ), 
    ),
  );
}

在这个可能的解决方案中，我在LayoutBuilder之前添加了一个SingleChildScrollView然后使用最大的高度限制用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,
            ),
          ),
        ),
      ), 
    ),
  );
}