如何解决如何在 Flutter 中创建如下所示的 UI
我需要一个像上面这样的 BMI 可视化工具,我该如何创建?是否有任何小部件或插件可用于这种类型的用户界面。
解决方法
我创建了自定义 Ui 类来执行此操作
class BmiVisualizer extends StatelessWidget {
final double bmiValue;
final String bodyType;
BmiVisualizer({@required this.bmiValue,this.bodyType});
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 24),height: 100,child: Column(
children: [
Wrap(
children: [
Text("$bmiValue "),Text(
"$bodyType",style: TextStyle(
fontWeight: FontWeight.w800,color: bmiValue == null
? Colors.lightGreen[200]
: bmiValue <= 18.5
? Colors.lightGreen[200]
: bmiValue > 18.5 && bmiValue.round() <= 24
? Colors.green
: bmiValue.round() > 24 && bmiValue.round() <= 30
? Colors.orange
: bmiValue > 30 && bmiValue <= 35
? Colors.red[300]
: bmiValue > 35 && bmiValue <= 40
? Colors.red
: Colors.red,),],Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,mainAxisSize: MainAxisSize.max,children: [
for (double i = 15; i <= 45; i++)
Container(
height:
(bmiValue != null && bmiValue < 15 && i.round() == 15) ||
(bmiValue != null &&
bmiValue > 45 &&
i.round() == 45) ||
i.round() == bmiValue?.round()
? 50
: 30,width: i.round() == bmiValue?.round() ? 3 : 2,color: i <= 18.5
? Colors.lightGreen[200]
: i > 18.5 && i.round() <= 24
? Colors.green
: i.round() > 24 && i.round() <= 30
? Colors.orange
: i > 30 && i <= 35
? Colors.red[300]
: i > 35 && i <= 40 ? Colors.red : Colors.red,)
],children: [
for (double i = 15.5; i < 45; i++)
Container(
child: Text(i == 18.5
? "18.5"
: i.round() == 25
? "25"
: i.round() == 30
? "30"
: i.round() == 35
? "35"
: i.round() == 40 ? "40" : ""),);
throw UnimplementedError();
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。