Flutter主从详情界面插件flutter_master_detail的使用

flutter_master_detail简介

flutter_master_detail 是一个简化构建自适应主从视图的 Flutter 包。这是一个相对无偏见的包，允许你在实现过程中自定义主从视图的几乎所有方面。

开始使用

导入包

在你的项目中导入 flutter_master_detail 包：

import 'package:flutter_master_detail/flutter_master_detail.dart';

使用示例

以下是一个完整的示例，展示了如何使用 MasterDetailsList 构建主从界面。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Master Detail Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MasterDetailScreen(),
    );
  }
}

class MasterDetailScreen extends StatelessWidget {
  const MasterDetailScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 示例数据
    final List<String> elementsList = [
      'Apple',
      'Banana',
      'Cherry',
      'Date',
      'Elderberry',
      'Fig',
      'Grape'
    ];

    return MasterDetailsList<String>(
      items: elementsList, // 主视图的数据列表
      masterItemBuilder: (context, data, isSelected) => ListTile(
        title: Text(data),
        selected: isSelected,
        onTap: () {
          // 点击主视图项时触发
          print('Selected item: $data');
        },
      ),
      detailsTitleBuilder: (context, data) => AppBar(
        title: Text('Details for $data'),
      ),
      detailsItemBuilder: (context, data) => Center(
        child: Text('Details of $data', style: TextStyle(fontSize: 20)),
      ),
      sortBy: (data) => data.length, // 按字符串长度排序
      groupedBy: (data) => data[0], // 按首字母分组
      groupHeaderBuilder: (context, data, itemsCount) => Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text('$data ($itemsCount items)'),
        ),
      ),
      title: const Text('Master View Title'), // 主视图标题
      masterViewFraction: 0.4, // 主视图宽度占比
      nothingSelectedWidget: Center(
        child: Text('Select something from the list'),
      ),
      transitionAnimationDuration: Duration(milliseconds: 500), // 动画持续时间
    );
  }
}