Flutter主从界面导航插件 master_detail_flow 的使用

master_detail_flow 是一个用于创建响应式主从界面导航的Flutter插件。它支持在移动设备和大屏设备上显示列表项及其详细视图，并提供快速、用户友好的体验。

安装

要使用这个包，请在您的项目中添加 master_detail_flow 作为依赖项：

dependencies:
  master_detail_flow: ^latest_version

然后运行以下命令来安装：

flutter pub add master_detail_flow

使用入门

MDScaffold 小部件是构建主从界面流的入口点，只需几行代码即可轻松设置。

基本示例

以下是使用 MDScaffold 的基本示例：

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

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

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

  static const String _title = 'Example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.light,
        colorSchemeSeed: Colors.purple,
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        colorSchemeSeed: Colors.purple,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return MDScaffold(
      title: const Text('Simple flow'),
      items: [
        DrawerHeader(
          child: Center(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                'MasterDetailsFlow',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ),
          ),
        ),
        MDItem(
          title: const Text('Master item 1'),
          subtitle: const Text('Tap to learn about DetailsPageScaffold'),
          pageBuilder: (_) => const HomePageOne(),
        ),
        MDItem(
          title: const Text('Master item 2'),
          subtitle: const Text('Tap to learn about DetailsPageSliverList'),
          pageBuilder: (_) => const HomePageTwo(),
        ),
        MDItem(
          title: const Text('Master item 3'),
          pageBuilder: (_) => const HomePageThree(),
        ),
        const MDPadding(child: Divider()),
        MDItem(
          title: const Text('Master item 4'),
          subtitle: const Text('Master items can have icons'),
          leading: const Icon(Icons.unfold_more_double_outlined),
          pageBuilder: (_) => const HomePageFour(),
        ),
        MDPadding(
          child: ListTile(
            title: const Text('Open MDLicensePage'),
            onTap: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (_) => MDLicensesPage(
                    items: [
                      const MDLicensesPageHeader(
                        appIcon: FlutterLogo(),
                        appName: Text('MasterDetailFlow'),
                        appLegalese: 'Version 1.0',
                      ),
                      MDItem(
                        title: const Text('Privacy Policy'),
                        pageBuilder: (context) => const DetailsPageScaffold(
                          title: Text('App privacy policy'),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}

创建自定义流部分

逻辑分布在 MDScaffold、MDController、MDFlowView 和 DetailsPanelProvider 中。默认的 MDScaffold 使用包装在 MDController 中的 MDFlowView 来管理主面板和详细面板的显示。

关键组件

• MDScaffold: 处理布局。
• MDController: 管理状态。
• MDFlowView: 显示主从面板。
• DetailsPanelProvider: 提供详细页面所需的信息，如背景颜色和视图模式。

使用 MDController 和 DetailsPanelProvider

要创建一个可以对信息做出反应的主列表项（如视图模式或打开页面），小部件需要与 MDController 进行交互。

获取视图模式

MDController.viewModeOf(context);

打开页面

MDController.of(context, listen: false)
            .selectPage(
              'page id',
              builder: (context) => DetailsPageScaffold(),
            );

页面 ID

页面 ID 存储在控制器中，可用于显示选定的小部件。

Widget(
  selected: controller.selectedPageId == ownId,
),

详细页面

如果 DetailsPageScaffold 和 DetailsPageSliverList 不符合需求，可以使用 DetailsPanelProvider 确保自定义布局具有所需的信息。

自定义详细页面需要适应视图模式。在 ViewMode.lateral 模式下，应用栏应将 autoImplyLeading 和 primary 设置为 false，以避免弹出 MDScaffold 或尝试使用安全区域。

final panel = DetailsPanelProvider.of(context);
final isPageMode = panel.viewMode == MDViewMode.page;
final backgroudColor = backgroundColor ?? panel.backgroundColor;