Flutter列表展示插件flutter_bullet_list的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter列表展示插件flutter_bullet_list的使用

目标功能

  • ✅ 单级无序列表
  • ✅ 自定义项目符号样式
  • ✅ 多级无序列表
  • ❌ 在项目符号上添加图标
  • ❌ 对每一级进行自定义设置

基本用法

实现单级列表

声明你的ListItemModel列表

final List<ListItemModel> data = [
    ListItemModel(label: "Flutter Simplified"),
    ListItemModel(label: "Flutter Simplified"),
    ListItemModel(label: "Flutter Simplified"),
    ListItemModel(label: "Flutter Simplified"),
    ListItemModel(label: "Flutter Simplified"),
];

将FlutterBulletList添加到你的widget树中

FlutterBulletList(
  data: data,
  textStyle: TextStyle(color: Colors.blue),
  bulletColor: Colors.red,
),

实现多级列表

在data键中添加List<ListItemModel>

final List<ListItemModel> data = [
    ListItemModel(
        label: "Flutter Simplified",
        data: [ListItemModel(label: "Follow Us on Instagram")],
    ),
    ListItemModel(
        label: "Flutter Simplified",
        data: [
            ListItemModel(
                label: "Flutter",
                data: [
                    ListItemModel(
                        label: "Simplified",
                        data: [ListItemModel(label: "Follow us")],
                    ),
                ],
            ),
        ],
    ),
];

属性

属性名称 用途
data ListItemComponent 列表
spaceBetweenItem 列表项之间的距离
bulletSize 项目符号指示器的大小
bulletType 项目符号指示器的设计
bulletColor 自定义项目符号指示器的颜色
bulletSpacing 项目符号指示器和字符串之间的距离

示例代码

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

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

class MyApp extends StatelessWidget {
  final List<ListItemModel> _data = [
    ListItemModel(
      label: "Flutter Simplified",
      data: [ListItemModel(label: "Follow Us on Instagram")],
    ),
    ListItemModel(
      label: "Flutter Simplified",
      data: [
        ListItemModel(
          label: "Flutter",
          data: [
            ListItemModel(
              label: "Simplified",
              data: [ListItemModel(label: "Follow us")],
            ),
          ],
        )
      ],
    ),
    ListItemModel(
      label: "Flutter",
      data: [ListItemModel(label: "Simplified")],
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example App',
      home: Scaffold(
        appBar: AppBar(),
        body: SingleChildScrollView(
          child: FlutterBulletList(
            data: _data,
            textStyle: TextStyle(color: Colors.blue),
            bulletColor: Colors.red,
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter中使用flutter_bullet_list插件来展示列表的示例代码。这个插件允许你以项目符号（子弹）的形式展示列表项，非常适合用于显示待办事项、功能列表等。

首先，确保你已经在pubspec.yaml文件中添加了flutter_bullet_list依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_bullet_list: ^最新版本号  # 请替换为最新的版本号

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

接下来，你可以在你的Flutter应用中使用BulletList组件。以下是一个完整的示例代码，展示如何在Flutter中使用flutter_bullet_list插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bullet List Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BulletListScreen(),
    );
  }
}

class BulletListScreen extends StatelessWidget {
  final List<String> listItems = [
    '第一项',
    '第二项',
    '第三项',
    '第四项',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Bullet List 示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: BulletList(
          bulletStyle: BulletStyle(
            color: Colors.blue,
            size: 24.0,
          ),
          listItems: listItems.map((item) {
            return BulletItem(
              title: Text(item),
            );
          }).toList(),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 导入必要的包：我们导入了flutter/material.dart和flutter_bullet_list/flutter_bullet_list.dart。

  2. 定义应用入口：MyApp类是我们的应用入口，它创建了一个MaterialApp并设置了主页面为BulletListScreen。

  3. 创建主页面：BulletListScreen是一个无状态组件，它包含一个列表项listItems。

  4. 构建UI：在BulletListScreen的build方法中，我们创建了一个Scaffold，并在其body中放置了一个带有内边距的BulletList。

  5. 配置BulletList：我们设置了bulletStyle来定义子弹的颜色和大小，并通过listItems属性将字符串列表映射为BulletItem列表。

这个示例展示了如何使用flutter_bullet_list插件来创建一个简单的项目符号列表。你可以根据需要进一步自定义子弹的样式和列表项的内容。

回到顶部