v3

lib/components/toly_ui/navigation/toly_breadcrumb.dart

@@ -0,0 +1,104 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/src/gestures/events.dart';
+
+class TolyBreadcrumb extends StatelessWidget {
+  final List<BreadcrumbItem> items;
+  final ValueChanged<BreadcrumbItem>? onTapItem;
+
+  const TolyBreadcrumb({super.key, required this.items,  this.onTapItem});
+
+  @override
+  Widget build(BuildContext context) {
+    List<Widget> children = [];
+
+    for (int i = 0; i < items.length; i++) {
+      children.add(TolyBreadcrumbItem(
+        item: items[i], onTapItem: onTapItem,
+      ));
+      if (i != items.length - 1) {
+        children.add(Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 4.0),
+          child: Text(
+            '/',
+            style: TextStyle(color: Colors.grey),
+          ),
+        ));
+      }
+    }
+
+    return Wrap(
+      children: children,
+    );
+  }
+}
+
+class TolyBreadcrumbItem extends StatefulWidget {
+  final BreadcrumbItem item;
+  final ValueChanged<BreadcrumbItem>? onTapItem;
+  const TolyBreadcrumbItem({super.key, required this.item, required this.onTapItem});
+
+  @override
+  State<TolyBreadcrumbItem> createState() => _TolyBreadcrumbItemState();
+}
+
+class _TolyBreadcrumbItemState extends State<TolyBreadcrumbItem> {
+
+  bool _hover = false;
+
+  @override
+  Widget build(BuildContext context) {
+    bool hasTarget = (widget.item.to != null);
+    Color? color = (_hover&&hasTarget)?Colors.blue:null;
+    MouseCursor cursor = hasTarget?SystemMouseCursors.click:SystemMouseCursors.basic;
+
+    if(widget.item.active) {
+      color = null;
+      cursor = SystemMouseCursors.basic;
+    }
+
+    TextStyle style = TextStyle(
+      fontWeight: hasTarget ? FontWeight.bold : null,
+      color: color
+    );
+
+    return MouseRegion(
+      cursor: cursor,
+      onEnter: _onEnter,
+      onExit: _onExit,
+      child: GestureDetector(
+          onTap: () {
+            if(!widget.item.active){
+              widget.onTapItem?.call(widget.item);
+            }
+          },
+          child: Text(widget.item.label, style: style)),
+    );
+  }
+
+  void _onEnter(PointerEnterEvent event) {
+    setState(() {
+      _hover = true;
+    });
+  }
+
+  void _onExit(PointerExitEvent event) {
+    setState(() {
+      _hover = false;
+    });
+  }
+}
+
+class BreadcrumbItem {
+  final String? to;
+  final String label;
+  final bool active;
+
+  BreadcrumbItem( {this.to, required this.label,this.active=false,});
+}
+
+//<el-breadcrumb separator="/">
+//   <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+//   <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
+//   <el-breadcrumb-item>活动列表</el-breadcrumb-item>
+//   <el-breadcrumb-item>活动详情</el-breadcrumb-item>
+// </el-breadcrumb>