[英]Fade Image.asset when SingleChildScrollView scrolls
我在SingleChildScrollView
中的Column
顶部有一个image.asset
我试图实现当用户滚动 scrollView 时,图像将淡出。
我已经尝试使用 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'),
],
),
),
);
只需创建一个动画控制器并根据滚动控制器更新其值
完整的工作示例:
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,
)
)
),
),
)
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.