我想在 flutter 中显示一个图像,这样它就可以根据 slider 值产生窗帘升起动画的效果。
例如,我在 flutter 应用程序上显示具有固定高度和宽度的 IMAGE.jpg。
slider 的范围为 0 到 10。
当为 0 时: slider 值为 0,则图像布局区域显示为 100% 黑色。
1时:底部10%显示,顶部90%黑色
2时:底部20%显示,顶部80%黑色
和类似的
- 10时:显示100%
如何创建这种效果?
最佳答案
要创建此窗帘效果,您可以使用 Slider和 Align小部件。您可以在 Align
类中设置 heightFactor
以创建百分比窗帘效果。在 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'),
),
),
],
),
),
);
}
}
关于flutter - 如何在 flutter 中部分显示图像以获得幕后效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55210884/