如何解决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)),)
请记住,这不是运行代码;它是帮助解释解决此问题的可能方法的伪代码。
上面的代码将采用身体图像的分解版本,并将每个部分映射到自己的按钮。选择按钮后,将显示不同版本的身体部位以表明它已被选中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。