我希望以抖动的方式显示图像,从而使图像具有基于滑块值的帘幕动画效果。
例如,我正在Flutter应用上显示具有固定高度和宽度的IMAGE.jpg。
滑块的范围是0到10。
当0:滑块值为0时,图像布局区域显示为100%黑色。
当1:显示底部10%,顶部90%为黑色
当2:显示底部20%,顶部80%为黑色
类似
如何创建这种效果?
答案 0 :(得分:1)
要创建此幕布效果,可以使用Slider和Align小部件。您可以在heightFactor
类中设置Align
来创建百分比幕布效果。现在,您可以在Slider
小部件内设置heightFactor
的值以创建幕布效果。
这是一个最小的工作示例:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(home: CurtainScaffold());
}
}
class CurtainScaffold extends StatefulWidget {
@override
_CurtainScaffoldState createState() => _CurtainScaffoldState();
}
class _CurtainScaffoldState extends State<CurtainScaffold> {
double curtain = 0.0;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Slider(
onChanged: (double val) {
setState(() {
this.curtain = val;
});
},
value: curtain,
min: 0.0,
max: 1.0,
),
ClipRect(
child: Align(
alignment: Alignment.bottomCenter,
heightFactor: curtain,
child: Image.network(
'https://upload.wikimedia.org/wikipedia/commons/b/bd/Dts_news_bill_gates_wikipedia.JPG'),
),
),
],
),
),
);
}
}