Flutter 进度条

移动开发 2023-01-28 21:01:34 阅读次数: 0

条形进度条

value：表示当前进度，取值范围为[0,1]。如果value为null则进度条会执行循环动画（模糊进度）；如果value不为null，则进度条有具体进度。

valueColor：进度条颜色。可以通过AlwaysStoppedAnimation指定。

backgroundColor：进度条背景颜色。

minHeight：进度条高度。

模糊进度条

在这里插入图片描述

const LinearProgressIndicator(
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  backgroundColor: Colors.grey,
)


具体进度条

在这里插入图片描述 

const LinearProgressIndicator(
  value: 0.5,
  minHeight: 10,
  backgroundColor: Colors.grey,
  valueColor: AlwaysStoppedAnimation(Colors.blue),
)

环形进度条


strokeWidth：设置弧线宽度。

其他属性与LinearProgressIndicator基本类似。

模糊进度条

在这里插入图片描述

const CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation(Colors.red),
  backgroundColor: Colors.grey,
)

具体进度条

在这里插入图片描述

const CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation(Colors.red),
  value: 0.5,
  strokeWidth: 4.0,
  backgroundColor: Colors.grey,
)

设置尺寸


LinearProgressIndicator和CircularProgressIndicator没有提供设置尺寸的参数，它们是去父容器的尺寸作为绘制的边界，这时可以借助SizedBox、ConstrainedBox限制指定尺寸。

条形进度条设置尺寸

在这里插入图片描述
 

const SizedBox(
  height: 3,
  width: 100,
  child: LinearProgressIndicator(
    value: 0.5,
    backgroundColor: Colors.grey,
    valueColor: AlwaysStoppedAnimation(Colors.blue),
  ),
)

环形进度条设置尺寸

 在这里插入图片描述

const SizedBox(
  height: 100,
  width: 100,
  child: CircularProgressIndicator(
    value: 0.5,
    backgroundColor: Colors.grey,
    valueColor: AlwaysStoppedAnimation(Colors.blue),
  ),
)


进度条动画


3秒内进度条颜色由灰色变为蓝色。

import 'package:flutter/material.dart';

class ProgressPage extends StatefulWidget {
    const ProgressPage({Key? key}) : super(key: key);

    @override
    State<StatefulWidget> createState() {
        return _ProgressPageState();
    }
}

class _ProgressPageState extends State<ProgressPage>
    with SingleTickerProviderStateMixin {
    late AnimationController _animationController;

    @override
    void initState() {
        _animationController =
            AnimationController(vsync: this, duration: Duration(seconds: 3));
        _animationController.forward();
        _animationController.addListener(() {
            setState(() {});
        });
        super.initState();
    }

    @override
    void dispose() {
        _animationController.dispose();
        super.dispose();
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text("进度条组件"),
            ),
            body: Padding(
                padding: EdgeInsets.all(10),
                child: Column(
                    children: [                       
                        Text("3秒由灰色变蓝色动画"),
                        LinearProgressIndicator(
                            backgroundColor: Colors.grey,
                            valueColor: ColorTween(begin: Colors.grey, end: Colors.blue)
                            .animate(_animationController),
                            value: _animationController.value,
                        ),
                    ],
                ),
            ),
        );
    }
}

iOS风格

在这里插入图片描述 

const CupertinoActivityIndicator(
  radius: 10,
  animating: true,
)

Flutter代码锦囊---魔改进度条

Flutter框架提供了Material Design风格的线性进度条（LinearProgressIndicator）组件，就是下面的样子，方方正正的，一点也不圆润。

标准的LinearProgressIndicator组件

但是很多APP的设计都按照Material Design风格来玩的，各种各样的都有，我们选择最常见的一种来看一下，下面是“淘宝APP->淘抢购”页面里面的进度条，还是带动画的。

如果直接用线性进度条（LinearProgressIndicator）组件去做，是没办法实现上面的进度条的。正常的话会遇到下面几个问题：

  • 没有参数可以设置圆角
  • 组件自带的动画效果是无限循环的
  • 设置了value参数就没有动画效果
  • 没有参数可以设置高度
  • 没有参数可以设置中间的文本组件

但是上面的问题都可以被解决，下面就是具体的解决方案了。

设置圆角

为进度条设置圆角边框的方法就是圆角矩形剪裁（ClipRRect）组件，用圆角矩形剪裁（ClipRRect）组件把线性进度条（LinearProgressIndicator）组件包装起来就可以了。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo 主页'),
      ),
      // 圆角矩形剪裁（`ClipRRect`）组件，使用圆角矩形剪辑其子项的组件。
      body: ClipRRect(
        // 边界半径（`borderRadius`）属性，圆角的边界半径。
        borderRadius: BorderRadius.all(Radius.circular(10.0)),
        child: LinearProgressIndicator(
          value: 0.6,
          backgroundColor: Color(0xffFFE3E3),
          valueColor: AlwaysStoppedAnimation<Color>(Color(0xffFF4964)),
        ),
      ),
    );
  }
}

设置高度与宽度

为进度条添加高度与宽度限制的方法也不难，就是用大小框（SizedBox）组件包装线性进度条（LinearProgressIndicator）组件。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo 主页'),
      ),
      body: SizedBox(
        height: 10.0,
        width: 98.0,
        // 圆角矩形剪裁（`ClipRRect`）组件，使用圆角矩形剪辑其子项的组件。
        child: ClipRRect(
          // 边界半径（`borderRadius`）属性，圆角的边界半径。
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          child: LinearProgressIndicator(
            value: 0.6,
            backgroundColor: Color(0xffFFE3E3),
            valueColor: AlwaysStoppedAnimation<Color>(Color(0xffFF4964)),
          ),
        ),
      ),
    );
  }
}

设置内容文本

为进度条的里面配置描述文本，和上面一样，就是继续包装（PS：Flutter的布局方式真的是过度包装），用堆栈（Stack）组件包装线性进度条（LinearProgressIndicator）组件。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo 主页'),
      ),
      body: Stack(
        children: <Widget>[
          SizedBox(
            height: 10.0,
            width: 98.0,
            // 圆角矩形剪裁（`ClipRRect`）组件，使用圆角矩形剪辑其子项的组件。
            child: ClipRRect(
              // 边界半径（`borderRadius`）属性，圆角的边界半径。
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              child: LinearProgressIndicator(
                value: 0.6,
                backgroundColor: Color(0xffFFE3E3),
                valueColor: AlwaysStoppedAnimation<Color>(Color(0xffFF4964)),
              ),
            ),
          ),
          Container(
            height: 10.0,
            width: 98.0,
            padding: EdgeInsets.only(left: 7.0),
            alignment: Alignment.centerLeft,
            child: Text(
              '已抢60%',
              style: TextStyle(
                color: Color(0xffFFFFFF),
                fontSize: 8.0,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

设置动画效果

要为进度条设置动画效果，就不得不提到动画控制器（AnimationController）和补间（Tween）组件，Flutter中的大部分动画效果都可以用它们实现。具体怎么使用它们，请参考下面的代码。

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  /// 当前的进度。
  double currentProgress = 0.6;
  // 动画相关控制器与补间。
  AnimationController animation;
  Tween<double> tween;

  @override
  void initState() {
    // AnimationController({
    //   double value,
    //   Duration duration,
    //   String debugLabel,
    //   double lowerBound: 0.0,
    //   double upperBound: 1.0,
    //   TickerProvider vsync
    // })
    // 创建动画控制器
    animation = AnimationController(
      // 这个动画应该持续的时间长短。
      duration: const Duration(milliseconds: 900),
      vsync: this,
      // void addListener(
      //   VoidCallback listener
      // )
      // 每次动画值更改时调用监听器
      // 可以使用removeListener删除监听器
    )..addListener(() {
        setState(() {});
      });
    // Tween({T begin, T end })：创建tween（补间）
    tween = Tween<double>(
      begin: 0.0,
      end: currentProgress,
    );
    // 开始向前运行这个动画（朝向最后）
    animation.forward();
    super.initState();
  }

  @override
  void dispose() {
    animation.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO：构建页面的主要内容。
  }
}

在上面的代码中，我们已经设置好了动画与补间，下面就把线性进度条（LinearProgressIndicator）组件中的value属性值设置成动画控制。

    // TODO：构建页面的主要内容。
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo 主页'),
      ),
      body: Stack(
        children: <Widget>[
          SizedBox(
            height: 10.0,
            width: 98.0,
            // 圆角矩形剪裁（`ClipRRect`）组件，使用圆角矩形剪辑其子项的组件。
            child: ClipRRect(
              // 边界半径（`borderRadius`）属性，圆角的边界半径。
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              child: LinearProgressIndicator(
                // Animation<T> animate(
                //   Animation<double> parent
                // )
                // 返回一个由给定动画驱动的新动画，但它承担由该对象确定的值
                value: tween.animate(animation).value,
                backgroundColor: Color(0xffFFE3E3),
                valueColor: AlwaysStoppedAnimation<Color>(Color(0xffFF4964)),
              ),
            ),
          ),
          Container(
            height: 10.0,
            width: 98.0,
            padding: EdgeInsets.only(left: 7.0),
            alignment: Alignment.centerLeft,
            child: Text(
              '已抢${(currentProgress * 100).toInt()}%',
              style: TextStyle(
                color: Color(0xffFFFFFF),
                fontSize: 8.0,
                fontFamily: 'PingFangRegular',
              ),
            ),
          ),
        ],
      ),
    );

这样进度条在构建时就会开始播放前进动画了。

猜你喜欢

转载自blog.csdn.net/jdsjlzx/article/details/128072114
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022