满足Flutter苛刻要求-- 自定义Flutter高级进度条

2023-11-25 04:23:04

引言

Flutter的内置进度条在很多情况下无法满足开发者的需求，例如：只能设置单色背景和进度，无法设置渐变色；不能设置圆角，虽然可以通过圆角裁剪 ClipRRect 来解决，但这样就需要额外的布局和样式设置；无法设置内边距，等等。本文将提供一套解决方案，开发人员可以自定义Flutter高级进度条，以满足各种需求。

实现步骤

创建自定义进度条小部件

class CustomProgressBar extends StatelessWidget {
  final double progress;
  final Color backgroundColor;
  final Color progressColor;
  final double borderRadius;
  final double padding;

  const CustomProgressBar({
    Key? key,
    required this.progress,
    this.backgroundColor = Colors.grey,
    this.progressColor = Colors.blue,
    this.borderRadius = 0.0,
    this.padding = 0.0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.circular(borderRadius),
      ),
      padding: EdgeInsets.all(padding),
      child: Stack(
        children: [
          Container(
            width: progress * (MediaQuery.of(context).size.width - 2 * padding),
            decoration: BoxDecoration(
              color: progressColor,
              borderRadius: BorderRadius.circular(borderRadius),
            ),
          ),
        ],
      ),
    );
  }
}

在你的Dart文件中使用自定义进度条小部件

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomProgressBar(
            progress: 0.5,
            backgroundColor: Colors.grey,
            progressColor: Colors.blue,
            borderRadius: 10.0,
            padding: 10.0,
          ),
        ),
      ),
    );
  }
}