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/bhu8 著作权归作者所有。请勿转载和采集!