当前位置: 首页 > news >正文

Flutter:进度条封装

在这里插入图片描述

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

组件

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,
)

相关文章:

  • Python精进系列: isinstance 函数
  • 基于SpringBoot的“考研互助平台”的设计与实现(源码+数据库+文档+PPT)
  • 【Pandas】pandas Series asof
  • python可视化开源库
  • 在windows10系统上搭建npm仓库源
  • uni-app如何发布项目为app_2025
  • AI论文开题报告:分享5款写作软件
  • Linux中的基本指令(上)
  • Vue.js知识总结
  • Vue+Node.js+MySQL+Element-Plus实现一个账号注册与登录功能
  • 动态规划 -第1篇
  • 从青铜到王者:六大排序算法实战解析
  • Docker避坑实战:6大“诡异“问题深度拆解
  • 【GPT入门】第15课 用 prompt生成sql交互页面,创建可视化自然语言转sql生成器
  • PyTorch深度学习框架进阶学习计划 - 第20天:端到端图像生成系统
  • Lock接口与synchronized锁机制
  • 蓝桥杯备考:unordered_map基础用法题 ---学籍管理
  • 在 Ubuntu 下通过 Docker 部署 Nginx 服务器
  • 【零基础入门unity游戏开发——进阶篇】Marhf和Math的使用
  • Java基础 | Java枚举(Enum)详解:从入门到实践
  • 网站建设推广公司哪家权威/如何通过网络营销自己
  • 河北pc端网站开发/考研培训
  • 来客seo/沈阳网络seo公司
  • html代码快捷键/如何优化关键词搜索
  • 如何做商城网站/拼多多代运营公司十大排名
  • 百科网站程序/百度官方营销推广平台加载中