flutter - 在 Flutter 中,是否可以在 Dismissible 小部件被关闭时增加它的透明度?
问题描述
我的应用程序中有一个 Dismissible 小部件,我将其向下拖动以关闭。有一个要求是,Dismissible 的透明度应该随着它被拖得越远而增加。所以它应该看起来好像它被解雇时正在淡出。如果要向上拖动,它的透明度应该会降低。
作为一个简单的测试,我尝试将 Dismissible 包装在 Listener 和 Opacity 小部件中。不透明度值设置为在状态中跟踪的变量。Listener 小部件监听 Dismissible 的总“y”轴移动,当它达到某个阈值时,降低 state 中跟踪的不透明度值。例如,请参见下面的代码:
import 'package:flutter/material.dart';
class FadingDismissible extends StatefulWidget {
@override
_FadingDismissible createState() => _FadingDismissible();
}
class _FadingDismissible extends State<FadingDismissible> {
double _totalMovement = 0;
double _opacity;
@override
void initState() {
super.initState();
_opacity = 1.0;
}
_setOpacity(double opacityValue) {
setState(() {
_opacity = opacityValue;
});
}
@override
Widget build(BuildContext context) {
return Listener(
onPointerMove: (PointerMoveEvent event) {
_totalMovement += event.delta.dy;
if (_totalMovement > 200) {
_setOpacity(0.5);
}
},
onPointerUp: (PointerUpEvent event) {
_setOpacity(1.0);
_totalMovement = 0;
},
child: Opacity(
opacity: _opacity,
child: Dismissible(
direction: DismissDirection.down,
key: UniqueKey(),
onDismissed: (direction) {
Navigator.pop(context);
},
child: Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {},
),
body: Container(color: Colors.blue),
),
),
),
);
}
}
问题是,每当设置状态时,都会重新构建小部件并且 Dismissible 会跳回顶部。
现在我不确定解决这个问题的另一种方法。有没有办法在拖动时更改 Dismissible 小部件的透明度?还是我必须完全使用不同的小部件?
谢谢!
解决方案
如果您不想创建自己的 Dismissible 小部件,我认为可能是最接近的:
class FadingDismissible extends StatefulWidget {
final String text;
FadingDismissible({@required this.text});
@override
_FadingDismissibleState createState() => _FadingDismissibleState();
}
class _FadingDismissibleState extends State<FadingDismissible> {
double opacity = 1.0;
StreamController<double> controller = StreamController<double>();
Stream stream;
double startPosition;
@override
void initState() {
super.initState();
stream = controller.stream;
}
@override
void dispose() {
super.dispose();
controller.close();
}
@override
Widget build(BuildContext context) {
return Dismissible(
key: GlobalKey(),
child: StreamBuilder(
stream: stream,
initialData: 1.0,
builder: (context, snapshot) {
return Listener(
child: Opacity(
opacity: snapshot.data,
child: Text(widget.text),
),
onPointerDown: (event) {
startPosition = event.position.dx;
},
onPointerUp: (event) {
opacity = 1.0;
controller.add(opacity);
},
onPointerMove: (details) {
if (details.position.dx > startPosition) {
var move = details.position.dx - startPosition;
move = move / MediaQuery.of(context).size.width;
opacity = 1 - move;
controller.add(opacity);
}
},
);
},
),
);
}
}
推荐阅读
- java - 使用嵌套列表时出现 IndexOutOfBoundsException
- azure - 表的 Azure 存储服务 REST API 的授权
- c - 试图将字符串扫描到c中结构的2个不同元素
- c++ - 通过覆盖虚函数获取“未解析的外部符号”
- vba - Excel VBA 无法让循环传输代码工作
- mysql - Mysql Select From 选择语法
- python - 将 python 程序转换为 cython 以加快速度的问题
- pyspark - pyspark - 使用 FAILFAST 选项加载失败后捕获格式错误的 JSON 文件名
- html - 如何将 div 包裹在主菜单 li 周围?
- c++ - C++ 编译器在使用 Bool Wrapper 类时报告不明确的函数调用