Flutter，动态设置定位的小部件

Question

我有一个UI喜欢

现在我想根据给定的数据在圆圈上创建字母。我需要它是动态的，当字母较少时（例如 3 或 4），它们必须彼此远离。但是，当它们很多（10 或 12）时，它们必须适合圆圈（必须具有动态大小和动态位置）。圆圈和字母的代码-

Container(
            width: SizeConfig.devWidth! * 0.6,
            height: SizeConfig.devHeight! * 0.35,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.blue),
              color: MyColors.nextButtonColor,
              shape: BoxShape.circle,
            ),
            child: Stack(
              alignment: Alignment.center,
              children: [
                Positioned(
                    top: SizeConfig.devHeight! * 0.04,
                    child: isDragging == true && isItemsDragging[0] != true
                        ? dragTargetWidget('Č', 0)
                        : draggableWord('Č', 0)),
                Positioned(
                    top: SizeConfig.devHeight! * 0.07,
                    right: SizeConfig.devWidth! * 0.1,
                    child: isDragging == true && isItemsDragging[1] != true
                        ? dragTargetWidget('É', 1)
                        : draggableWord('É', 1)),
                Positioned(
                    right: SizeConfig.devWidth! * 0.03,
                    child: isDragging == true && isItemsDragging[2] != true
                        ? dragTargetWidget('Ž', 2)
                        : draggableWord('Ž', 2)),
                Positioned(
                    bottom: SizeConfig.devHeight! * 0.07,
                    right: SizeConfig.devWidth! * 0.1,
                    child: isDragging == true && isItemsDragging[3] != true
                        ? dragTargetWidget('U', 3)
                        : draggableWord('U', 3)),
                Positioned(
                    bottom: SizeConfig.devHeight! * 0.04,
                    child: isDragging == true && isItemsDragging[4] != true
                        ? dragTargetWidget('T', 4)
                        : draggableWord('T', 4)),
                Positioned(
                    bottom: SizeConfig.devHeight! * 0.07,
                    left: SizeConfig.devWidth! * 0.1,
                    child: isDragging == true && isItemsDragging[5] != true
                        ? dragTargetWidget('Ě', 5)
                        : draggableWord('Ě', 5)),
                Positioned(
                    left: SizeConfig.devWidth! * 0.03,
                    child: isDragging == true && isItemsDragging[6] != true
                        ? dragTargetWidget('А', 6)
                        : draggableWord('А', 6)),
                Positioned(
                    top: SizeConfig.devHeight! * 0.07,
                    left: SizeConfig.devWidth! * 0.1,
                    child: isDragging == true && isItemsDragging[7] != true
                        ? dragTargetWidget('K', 7)
                        : draggableWord('K', 7)),
              ],
            ))
      ],
    ),
  ),

我的数据是-

Crossword(type: "crossword", format: [
  "      š",
  "    žák",
  "      o",
  " učitel",
  "      a"
], chars: [
  "i",
  "e",
  "l",
  "a",
  "t",
  "o",
  "č",
  "k",
  "š",
  "á",
  "u",
  "ž"
], strings: {
  "škola": ["      *", "      *", "      *", "      *", "      *"],
  "žák": ["       ", "    ***", "       ", "       ", "       "],
  "učitel": ["       ", "       ", "       ", " ******", "       "]
}),

知道我怎样才能做到这一点吗？任何解决方案都会非常有用，谢谢！

Answer 1

感谢@pskink！解决方案是使用 RotaryDialDelegate 作为 CustomMultiChildLayout 的委托。检查下面的代码：

Container(
            width: SizeConfig.devWidth! * 0.6,
            height: SizeConfig.devHeight! * 0.35,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.blue),
              color: MyColors.nextButtonColor,
              shape: BoxShape.circle,
            ),
            child: CustomMultiChildLayout(
              delegate: RotaryDialDelegate(
                  wowProv.crosswordExercises[widget.indexLevel!].chars!.length),
              children: dragLetters
            ))

Flutter，动态设置定位的小部件

Flutter, setting positioned widgets dynamically

flutter

flutter-layout

flutter-positioned