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

Posted 2023-02-23

【中文标题】Flutter：创建带有可选身体部位的 BodyMap Widget

【英文标题】：Flutter: Create BodyMap Widget with selectable body parts

【发布时间】：2021-08-03 18:50:53

【问题描述】：

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

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

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

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

所以我的处理方法是：

在堆栈中使用人体的空白图像作为背景

使用定位小部件，将圆形按钮放在可选身体部位的顶部

这似乎是一个不错的解决方案还是有更好的方法？

一切顺利！

【参考方案1】：

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

/// 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)),
        ),
      ],
    ),
  ],
)

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

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

【讨论】：

非常感谢！我确实觉得这很有帮助。是的，我知道不同尺寸屏幕的问题，我认为我可以通过根据到边界的距离放置东西来避免它。但是你的方法在第一印象中肯定是朝着正确的方向发展的。在奖励赏金之前，我会等待更多人回答。