SingleChildScrollView 滚动时 Fade Image.asset

Question

我在 SingleChildScrollView

中的 Column 顶部有一个 image.asset

我正在努力实现当用户滚动 scrollView 时，图像会淡出。

我尝试使用滚动视图的 controller 属性来实现它，但我无法实现不透明度更改。

有没有人知道最有效的方法是什么？

谢谢！

当前代码:

Scaffold(
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: Column(
          children: [
            Stack(
              children: [
                Container(
                  height: _imageTopPosition + _imageHeight,
                  color: Colors.blue[100],
                ),
                Positioned(
                  top: _customShapeTopPosition,
                  child: MyCustomShape(
                    size: Size(_screenSize.width, _customShapeHeight),
                  ),
                ),
                Positioned(
                  top: _imageTopPosition,
                  right: _imageRightPosition,
                  child: Image.asset( //The image I would like to fade on scroll
                    'assets/images/image.png',
                    width: _imageWidth,
                    height: _imageHeight,
                  ),
                ),
              ],
            ),
            Padding(
              padding: EdgeInsets.only(top: _screenSize.height * 0.05),
            ),
            Text('Some Text'),
          ],
        ),
      ),
    );

Answer 1

只需创建一个动画控制器并根据滚动控制器更新其值

完整的工作示例：

import 'package:flutter/material.dart';

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> with SingleTickerProviderStateMixin{
  var _controller=ScrollController();
  AnimationController animation;
  @override
  void initState() {
    super.initState();
    animation=AnimationController(vsync:this);
    _controller.addListener(() {
      animation.value=1-_controller.offset/_controller.position.maxScrollExtent;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child:Container(
            width: 300,
            height: 300,
            child: SingleChildScrollView(
              controller: _controller,
              child:FadeTransition(
                opacity: animation,
                child:Container(
                  width: 300,
                  height: 600,
                  color: Colors.red,
                )
              )
            ),
          ),
      )
    );
  }
}

SingleChildScrollView 滚动时 Fade Image.asset

Fade Image.asset when SingleChildScrollView scrolls

dart

flutter

flutter-layout

flutter-animation