flutter学习之旅-进度条自定义控件

最新推荐文章于 2024-05-20 21:56:07 发布

原创最新推荐文章于 2024-05-20 21:56:07 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

iOS 同时被 2 个专栏收录

28 篇文章

订阅专栏

flutter

6 篇文章

订阅专栏

这篇博客展示了如何在Flutter中创建一个包含线性进度条和圆点状态指示器的组件。代码详细解释了如何根据类型设置不同进度和状态，并用不同的颜色和文本进行区分。适用于构建步骤导航或进度展示场景。

控件是长这样的
请添加图片描述
代码实现是这样的



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

class RefoundDetailProgress extends StatelessWidget {
  const RefoundDetailProgress({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Stack(
          children: [
            _progressView(1),
            _ProgressCircle(1),
          ],
        ),
        textProgress(1)
      ],
    );
  }

  Widget _progressView(int type) {
     double value = 0;
      switch (type){
        case 0:
          value = 0;
          break;
        case 1:
          value = 0.5;
          break;
        case 2:
          value = 1;
          break;
      }
      return Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.fromLTRB(64, 28, 64, 0),
        child: SizedBox(
          height: 4,
          child: LinearProgressIndicator(
            value: value,
            backgroundColor: const Color(0xffdddddd),
            valueColor: const AlwaysStoppedAnimation<Color>(Color(0xff007EFF)),
          ),
        ),
      );
  }

  Widget _ProgressCircle(int type){
    return Container(
      alignment: Alignment.center,
      margin: const EdgeInsets.fromLTRB(62, 20, 62, 0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        //向外扩展布局
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: circleChildren(type),
      ),
    );
  }

  List<Widget> circleChildren(int type) {
    List<Widget> circleList = [];
    for (int i = 0; i < 3; i++) {
      if (type == i) {
        circleList.add(Image.asset(
          'assets/images/select_pay.png',
          height: 18,
          width: 18,
        ));
      } else {
        circleList.add(Container(
          width: 10,
          height: 10,
          decoration: BoxDecoration(
              color: type < i ? const Color(0xffdddddd) : const Color(0xff007EFF),
              borderRadius: const BorderRadius.all(Radius.circular(5))),
        ));
      }
    }
    return circleList;
  }

  Widget textProgress(int type) {
    return Container(
      alignment: Alignment.center,
      margin: const EdgeInsets.fromLTRB(43, 10, 43, 0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        //向外扩展布局
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: textChildren(type),
      ),
    );
  }

  List<Widget> textChildren(int type) {
    List<String> text = ['申请退款','申请已通过','退款成功'];
    List<Widget> textList = [];
    for (int i = 0; i< 3; i++) {
        textList.add(Text(text[i],style: TextStyle(
          fontWeight: FontWeight.w300,
          fontSize: 14,
          color:  type >= i ? const Color(0xff007EFF) : const Color(0xff333333)
        ),));
    }
    return textList;
  }

}