flutter - 使用颤振创建响应式散点图

Question

我正在尝试从包 fl_chart 上的散点图小部件创建两个元素的维恩图。

scatterPlot(screenSize) {
    return ListView(children: [
      SizedBox(
        width: 500,
        height: 500,
        child: ScatterChart(
          ScatterChartData(
              scatterSpots:
                  _createSpots(determineCircleLocation(screenSize), screenSize),
              minX: 0,
              minY: 0,
              maxX: screenSize.width,
              maxY: screenSize.height,
              borderData: FlBorderData(show: false),
...

我有这个问题，每当我调整我的窗口大小时，散点圆圈都会移动 - 所以如果在全屏下看起来它们没有交叉点，当我调整屏幕大小时，它看起来就像有一个交叉点。
我试图将我的情节包装在一个 SizedBox 中，认为这会阻止调整大小的副作用，但它没有。

这是问题的演示

有没有办法防止这种情况发生？

在写这篇文章时，我认为通过改变maxX和maxY保持一些常数可能会有所帮助，但它导致了更糟糕的结果。

标签： flutterdartscatter-plot

Answer 1

因为我们设置了一个直接大小（无论它以何种大小运行），这个问题就会发生。您可以检查窗口大小，然后根据窗口大小更新点的半径。（我计算了一个数字，然后乘以半径）。

观看下面的视频。并在此处检查代码：

LayoutBuilder(
  builder: (context, constraints) {
    final size = constraints.biggest.shortestSide;
    final radiusMultiplier = size / 800;
    return Padding(
      padding: const EdgeInsets.only(right: 18.0),
      child: ScatterChart(
          ScatterChartData(
            scatterSpots: [
              ScatterSpot(5, 7, radius: 60 * radiusMultiplier,),
              ScatterSpot(8, 4, radius: 20 * radiusMultiplier,),
              ScatterSpot(3, 8, radius: 70 * radiusMultiplier),
            ],
            minX: 1,
            maxX: 10,
            minY: 1,
            maxY: 10,
          )
      ),
    );
  },
)