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

A small widget to implement breadcrumbs into a flutter app

功能特性

• 可以传入路径来查看
• 自定义文本、分隔符和选中文本样式
• 设置 maxLines
• 设置 overflow
• 默认采用常见格式

使用方法

最小化需求

// 创建面包屑列表
List<Breadcrumb> breadcrumbItems = 'example/with/no/parameters'.split('/').map(
        (s) => Breadcrumb(
          label: s, // 每个面包屑的标签
          path: s,  // 每个面包屑的路径
        ),
      ).toList();

// 使用 Breadcrumbs 小部件
final breadcrumbs = Breadcrumbs(
  breadcrumbs: breadcrumbItems, // 传递面包屑列表
  onNavigate: (path) => _navigate(context, path), // 点击面包屑时触发的回调函数
);

完整示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 simple_breadcrumbs 插件。

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: const _BreadcrumbsView(), // 主页面
    );
  }
}

class _BreadcrumbsView extends StatelessWidget {
  const _BreadcrumbsView();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          // 第一个面包屑示例
          Breadcrumbs(
            breadcrumbs: 'example/with/no/parameters'.split('/').map(
                  (s) => Breadcrumb(
                    label: s, // 每个面包屑的标签
                    path: s,  // 每个面包屑的路径
                  ),
                ).toList(),
            onNavigate: (path) => _navigate(context, path), // 点击面包屑时触发的回调函数
          ),
          // 第二个面包屑示例，带更多自定义参数
          Breadcrumbs(
            breadcrumbs: 'example/with/all/parameters'.split('/').map(
                  (s) => Breadcrumb(
                    label: s, // 每个面包屑的标签
                    path: s,  // 每个面包屑的路径
                  ),
                ).toList(),
            onNavigate: (path) => _navigate(context, path), // 点击面包屑时触发的回调函数
            divider: ' > ', // 自定义分隔符
            textStyle: const TextStyle( // 文本样式
              color: Colors.red,
            ),
            dividerStyle: const TextStyle( // 分隔符样式
              fontWeight: FontWeight.w200,
              color: Colors.yellow,
              fontSize: 12,
            ),
            selectedStyle: const TextStyle( // 当前选中面包屑的样式
              fontWeight: FontWeight.bold,
              color: Colors.red,
            ),
          ),
        ],
      ),
    );
  }

  // 导航到新的页面
  Future<void> _navigate(BuildContext context, String path) => Navigator.push(
        context,
        MaterialPageRoute<void>(
          builder: (BuildContext context) => Scaffold(
            appBar: AppBar(title: Text(path)), // 页面标题为路径
            body: Center(
              child: TextButton(
                child: const Text('pop'), // 按钮文字
                onPressed: () => Navigator.pop(context), // 返回上一页
              ),
            ),
          ),
        ),
      );
}