dart - 如何同时使用 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

首先，我想指出您将无法使用当前设置进行滚动。看，你有一个小部件正好覆盖了 ScrollView 可用的区域。
我将假设您计划将其他小部件添加到 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 之前，然后使用最大的高度限制用使用该高度的 SizedBox 包围 Image。

仅适用于全屏场景的更简单的解决方案使用来自 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,
            ),
          ),
        ),
      ), 
    ),
  );
}