105 lines
2.6 KiB
Dart
105 lines
2.6 KiB
Dart
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>
|