Flutter 点击位置生成 Widget:示例代码和解释
要在 Flutter 中在点击位置生成一个 Widget,可以使用 GestureDetector 组件来监听用户的点击事件,并在点击时创建一个可见的 Widget 来呈现。以下是一个简单的示例代码,演示如何在点击位置生成一个红色的圆形 Widget:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: GestureDetector(
onTapUp: (TapUpDetails details) {
// 获取点击位置的坐标
final double x = details.globalPosition.dx;
final double y = details.globalPosition.dy;
// 在点击位置创建一个红色的圆形 Widget
final widget = Positioned(
left: x - 25,
top: y - 25,
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),
);
// 在 Scaffold 的 Stack 中添加新的 Widget
Scaffold.of(context).setState(() {
Stack.of(context).children.add(widget);
});
},
child: Stack(),
),
),
);
}
}
在这个示例中,我们使用 GestureDetector 来监听用户的点击事件。当用户点击屏幕时,我们获取点击位置的坐标,并在点击位置创建一个红色的圆形 Widget。我们使用 Positioned 组件来定位新创建的 Widget,然后将其添加到 Scaffold 的 Stack 中,以便它可以呈现在屏幕上。
请注意,在 Scaffold 的 Stack 中添加 Widget 时,我们需要调用 Scaffold 的 setState 方法来触发 UI 更新。这是因为 Stack 的 children 是不可变的,所以我们需要使用 setState 来告诉 Flutter 重新构建 UI,以便它可以呈现新的 Widget。
原文地址: https://www.cveoy.top/t/topic/mJhG 著作权归作者所有。请勿转载和采集!