flutter - 颤振 - 我希望图像离开该区域时消失
问题描述
Draggable 允许拖动图像。当图像离开橙色容器区域时,我希望它消失而不是隐藏。我使用了偏移量,但我不确定如何使图像消失在该区域之外。如果您能举一个代码示例,将不胜感激。
解决方案
这是我的试验。
- 更改了 Stack 小部件参数的 clipBehavior
=> 它允许上层堆栈项可以溢出。 - 如果位置更改为超出区域,则使用动画将不透明度更改为 0。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// Remove the debug banner
debugShowCheckedModeBanner: false,
title: 'Kindacode.com',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _started = false;
bool _isDisappeared = false;
Offset _position = Offset(10, 220);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
clipBehavior: Clip.none,
children: <Widget>[
Container(
width: 300,
height: 400,
color: Colors.orange,
),
Positioned(
top: _position.dy - 30, // Size of widget to reposition correctly
left: _position.dx,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 500),
opacity: _isDisappeared ? 0.0 : 1.0,
child: Draggable(
child: Icon(Icons.home),
feedback: Icon(Icons.home),
onDragEnd: (details) {
print(details.offset);
setState(() {
if (!_started) _started = true;
_position = details.offset;
if (_position.dy - 30 > 400 || _position.dx > 300) {
setState(() {
_isDisappeared = true;
});
}
});
},
),
),
),
],
),
),
);
}
}
[![enter image description here][1]][1]
推荐阅读
- swift - 用于 swift 的 plist 文件中的字符串插值变量
- r - 通过 geom_path() 删除从第一个数据到最后一个数据链接的行
- jquery - 为使用 jquery 过滤的表创建图像
- google-chrome - Click 方法不适用于 chrome 模拟器
- javascript - 如何在 POSTMAN 工具中进行“或”操作
- javascript - Javascript - ES6:addEventListener 使用参数调用类方法不起作用
- python - Python + 自签名证书 + HTTP 不工作,但在 C#、Java 中工作
- java - StackOverflowError Jackson 与 Spring
- swift - 检查 nil 的非可选值
- javascript - “错误:需要一个资源或概念。” 在超级账本作曲家操场上