要在 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。

Flutter 点击位置生成 Widget:示例代码和解释

原文地址: https://www.cveoy.top/t/topic/mJhG 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录