Flutter组件之圆形进度条(CircularProgressIndicator)

祁承嗣
2023-12-01
/**
 * 圆形进度条
 * 可以在外面包一层SizedBox,间接改变进度条的大小
 *const CircularProgressIndicator({
    Key key,
    double value,//0~1的浮点数,用来表示进度多少;如果 value 为 null 或空,则显示一个动画,否则显示一个定值
    Color backgroundColor,//背景颜色
    Animation<Color> valueColor,//animation类型的参数,用来设定进度值的颜色,默认为主题色
    this.strokeWidth = 4.0,//进度条宽度
    String semanticsLabel,
    String semanticsValue,
    })
 */

body: Stack(
            children: <Widget>[
              Positioned(
                  left: 150.0,
                  top: 20.0,
                  child: CircularProgressIndicator(
//                    value: 0.3,
                    backgroundColor: Color(0xffff0000),
                  )
              ),
              Positioned(
                  left: 150.0,
                  top: 70.0,
                  child: CircularProgressIndicator(
                    value: 0.3,
                    backgroundColor: Color(0xffff0000),
                  )
              ),
              Positioned(
                  left: 150.0,
                  top: 120.0,
                  child: CircularProgressIndicator(
//                    value: 0.3,
                    strokeWidth: 4.0,
                    backgroundColor: Color(0xffff0000),
                    valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                  )
              ),
              Positioned(
                  left: 150.0,
                  top: 170.0,
                  child: CircularProgressIndicator(
//                    value: 0.3,
                    strokeWidth: 8.0,
                    backgroundColor: Color(0xffff0000),
                    valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                  )
              ),
              Positioned(
                  left: 150.0,
                  top: 220.0,
                  child: SizedBox(
                    width: 50.0,
                    height: 50.0,
                    child: CircularProgressIndicator(
//                    value: 0.3,
                      backgroundColor: Color(0xffff0000),
                      valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                    ),
                  )
              ),
            ],
          )

 

 类似资料: