Flutter 如何设置一个大图像的动画，使其仅在屏幕内显示其自身的一部分？

我有一个大形象

width = 500 px;
height = 2000 px;

我想在小部件的视口中显示该图像。在这种情况下，小部件将成为背景，它将占据整个屏幕的宽度和高度

我在图像上有几个断点需要和屏幕底部对齐。 [1000px，1500px，2000px]

需要显示的是从底线到填满屏幕顶部的所有内容，而宽度正在拉伸以适应屏幕

我还想动画的变化，从一个背景到另一个

我将如何处理此解决方案

我尝试从

Image.asset

使用对齐方式，但无法将对齐方式精确映射到所需的断点

    return TweenAnimationBuilder(
      curve: Curves.easeInOut,
      duration: Duration(milliseconds: 300),
      tween: Tween<double>(
          begin: alignmentForScreen(previousScreen),
          end: alignmentForScreen(currentScreen)),
      builder: (context, value, _) => Image.asset(
        "assets/imgs/bg/home_bg.jpeg",
        width: size.width,
        height: size.height,
        fit: BoxFit.fitWidth,
        alignment: Alignment(0,value),
      ),
    );

---

有什么建议吗？

使用嵌套在

大小框中的
列表视图
很容易做到这一点

SizedBox(
  height: MediaQuery.of(context).size.height,  //Constraints of viewport to fit screen
  width: MediaQuery.of(context).size.width,  //Constraints of viewport to fit screen
  child: ListView(  //Scrollable widget
    shrinkWrap: true, //Reduce ListView's height to the childrens's
    controller: listViewController,  //Allows to programatically animate between offsets of the ListView (1365, 1712, 2032)
    physics: NeverScrollableScrollPhysics(),  //The user can't swipe the picture up or down
    scrollDirection: Axis.vertical,
    children: [
      Image.asset("assets/svg/ZFh5j.jpg", fit: BoxFit.fitHeight) //BigImage
    ],
  ),
),

要在
列表视图中的偏移之间设置动画，请添加
滚动控制器
：

class Screen extends StatefulWidget {
  Screen({Key key}) : super(key: key);

  @override
  _ScreenState createState() => _ScreenState();
}

class _ScreenState extends State<Screen> {
  ScrollController listViewController = ScrollController(initialScrollOffset: 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          SizedBox(
            height: MediaQuery.of(context).size.height,  //Constraints of viewport to fit screen
            width: MediaQuery.of(context).size.width,  //Constraints of viewport to fit screen
            child: ListView(  //Scrollable widget
              shrinkWrap: true, //Reduce ListView's height to the childrens's
              controller: listViewController,  //Allows to programatically animate between offsets of the ListView (1365, 1712, 2032)
              physics: NeverScrollableScrollPhysics(),  //The user can't swipe the picture up or down
              scrollDirection: Axis.vertical,
              children: [
                Image.asset("assets/svg/ZFh5j.jpg") //BigImage
              ],
            ),
          ),
          //contents on top of the background here
        ],
      ),
    );
  }
}

这会将
列表视图
从顶部滚动到“偏移”像素，因此设置偏移
2032
的动画不会将图像的下线与视口的底部约束对齐。为方便起见，请在图像之前的
列表视图中添加一个
大小框

SizedBox(
  height: MediaQuery.of(context).size.height,  //Constraints of viewport to fit screen
  width: MediaQuery.of(context).size.width,  //Constraints of viewport to fit screen
  child: ListView(  //Scrollable widget
    shrinkWrap: true, //Reduce ListView's height to the childrens's
    controller: listViewController,  //Allows to programatically animate between offsets of the ListView (1365, 1712, 2032)
    physics: NeverScrollableScrollPhysics(),  //The user can't swipe the picture up or down
    scrollDirection: Axis.vertical,
    children: [
      SizedBox(height: MediaQuery.of(context).size.height), //Must be height of viewport in order to work
      SizedBox(
        height: 2048,
        width: 553,
        child: Image.asset("assets/svg/ZFh5j.jpg", fit: BoxFit.fitHeight,) //BigImage
      )
    ],
  ),
),

现在调用
listViewController.animateTo（2032，持续时间：持续时间（毫秒：500），curve:Curves.easeInOutQuad）
应该将下一行与视口底部对齐
多亏了上面的答案，我使用的解决方案是将图像包装在大小与像素大小相同的框中。当您使用
reversed=true
将其放入
SingleChildScrollView
中时，滚动到偏移的动画将精确到像素

SingleChildScrollView(
      reverse: true,
      controller: scrollController,
      physics: NeverScrollableScrollPhysics(),
      child: SizedBox(
        height: 2048,
        width: 553,
        child: Image.asset(
          "assets/imgs/bg/home_bg.jpeg",
          fit: BoxFit.fill,
          alignment: Alignment.center,
        ),
      ),
    );

你这个男人。将图像包装在大小合适的盒子中，使其与实际分辨率的图像高度相匹配，这是一种友好的做法。我可以在5小时内奖励赏金。谢谢你的评论，我做了简单的解决方案，效果很好返回SingleChildScrollView（反向：true，控制器：scrollController，物理：NeverScrollableScrollPhysics（），子：SizedBox（高度：2048，宽度：553，子：Image.asset（“assets/imgs/bg/home_bg.jpeg”，fit:BoxFit.fitHeight，），）```我想把赏金奖励给你，所以如果你能更新答案：DGlad你发现了答案helpfulNice solution；）
SizedBox(
  height: MediaQuery.of(context).size.height,  //Constraints of viewport to fit screen
  width: MediaQuery.of(context).size.width,  //Constraints of viewport to fit screen
  child: ListView(  //Scrollable widget
    shrinkWrap: true, //Reduce ListView's height to the childrens's
    controller: listViewController,  //Allows to programatically animate between offsets of the ListView (1365, 1712, 2032)
    physics: NeverScrollableScrollPhysics(),  //The user can't swipe the picture up or down
    scrollDirection: Axis.vertical,
    children: [
      SizedBox(height: MediaQuery.of(context).size.height), //Must be height of viewport in order to work
      SizedBox(
        height: 2048,
        width: 553,
        child: Image.asset("assets/svg/ZFh5j.jpg", fit: BoxFit.fitHeight,) //BigImage
      )
    ],
  ),
),

SingleChildScrollView(
      reverse: true,
      controller: scrollController,
      physics: NeverScrollableScrollPhysics(),
      child: SizedBox(
        height: 2048,
        width: 553,
        child: Image.asset(
          "assets/imgs/bg/home_bg.jpeg",
          fit: BoxFit.fill,
          alignment: Alignment.center,
        ),
      ),
    );

      bgOffsets = [100, 336.0, 411.0, 1200.0];
      scrollController.animateTo(bgOffsets[currentScreen.index],
          duration: Duration(milliseconds: 500), curve: Curves.bounceOut);