Flutter两级列表插件list_twolevel的使用

Flutter两级列表插件list_twolevel的使用

使用

AListBuilder

import 'package:list_twolevel/list_A.dart';

List<Map<String, String>> listALevelObj = [
  {'title': 'Vue', 'image': 'assets/Vue.png'},
  {'title': 'Web', 'image': 'assets/Web.png'},
  {'title': 'Flutter', 'image': 'assets/Flutter.png'},
  {'title': 'UnrealEngine', 'image': 'assets/UnrealEngine.png'}
];
listA () {
  return AListBuilder(
    levelObj: listALevelObj,
    backgroundColor: const Color(0xFF2E2E48),
    onPressed: (selectedCategory) {
      debugPrint('点击了: $selectedCategory');
      setState(() {
        
      });
    },
  );
}

一级列表

BListBuilder

import 'package:list_twolevel/list_B.dart';

List<Map<String, String>> listBLevelObj = [
  {'title':'title1'},
  {'title':'title2'},
  {'title':'title3'},
  {'title':'title4'},
  {'title':'title5'},
];
listB () {
  return BListBuilder(
    levelObj: listBLevelObj,
    itemHeight: 50,
    backgroundColor: const Color(0xFF2E2E48),
    onPressed: (selectedTitle) {
      debugPrint('点击了: $selectedTitle');
      setState(() {
        
      });
    },
  );
}

二级列表

完整示例代码

以下是完整的示例代码，展示如何使用 AListBuilder 和 BListBuilder 构建一个两级列表。

import 'package:flutter/material.dart';
import 'package:list_twolevel/list_A.dart';
import 'package:list_twolevel/list_B.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 const MaterialApp(
      title: '两级列表示例',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 控制是否显示一级列表
  bool showLevelA = true;

  // 一级列表数据
  List<Map<String, String>> listALevelObj = [
    {'title': 'Vue', 'image': 'assets/Vue.png'},
    {'title': 'Web', 'image': 'assets/Web.png'},
    {'title': 'Flutter', 'image': 'assets/Flutter.png'},
    {'title': 'UnrealEngine', 'image': 'assets/UnrealEngine.png'}
  ];

  // 一级列表构建函数
  Widget listA() {
    return AListBuilder(
      levelObj: listALevelObj,
      backgroundColor: const Color(0xFF2E2E48),
      onPressed: (selectedCategory) {
        debugPrint('点击了一级分类: $selectedCategory');
        setState(() {
          showLevelA = false;
        });
      },
    );
  }

  // 二级列表数据
  List<Map<String, String>> listBLevelObj = [
    {'title': '子项1'},
    {'title': '子项2'},
    {'title': '子项3'},
    {'title': '子项4'},
    {'title': '子项5'},
  ];

  // 二级列表构建函数
  Widget listB() {
    return BListBuilder(
      levelObj: listBLevelObj,
      itemHeight: 50,
      backgroundColor: const Color(0xFF2E2E48),
      onPressed: (selectedTitle) {
        debugPrint('点击了二级分类: $selectedTitle');
        setState(() {
          showLevelA = true;
        });
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF464667),
      body: showLevelA ? listA() : listB(),
    );
  }
}

更多关于Flutter两级列表插件list_twolevel的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter两级列表插件list_twolevel的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


list_twolevel 是一个用于在 Flutter 中实现两级列表的插件。它允许你创建一个具有两级结构的列表，通常用于展示分类和子分类的数据。以下是如何使用 list_twolevel 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 list_twolevel 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  list_twolevel: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 list_twolevel 包：

import 'package:list_twolevel/list_twolevel.dart';

3. 创建数据模型

你需要为两级列表创建数据模型。通常，你会有一个父级列表和一个子级列表。例如：

class ParentItem {
  final String title;
  final List<ChildItem> children;

  ParentItem({required this.title, required this.children});
}

class ChildItem {
  final String title;

  ChildItem({required this.title});
}

4. 准备数据

准备一些示例数据：

List<ParentItem> data = [
  ParentItem(
    title: 'Category 1',
    children: [
      ChildItem(title: 'Subcategory 1.1'),
      ChildItem(title: 'Subcategory 1.2'),
    ],
  ),
  ParentItem(
    title: 'Category 2',
    children: [
      ChildItem(title: 'Subcategory 2.1'),
      ChildItem(title: 'Subcategory 2.2'),
    ],
  ),
];

5. 使用 TwoLevelList 组件

在你的 Widget 中使用 TwoLevelList 组件来展示两级列表：

class MyHomePage extends StatelessWidget {
  final List<ParentItem> data = [
    ParentItem(
      title: 'Category 1',
      children: [
        ChildItem(title: 'Subcategory 1.1'),
        ChildItem(title: 'Subcategory 1.2'),
      ],
    ),
    ParentItem(
      title: 'Category 2',
      children: [
        ChildItem(title: 'Subcategory 2.1'),
        ChildItem(title: 'Subcategory 2.2'),
      ],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Two Level List Example'),
      ),
      body: TwoLevelList<ParentItem, ChildItem>(
        data: data,
        parentBuilder: (context, parent) => ListTile(
          title: Text(parent.title),
        ),
        childBuilder: (context, child) => ListTile(
          title: Text(child.title),
        ),
      ),
    );
  }
}

6. 运行应用

现在你可以运行你的 Flutter 应用，看到两级列表的效果。

7. 自定义

你可以根据需要自定义 parentBuilder 和 childBuilder 来改变父级和子级项的显示方式。

8. 处理点击事件

你可以在 parentBuilder 和 childBuilder 中添加 onTap 事件来处理用户点击：

TwoLevelList<ParentItem, ChildItem>(
  data: data,
  parentBuilder: (context, parent) => ListTile(
    title: Text(parent.title),
    onTap: () {
      // 处理父级项点击事件
    },
  ),
  childBuilder: (context, child) => ListTile(
    title: Text(child.title),
    onTap: () {
      // 处理子级项点击事件
    },
  ),
)
回到顶部