Flutter开发面包屑控件KqBreadCrumbs

深藏阁楼爱情的钟 2024-03-25 23:58 44阅读 0赞

*  **演示**

![826cd1cd17af45f29a524e8bd6ef6c4a.png][]

*  **功能**

1.可设置面包屑

2.可设置面包屑可点击部分演示

3.可设置面包屑不可点击部分演示

4.可设置回调，会回调点击的index和点击的面包屑数据

*  **代码**

import 'dart:async';
    
    import 'package:flutter/material.dart';
    import 'package:flutter/scheduler.dart';
    
    class KqBreadCrumbs<T extends ICrumbs> extends StatefulWidget {
      final List<T> crumbs;
      final Color? colorParent;
      final Color? colorChild;
      final Function(int, T)? onTap;
    
      const KqBreadCrumbs(
          {super.key,
          this.crumbs = const [],
          this.colorParent = Colors.blueAccent,
          this.colorChild = Colors.grey,
          this.onTap});
    
      @override
      State<StatefulWidget> createState() => _KqBreadCrumbsState<T>();
    }
    
    class _KqBreadCrumbsState<T extends ICrumbs> extends State<KqBreadCrumbs<T>> {
      final ScrollController _scrollController = ScrollController();
    
      void _scrollToEnd(){
        _scrollController.animateTo(_scrollController.position.maxScrollExtent,
            duration: const Duration(milliseconds: 200), curve: Curves.ease);
      }
    
      @override
      void initState() {
        super.initState();
        SchedulerBinding.instance.addPostFrameCallback((_) {
          _scrollToEnd();
        });
      }
    
      @override
      void didUpdateWidget(covariant KqBreadCrumbs<T> oldWidget) {
        super.didUpdateWidget(oldWidget);
        Timer.periodic(const Duration(milliseconds: 50), (timer) {
          _scrollToEnd();
          timer.cancel();
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return SizedBox(
          width: double.infinity,
          child: SingleChildScrollView(
            controller: _scrollController,
            scrollDirection: Axis.horizontal,
            child: Row(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: _getWidget(widget.crumbs),
            ),
          ),
        );
      }
    
      List<Widget> _getWidget(List<T> crumbs) {
        List<Widget> widgets = [];
        for (int i = 0; i < crumbs.length; i++) {
          Color? textColor;
          String? text;
          if (i < crumbs.length - 1) {
            textColor = widget.colorParent;
            text = "${crumbs[i].title}>";
          } else {
            textColor = widget.colorChild;
            text = crumbs[i].title;
          }
          widgets.add(InkWell(
            child: Text(
              text,
              style: TextStyle(color: textColor),
            ),
            onTap: () {
              if (i < widget.crumbs.length - 1) {
                widget.crumbs.removeRange(i + 1, widget.crumbs.length);
                setState(() {});
              }
              widget.onTap?.call(i, crumbs[i]);
            },
          ));
        }
        return widgets;
      }
    }
    
    class ICrumbs {
      final String title;
    
      ICrumbs(this.title);
    }

*  **使用**

class TestCrumbsEntity extends ICrumbs{
      TestCrumbsEntity(super.title);
    }
    
    List<TestCrumbsEntity> crumbs = [];
    
    KqBreadCrumbs(
      crumbs: crumbs,
      colorParent: colorParent,
      colorChild: colorChild,
      onTap: (int index,TestCrumbsEntity entity){
          /// 回调处理事件
      },
    )

[826cd1cd17af45f29a524e8bd6ef6c4a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/22cd417f4e724334946cf3e4048caee6.png