Flutter：创建带有可选身体部位的 BodyMap 小部件

问题描述

我希望你在这样的艰难时期过得很好。

我想在我迷失在充满小部件树的森林中之前问这个问题。目前，我正在为我的硕士论文开发一个 Flutter 应用程序，其中一个功能如下：

用户应该能够从身体地图中选择一个身体部位，并且应该突出显示所选部位。我会附上截图以便更好地理解。

我知道这更像是“你会怎么做？”问题而不是问题，但仍然，也许有人比我有更好的主意。

所以我的方法是：

使用空白的人体图像作为 Stack 中的背景
使用定位小部件，将圆形按钮放在可选择的身体部位的顶部

这看起来是一个不错的解决方案还是有更好的方法？

一切顺利！

解决方法

我担心的是按钮与不同尺寸屏幕上的图像不对齐。这是一些伪代码来展示我将如何做到这一点。希望这对您有所帮助。

/// These are all of the selectable body parts.
enum BodyParts {
  leftArm,head,torso,leftLeg,rightLeg,rightArm
}

/// This is the height of the entire body diagram.
final double bodyHeight = 650.0;

/// This is the height of the head.
final double headHeight = 50.0;

/// This will be the selected body part.
BodyParts selected;

// Display the entire body.
Column(
  children[
    // The left side of the body.
    Column(
      children[
        // To account for the height of the head.
        SizedBox(height: headHeight),// Left arm
        MaterialButton(
          height: 300.0,child: Image.asset(
            selected == BodyParts.leftArm
                ? "assets/images/left_arm_selected.png"
                : "assets/images/left_arm.png"
          ),onPressed(() => setState(() => selected = BodyParts.leftArm)),),],// The middle of the body.
    Column(
      children[
        // Head
        MaterialButton(
          height: headHeight,child: Image.asset(
            selected == BodyParts.head
                ? "assets/images/head_selected.png"
                : "assets/images/head.png"
          ),onPressed(() => setState(() => selected = BodyParts.head)),// Torso
        MaterialButton(
          height: 250.0,child: Image.asset(
            selected == BodyParts.torso
                ? "assets/images/torso_selected.png"
                : "assets/images/torso.png"
          ),onPressed(() => setState(() => selected = BodyParts.torso)),// Legs
        Row(
          children[
            // Left leg
            MaterialButton(
              height: 300.0,child: Image.asset(
                selected == BodyParts.leftLeg
                    ? "assets/images/left_leg_selected.png"
                    : "assets/images/left_leg.png"
              ),onPressed(() => setState(() => selected = BodyParts.leftLeg)),// Right leg
            MaterialButton(
              height: 300.0,child: Image.asset(
                selected == BodyParts.rightLeg
                    ? "assets/images/right_leg_selected.png"
                    : "assets/images/right_leg.png"
              ),onPressed(() => setState(() => selected = BodyParts.rightLeg)),)
      ],// The right side of the body.
    Column(
      children[
        // To account for the height of the head.
        SizedBox(height: headHeight),// Right arm
        MaterialButton(
          height: 300.0,child: Image.asset(
            selected == BodyParts.rightArm
                ? "assets/images/right_arm_selected.png"
                : "assets/images/right_arm.png"
          ),onPressed(() => setState(() => selected = BodyParts.rightArm)),)

请记住，这不是运行代码；它是帮助解释解决此问题的可能方法的伪代码。

上面的代码将采用身体图像的分解版本，并将每个部分映射到自己的按钮。选择按钮后，将显示不同版本的身体部位以表明它已被选中。

flutter-layout widget