Flutter面包屑导航插件flutter_breadcrumb的使用

Flutter Widget 可以轻松创建 Breadcrumb。

面包屑或面包屑路径是一种图形控制元素，通常用作用户界面和网页中的导航辅助工具。它允许用户跟踪并保持对应用程序、文档或网站内位置的意识。

Show Cases

Show Case	Wrap Behavior	Scroll Behavior

Getting Start

1. 添加依赖到 pubspec.yaml 文件中

dependencies:
  flutter_breadcrumb: ^1.0.1

2. 从命令行安装包

flutter pub get

3. 在文件中导入

import 'package:flutter_breadcrumb/flutter_breadcrumb.dart';

4. 将 BreadCrumb widget 添加到你的 widget 树中

BreadCrumb(
	items: <BreadCrumbItem>[
		//在这里添加你的 BreadCrumbItem
	],
	divider: Icon(Icons.chevron_right),
)

创建 Items

使用主构造函数或命名构造函数创建 Items

1. 主构造函数

BreadCrumb(
	items: <BreadCrumbItem>[
		 BreadCrumbItem(content: Text('Item1')),
		 BreadCrumbItem(content: Text('Item2')),
								 ...
	],
	divider: Icon(Icons.chevron_right),
)

2. 命名构造函数

BreadCrumb.builder(
	itemCount: 8,
	builder: (index) {
		return BreadCrumbItem(content: Text('Item$index'));
	},
	divider: Icon(Icons.chevron_right),
)

处理溢出

选择合适的溢出行为以确保 BreadCrumb widget 的正确显示。

1. WrapOverflow 行为

当您希望 widget 在主轴方向空间不足时自动换行时使用此行为。

BreadCrumb(
	items: <BreadCrumbItem>[
		//add your BreadCrumbItem here
	],
	divider: Icon(Icons.chevron_right),
	overflow: WrapOverflow(
		keepLastDivider: false,
		direction: Axis.horizontal,
	),
)

2. ScrollableOverflow 行为

当您希望 widget 内容在需要时可滚动时使用此行为。

BreadCrumb(
	items: <BreadCrumbItem>[
		//add your BreadCrumbItem here
	],
	divider: Icon(Icons.chevron_right),
	overflow: ScrollableOverflow(
		keepLastDivider: false,
		reverse: false,
		direction: Axis.horizontal,
	),
)

3. 自定义 Overflow 行为

您可以轻松创建自己的溢出行为。只需创建一个类并继承自 BreadCrumbOverflow 类，并重写其方法。

class CustomOverflowBehavior extends BreadCrumbOverflow{
	@override
	Widget build(BuildContext context, List<BreadCrumbItem> items, Widget divider) {
		// 实现 build 方法
	}

	@override
	bool get keepLastDivider => _keepLastDivider;

	@override
	List<Widget> widgetItems(List<BreadCrumbItem> items, Widget divider) {
		// 实现 widgetItems 方法
	}
}

• 重写 widgetItems 方法来创建包含 items 和 divider 参数的 List<Widget>。
• 重写 build 方法来创建自定义的 widget 行为。例如，Wrap 行为使用 Wrap widget。您可以在 build 方法中使用 widgetItems 方法来创建 List<Widget> 项目。

完整示例代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Breadcrumb Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        accentColor: Colors.blueAccent,
        backgroundColor: Colors.white,
        scaffoldBackgroundColor: Colors.white,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Breadcrumb Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: BreadCrumb(
            items: <BreadCrumbItem>[
              BreadCrumbItem(content: Text('Home')),
              BreadCrumbItem(content: Text('Category')),
              BreadCrumbItem(content: Text('Subcategory')),
              BreadCrumbItem(content: Text('Product')),
            ],
            divider: Icon(Icons.chevron_right),
            overflow: WrapOverflow(
              keepLastDivider: false,
              direction: Axis.horizontal,
            ),
          ),
        ),
      ),
    );
  }
}

以上是 flutter_breadcrumb 插件的基本使用方法和完整示例代码。希望这些信息能帮助您更好地理解和使用这个插件。

如果您喜欢这个仓库，请给它一个星🌟 GitHub Repository

贡献和支持

欢迎贡献您的 Pull Requests。

如果喜欢这个仓库，请给它一个星🌟 GitHub Repository