Flutter自绘一个进度条

最新推荐文章于 2024-09-24 00:53:48 发布

---月亮☽

最新推荐文章于 2024-09-24 00:53:48 发布

阅读量912

点赞数 1

CC 4.0 BY-SA版权

分类专栏：个人文章标签： flutter android

本文链接：https://blog.csdn.net/qq_43589991/article/details/125526680

个人专栏收录该内容

44 篇文章

订阅专栏

本文介绍了如何在Flutter中创建一个自定义的进度条Widget。该Widget具备设置进度、最大值、长度、高度和圆角等属性，通过ClipRRect和Stack实现视觉效果。代码简洁明了，适用于构建个性化进度展示需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述



import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_module/style/XYColors.dart';


/// author: zp
/// date: 2022/6/28
/// desc: 自定义进度条
class ProgressWidget extends StatelessWidget {
  ///进度
  int progress;
  ///默认最大值
  int maxProgress = 100;
  ///默认长度
  double width = 200;
  ///高度
  double height = 10;
  ///圆角
  double radius = 5;

  ProgressWidget(this.progress,{this.maxProgress,this.width,this.height,this.radius});

  @override
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      height: height,
      child: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(radius)),
          child: Stack(
            children: <Widget>[
              Container(
                width: width,
                height: height,
                decoration: BoxDecoration(color: XYColors.colors_00000086),
              ),
              Positioned(
                left: 0,
                child: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(radius)),
                  child: Container(
                    width: progress / maxProgress * width,
                    height: height,
                    decoration: BoxDecoration(color: Colors.white),
                  ),
                ),
              )
            ],
          )),
    );
  }
}