Flutter - 在一个中心小部件周围浮动带圆圈的小部件答案

【问题标题】：Flutter - floating circled widgets around one center widgetFlutter - 在一个中心小部件周围浮动带圆圈的小部件
【发布时间】：2022-12-17 23:36:42
【问题描述】：

在 Flutter 中，是否有机会制作像 Harmony OS 设备列表这样的浮动小部件。

Harmony OS - devices list

由于树形布局，小部件似乎是“静态的”。也许有一个能够绘制浮动小部件的库。

【问题讨论】：

标签： flutter

【解决方案1】：

是的，您可以通过使用 Draggable 小部件并使用 Positioned 小部件定位它来在 Flutter 中创建浮动小部件。 Draggable 小部件允许您使用户可以拖动任何小部件，而 Positioned 小部件允许您相对于其父级定位小部件。

以下是如何使用这些小部件在 Flutter 中创建浮动小部件的示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            // This is the background
            Container(
              color: Colors.grey[300],
            ),
            // This is the floating widget
            Positioned(
              top: 100,
              left: 100,
              child: Draggable(
                child: Container(
                  width: 200,
                  height: 200,
                  color: Colors.blue,
                ),
                feedback: Container(
                  width: 200,
                  height: 200,
                  color: Colors.blue[100],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在此示例中，浮动小部件是一个蓝色容器，用户可以在屏幕上拖动它。当用户开始拖动小部件时，Draggable 小部件将显示一个浅蓝色的 Container 作为反馈，表示该小部件正在被拖动。

您可以通过修改 Draggable 和 Positioned 小部件的属性来自定义浮动小部件的外观和行为。例如，您可以更改小部件的大小、颜色和形状，或者您可以在 Draggable 小部件内添加其他小部件以创建更复杂的浮动小部件。

您还可以添加额外的逻辑来处理事件，例如用户何时开始或停止拖动小部件，或者何时小部件到达屏幕边缘。为此，您可以使用 Draggable 小部件提供的 onDragStarted、onDraggableCanceled 和 onDragEnd 回调。

有关更多信息和示例，您可以查看 Draggable 和 Positioned 小部件的官方文档：

可拖动：https://api.flutter.dev/flutter/widgets/Draggable-class.html

定位：https://api.flutter.dev/flutter/widgets/Positioned-class.html

【讨论】：