Flutter水平列表展示插件horizontal_list的使用

描述

horizontal_list 是一个Flutter插件，它提供了一个带有“上一页”和“下一页”按钮的水平列表组件。你可以自定义卡片内容，并将其插入到 HorizontalListView 组件中。以下是该插件的一些特性：

• 版本：查看最新版本
• 许可证：MIT
• 代码覆盖率：Codecov
• 代码质量：CodeFactor Grade

使用方法

添加依赖

在你的 pubspec.yaml 文件中添加 horizontal_list 依赖：

dependencies:
  horizontal_list: ^latest_version # 替换为最新版本号

然后运行以下命令来获取依赖包：

flutter packages get

示例代码

下面是一个完整的示例代码，展示了如何使用 horizontal_list 插件创建一个水平滚动的列表。

import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:horizontal_list/horizontal_list.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Horizontal list Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Horizontal list Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> _itemsComponent() {
    List<Widget> myList = [];
    for (var i = 0; i < 7; i++) {
      myList.add(Container(
        width: 300,
        color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
        child: Center(
          child: Text('Card ${i + 1}', style: const TextStyle(fontWeight: FontWeight.bold)),
        ),
      ));
    }
    return myList;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          const SizedBox(height: 150),
          HorizontalListView(
            width: double.maxFinite,
            height: 200,
            list: _itemsComponent(),
            iconPrevious: const Icon(Icons.arrow_back_ios),
            iconNext: const Icon(Icons.arrow_forward_ios),
            isStartedFromEnd: false,
            itemWidth: 300,
            onChanged: (index) {
              print('Current index: $index');
            },
            onPreviousPressed: () {
              // 在点击上一页按钮时执行的操作
              print('onPreviousPressed');
            },
            onNextPressed: () {
              // 在点击下一页按钮时执行的操作
              print('onNextPressed');
            },
          ),
        ],
      ),
    );
  }
}

参数说明

HorizontalListView 的主要参数如下：

• width: 宽度，默认为 double.maxFinite
• height: 高度
• list: 列表项，类型为 List<Widget>
• iconPrevious: 上一页按钮图标
• iconNext: 下一页按钮图标
• isStartedFromEnd: 是否从末尾开始，默认为 false
• itemWidth: 每个项目的宽度
• onChanged: 当当前显示项目改变时触发的回调函数
• onPreviousPressed: 点击上一页按钮时触发的回调函数
• onNextPressed: 点击下一页按钮时触发的回调函数

通过这些参数，你可以灵活地定制水平列表的外观和行为。希望这个指南能帮助你快速上手 horizontal_list 插件！如果有任何问题或需要进一步的帮助，请随时提问。