SingleChildScrollView 滚动时 Fade Image.asset
Fade Image.asset when SingleChildScrollView scrolls
我在 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'),
],
),
),
);
只需创建一个动画控制器并根据滚动控制器更新其值
完整的工作示例:
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
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'),
],
),
),
);
只需创建一个动画控制器并根据滚动控制器更新其值
完整的工作示例:
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,
)
)
),
),
)
);
}
}