Flutter 颤振：创建具有可选身体部位的BodyMap小部件

我希望你在这样的困难时期做得很好

在我迷失在一片树木丛生的森林中之前，我想问这个问题。 目前，我正在为我的硕士论文开发一个应用程序，其中一个功能是：

用户应该能够从身体贴图中选择身体部位，并且所选部位应高亮显示。为了更好地理解，我将附上一个截图

我知道这更多的是一个“你会怎么做？”的问题，而不是一个问题，但是，也许有人比我有更好的想法

因此，我的方法是：

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

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

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

---

祝你一切顺利

我担心的是不同大小屏幕上的按钮与图像不对齐。这里有一些伪代码来说明我将如何做。希望你会觉得这很有帮助

///这些都是可选的身体部位。
列举身体部位{
左臂，头部，躯干，左腿，右腿，右臂
}
///这是整个车身图的高度。
最终双倍车身高度=650.0；
///这是头的高度。
最终双头高度=50.0；
///这将是选定的身体部位。
选择车身部件；
//展示整个身体。
纵队(
孩子们[
//身体的左侧。
纵队(
孩子们[
//说明头部的高度。
尺寸箱（高度：头高），
//左臂
材料按钮(
高度：300.0，
子：Image.asset(
所选==BodyParts.leftArm
？“资产/图像/左臂选中。png”
：“assets/images/left_arm.png”
),
按下（（）=>setState（（）=>selected=BodyParts.leftArm）），
),
],
),
//身体的中部。
纵队(
孩子们[
//头
材料按钮(
身高：头高，
子：Image.asset(
所选==BodyParts.head
？“资产/图像/head_selected.png”
：“assets/images/head.png”
),
按下（（）=>setState（（）=>selected=BodyParts.head）），
),
//躯干
材料按钮(
高度：250.0，
子：Image.asset(
选定==躯干部位。躯干
？“资产/图像/躯干_selected.png”
：“资产/图像/躯干.png”
),
按下（（）=>setState（（）=>selected=BodyParts.躯干）），
),
//腿
划船(
孩子们[
//左腿
材料按钮(
高度：300.0，
子：Image.asset(
所选==BodyParts.leftLeg
？“资产/图像/左腿选中。png”
：“assets/images/left_leg.png”
),
按下（（）=>setState（（）=>selected=BodyParts.leftLeg）），
),
//右腿
材料按钮(
高度：300.0，
子：Image.asset(
所选==BodyParts.rightLeg
？“资产/图像/右腿被选中.png”
：“assets/images/right_leg.png”
),
按下（（）=>setState（（）=>selected=BodyParts.rightLeg）），
),
],
)
],
),
//身体的右侧。
纵队(
孩子们[
//说明头部的高度。
尺寸箱（高度：头高），
//右臂
材料按钮(
高度：300.0，
子：Image.asset(
所选==BodyParts.rightArm
？“资产/图像/右手臂选中。png”
：“assets/images/right_arm.png”
),
按下（（）=>setState（（）=>selected=BodyParts.rightArm）），
),
],
),
],
)

请记住，这不是正常工作的代码；这是一个伪代码来帮助解释解决这个问题的可能方法

---

上面的代码将获取身体图像的分解版本，并将每个片段映射到自己的按钮。选择按钮后，将显示不同版本的车身板件，以表明已选择该按钮。

非常感谢！我确实觉得这很有帮助。是的，我知道不同大小屏幕的问题，我想我可能可以通过根据距离边界的距离放置东西来避免它。但在第一印象中，你的方法肯定朝着正确的方向发展。我将等待更多的人回答，然后再颁发奖金。