dart - 如何在颤振中提供的照片中使用带有箭头的仪表构建小部件
问题描述
我已经创建了仪表条,但我仍然不知道如何从条的开始到结束添加数字,并在底部添加一个箭头,用于放置您拥有的点并在其上方使用相同的颜色
child: Row(children: <Widget>[
Column(children: <Widget>[
Padding(
padding: EdgeInsets.all(5.0),
child: Container(
decoration: new BoxDecoration(
border: new Border(right: BorderSide(color: Colors.black))
),
child: Column(
children: <Widget>[
Text('Points'),
Text('38'),
],
),
),
),
],),
// green bar
Column(children: <Widget>[
Padding(
padding: EdgeInsets.only(right:10.0),
child: Container(
width:ratewidth,
decoration: new BoxDecoration(
border: new Border(bottom: BorderSide(color: Colors.green, width: 5.0))
),
),
)
],),
//yellow bar
Column(children: <Widget>[
Padding(
padding: EdgeInsets.only(right:10.0),
child: Container(
width:ratewidth,
decoration: new BoxDecoration(
border: new Border(bottom: BorderSide(color: Colors.yellow, width: 5.0))
),
),
),
],),
...
],)
解决方案
结合Row
,可以在几行内完成Column
。Align
最难的部分实际上是三角形。通常,您会想使用CustomPainter
三角形,但我在这里很懒惰。所以我结合了平移、旋转和剪辑。
import 'dart:math';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHome(),
);
}
}
class MyHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: ScoreMeter(
score: 1,
),
)
],
),
);
}
}
class ScoreMeter extends StatelessWidget {
final int score;
ScoreMeter(
{
this.score,
Key key})
: super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
height: 100.0,
child: Row(
children: <Widget>[
Expanded(
child: ScoreMeterItem(
score: score, color: Colors.green, minRange: 0, maxRange: 50),
),
Expanded(
child: ScoreMeterItem(
score: score,
color: Colors.yellow,
minRange: 51,
maxRange: 100),
),
Expanded(
child: ScoreMeterItem(
score: score,
color: Colors.orange,
minRange: 101,
maxRange: 150),
),
Expanded(
child: ScoreMeterItem(
score: score, color: Colors.red, minRange: 151, maxRange: 200),
),
Expanded(
child: ScoreMeterItem(
score: score,
color: Colors.purple,
minRange: 201,
maxRange: 250),
),
Expanded(
child: ScoreMeterItem(
score: score,
color: Colors.brown,
minRange: 251,
maxRange: 300),
),
],
),
);
}
}
class ScoreMeterItem extends StatelessWidget {
/// Hello World
final int score;
final Color color;
final int minRange;
final int maxRange;
ScoreMeterItem(
{this.score,
this.color = Colors.grey,
@required this.minRange,
@required this.maxRange,
Key key})
: assert(minRange != null),
assert(maxRange != null),
super(key: key);
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(minRange.toString(), style: theme.textTheme.caption),
Text(maxRange.toString(), style: theme.textTheme.caption),
],
),
ScoreMeterBar(color: color),
score >= minRange && score <= maxRange
? SizedBox(
height: 10.0,
child: Align(
alignment: Alignment(
(score - minRange) / (maxRange - minRange) * 2 - 1,
0.0),
child: Arrow(color: color),
),
)
: SizedBox()
],
),
);
}
}
class Arrow extends StatelessWidget {
final Color color;
Arrow({this.color});
@override
Widget build(BuildContext context) {
return SizedBox(
height: 5.0,
width: 10.0,
child: ClipRect(
child: OverflowBox(
maxWidth: 10.0,
maxHeight: 10.0,
child: Align(
alignment: Alignment.topCenter,
child: Transform.translate(
offset: Offset(.0, 5.0),
child: Transform.rotate(
angle: pi / 4,
child: Container(
width: 10.0,
height: 10.0,
color: color,
),
),
),
),
),
),
);
}
}
class ScoreMeterBar extends StatelessWidget {
final Color color;
ScoreMeterBar({this.color = Colors.grey, Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 8.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(4.0),
),
color: color,
),
);
}
}
推荐阅读
- opengl - 是否所有裁剪平面都用于确定 OpenGL 中的渲染空间?
- bash - 将结果传递给下一个命令
- python - Bot 未正确发送表情符号(Python 3.9.2 PyCharm 2021.1)
- linux - 在 tcl 脚本中使用符号链接时如何使用 *
- python - 使用 f2 分数评估多个分类器
- python - 在烧瓶中渲染字典
- android - putBinder 与 putParcelable Android 有什么区别?
- javascript - 在 jQuery 元素过滤器中写入和读取 URL
- r - 根据 R 中的动态列数和列名过滤行
- c# - 如何按子列表对列表列表进行分组