如何根据进度条的百分比对齐图标？

问题描述

我正在使用百分比指标库，我需要根据进度条的百分比来对齐图标。

解决方法

您可以在下面复制粘贴运行完整代码
您可以删除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,],),);
  }
}