Flutter:进度条封装

发布于:2025-03-15 ⋅ 阅读:(18) ⋅ 点赞:(0)

在这里插入图片描述

封装一个自用的进度条:
属性包括:宽高,背景色,高亮色,圆角大小

组件

import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';

class ProgressBar extends StatelessWidget {
  /// 进度值,范围0.0-1.0
  final double progress;

  /// 进度条宽度
  final double width;

  /// 进度条高度
  final double height;

  /// 背景颜色
  final Color backgroundColor;

  /// 高亮(进度)颜色
  final Color highlightColor;

  /// 圆角大小(背景和进度条使用相同的圆角)
  final double borderRadius;

  /// 动画持续时间
  final Duration animationDuration;

  /// 是否显示动画
  final bool animate;

  const ProgressBar({
    Key? key,
    required this.progress,
    required this.width,
    this.height = 40,
    this.backgroundColor = const Color(0xFF1D1D1D),
    this.highlightColor = Colors.blue,
    this.borderRadius = 20,
    this.animationDuration = const Duration(milliseconds: 300),
    this.animate = true,
  }) : assert(progress >= 0.0 && progress <= 1.0, "进度值必须在0.0到1.0之间"),
       super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width.w,
      height: height.w,
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.circular(borderRadius.w),
      ),
      child: Stack(
        children: [
          // 进度条高亮部分
          animate 
            ? AnimatedContainer(
                duration: animationDuration,
                width: width.w * progress,
                height: height.w,
                decoration: BoxDecoration(
                  color: highlightColor,
                  borderRadius: BorderRadius.circular(borderRadius.w),
                ),
              )
            : Container(
                width: width.w * progress,
                height: height.w,
                decoration: BoxDecoration(
                  color: highlightColor,
                  borderRadius: BorderRadius.circular(borderRadius.w),
                ),
              ),
        ],
      ),
    );
  }
}

// 示例:如何使用
// ProgressBar(
//   progress: 0.7,
//   width: 300,
//   height: 24,
//   backgroundColor: Colors.grey[800]!,
//   highlightColor: Colors.blue,
//   borderRadius: 12,
// ) 

页面中使用

const ProgressBar(
  progress: 0.7,
  width: 160,
  height: 16,
  backgroundColor: AppTheme.color2223,
  highlightColor: AppTheme.primaryBlue,
  borderRadius: 8,
  animate: true,
)

网站公告

今日签到

点亮在社区的每一天
去签到