Flutter列表展示插件bulleted_list的使用

Flutter列表展示插件bulleted_list的使用

示例

Flutter Web

Padding(
  padding: const EdgeInsets.all(8.0),
  child: ResponsiveGridRow(
    children: [
      ResponsiveGridCol(sm: 12, md: 4, child: Container()),
      ResponsiveGridCol(
        sm: 12,
        md: 4,
        child: Column(
          children: [
            Text(
              '无缝查看',
              style: TextStyles.h1,
              textAlign: TextAlign.center,
            ),
            _para(
                '您可以像在手机上一样查看本地云或任何其他云服务*上的照片和视频。'),
            BulletedList(
              bullet: Icon(
                Icons.check,
                color: Colors.green,
              ),
              listItems: [
                '当您处于本地网络时，可以查看本地云上的照片。',
                '您可以几乎在任何地方查看您的媒体 - 升级到AcmePhoto的云服务',
                '您还可以选择使用自己的Amazon AWS或Google Cloud帐户'
              ],
            ),
          ],
        ),
      ),
    ],
  ),
)

Android Phone

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

  @override
  Widget build(BuildContext context) {
    final List<String> names =
        List.generate(5, (index) => '${mockName()}: ${mockLocation()}');
    final List<Widget> widgets = List.generate(
      5,
      (index) => Container(
        width: 200,
        height: 100,
        child: Card(
          elevation: 8,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Url: ${mockUrl()}'),
              Text('ID: ${mockUUID()}'),
              Text('Date:${mockDate()}'),
            ],
          ),
        ),
      ),
    );
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text('Bulleted List Demo'),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: Container(
          height: 1400,
          alignment: Alignment.center,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              BulletedList(
                listItems: names,
                listOrder: ListOrder.ordered,
              ),
              BulletedList(
                listItems:names,
                listOrder: ListOrder.ordered,
                bulletType: BulletType.numbered,
              ),
              BulletedList(
                listItems: widgets,
                bullet: Icon(Icons.star),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

特性

  • 生成有序、无序和编号列表。
  • 列表可以是字符串或任意小部件。
  • 可以自定义生成列表的所有组件的样式。

使用方法

首先，导入包：

import 'package:bulleted_list/bulleted_list.dart';

然后，使用BulletedList小部件，并指定列表和选项：

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    BulletedList(
      listItems: names,
      listOrder: ListOrder.ordered,
    ),
    BulletedList(
      listItems:names,
      listOrder: ListOrder.ordered,
      bulletType: BulletType.numbered,
    ),
    BulletedList(
      listItems: widgets,
      bullet: Icon(Icons.star),
    ),
  ],
);

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

1 回复

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


当然，以下是一个关于如何在Flutter中使用bulleted_list插件来展示列表的示例代码。bulleted_list插件允许你以带项目符号的形式展示列表项，非常适合用来展示待办事项、菜单项等。

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

dependencies:
  flutter:
    sdk: flutter
  bulleted_list: ^x.y.z  # 替换为实际的版本号

然后，运行flutter pub get来安装依赖。

接下来是一个简单的示例，展示如何在Flutter应用中使用bulleted_list插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bulleted List Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bulleted List Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: BulletedListView(
            // 设置项目符号的样式
            bulletStyle: BulletStyle(
              color: Colors.black,
              size: 18.0,
            ),
            // 列表项的数据
            items: [
              '第一项',
              '第二项',
              '第三项',
              '第四项',
            ],
            // 自定义每个列表项的样式
            itemBuilder: (context, index, item) {
              return Text(
                item,
                style: TextStyle(fontSize: 18, color: Colors.black),
              );
            },
          ),
        ),
      ),
    );
  }
}

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

  1. 导入bulleted_list包。
  2. 在MyApp组件中，创建了一个MaterialApp，并在其home属性中设置了一个Scaffold。
  3. 在Scaffold的body中，使用Padding为内容添加了一些内边距。
  4. 使用BulletedListView来创建带项目符号的列表。你可以通过bulletStyle属性来自定义项目符号的样式，如颜色和大小。
  5. 使用items属性来传递列表项的数据。
  6. 使用itemBuilder属性来自定义每个列表项的样式。在这个示例中，我们简单地返回了一个Text组件，但你可以根据需求进行更复杂的自定义。

这样，你就可以在Flutter应用中展示一个带项目符号的列表了。如果你需要更多高级的功能，可以查阅bulleted_list插件的官方文档。

回到顶部