flutter 自定义进度条progress

最新推荐文章于 2023-06-19 11:08:15 发布

郭文武

最新推荐文章于 2023-06-19 11:08:15 发布

阅读量2.7k

点赞数

分类专栏： flutter 文章标签： flutter进度条 flutter自定义progress

本文链接：https://blog.csdn.net/isusjjyy/article/details/102800234

版权

本文介绍了Flutter系统自带进度条的局限性，并详细讲解如何自定义进度条类，包括设置背景色、前景色动画及自定义圆角等属性。同时提供自定义进度条的使用方式，并邀请读者加入相关讨论群进行深入交流。

摘要由CSDN通过智能技术生成

系统自带进度条

有一定局限性，只能设置背景色，前景色要设置动画的颜色值，且不能自定义是否圆角等属性

// 2表示当前的值，10表示最大值
LinearProgressIndicator(
    value: 2 /10,
    backgroundColor: Constants().grayBgColor,
),

自定义进度条类

import 'package:flutter/material.dart';
import 'package:zetc_app/constants.dart';

/**
 * 自定义进度条
 */
class ProgressComp extends StatelessWidget {
  ProgressComp(
      {Key key,
      this.width,
      this.height,
      this.bgColor,
      this.frColor,
      this.borderRaius,
      this.value=1})
      : super(key: key);
  // 宽度-必填
  final double width;
  // 高度-必填
  final double height;
  // 背景色
  final Color bgColor;
  // 前景色
  final Color frColor;
  // 圆角
  final double borderRaius;
  // 当前比例(当前值/总数值)-必填
  final double value;
  @override
  Widget build(BuildContext context) {
    return Container(
        width: width ?? Constants().w120,
        height