如何解决如何根据进度条的百分比对齐图标?
我正在使用百分比指标库,我需要根据进度条的百分比来对齐图标。
解决方法
您可以在下面复制粘贴运行完整代码
您可以删除vh
并向Wrap
提供width
,height
和value
并使用ProgressBarView
旋转图标
代码段
Transform.rotate
工作演示
完整代码
Container(width: 400,height: 40,child: ProgressBarView(value: .9,)),Divider(),Container(width: 300,child: ProgressBarView(value: .7,Container(width: 100,child: ProgressBarView(value: .4,...
class ProgressBarView extends StatelessWidget {
ProgressBarView({this.value});
...
return Container(
color: Color(0Xffe6e6e6),padding: EdgeInsets.only(left: 2,right: 2),child: Stack(fit: StackFit.loose,children: [
LinearProgressIndicator(
value: value,valueColor: AlwaysStoppedAnimation<Color>(Colors.red),backgroundColor: Colors.grey,minHeight: 40),
,
不确定如何将图标放置在进度栏顶部,但是如果您使用的是Stack,则可能会有所帮助
Stack(
children: [
LinearProgressIndicator(
value: _value,minHeight: 40
),LayoutBuilder(
builder: (context,constrains) {
//5 is just the right padding
var leftPadding = constrains.maxWidth * _value - _iconSize - 5;
var topPadding = (constrains.maxHeight - _iconSize) / 2;
return Padding(
padding: EdgeInsets.only(left: leftPadding,top: topPadding),child: Icon(
Icons.airplanemode_active,size: _iconSize.toDouble()
),);
}
)
]
),
看看这个codepen https://codepen.io/fcontreras-the-bashful/pen/GRZpRyg
,我这样说,但这对我不起作用:
class ProgressBarView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Color(0Xffe6e6e6),child: Wrap(
children: <Widget>[
new Stack(
children: [
LinearProgressIndicator(
value: _value,],),);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。