Flutter可点击列表轮播视图插件clickable_list_wheel_view的使用

简介

clickable_list_wheel_view 是 ListWheelScrollView 的一个简单包装，它允许子组件响应手势（如 onTap）事件。

安装

在你的 pubspec.yaml 文件的 dependencies: 部分添加以下行：

dependencies:
  clickable_list_wheel_view: latest_version

然后运行 flutter pub get 来安装插件。

使用方法

基本用法

你可以通过下面的方式快速开始使用这个插件：

ClickableListWheelScrollView(
  scrollController: _scrollController,
  itemHeight: _itemHeight,
  itemCount: _itemCount,
  onItemTapCallback: (index) {
    print("onItemTapCallback index: $index");
  },
  child: ListWheelScrollView.useDelegate(
    controller: _scrollController,
    itemExtent: _itemHeight,
    physics: FixedExtentScrollPhysics(),
    overAndUnderCenterOpacity: 0.5,
    perspective: 0.002,
    onSelectedItemChanged: (index) {
      print("onSelectedItemChanged index: $index");
    },
    childDelegate: ListWheelChildBuilderDelegate(
      builder: (context, index) => _child(index),
      childCount: _itemCount,
    ),
  ),
)

示例代码

以下是一个完整的示例代码，展示了如何使用 ClickableListWheelScrollView 插件：

import 'package:clickable_list_wheel_view/clickable_list_wheel_widget.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Material(
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final _scrollController = FixedExtentScrollController();

  static const double _itemHeight = 60;
  static const int _itemCount = 100;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: ClickableListWheelScrollView(
          scrollController: _scrollController,
          itemHeight: _itemHeight,
          itemCount: _itemCount,
          onItemTapCallback: (index) {
            print("onItemTapCallback index: $index");
          },
          child: ListWheelScrollView.useDelegate(
            controller: _scrollController,
            itemExtent: _itemHeight,
            physics: FixedExtentScrollPhysics(),
            overAndUnderCenterOpacity: 0.5,
            perspective: 0.002,
            onSelectedItemChanged: (index) {
              print("onSelectedItemChanged index: $index");
            },
            childDelegate: ListWheelChildBuilderDelegate(
              builder: (context, index) => _child(index),
              childCount: _itemCount,
            ),
          ),
        ),
      ),
    );
  }

  Widget _child(int index) {
    return SizedBox(
      height: _itemHeight,
      child: ListTile(
        leading: Icon(IconData(int.parse("0xe${index + 200}"), fontFamily: 'MaterialIcons'), size: 50),
        title: Text('Heart Shaker'),
        subtitle: Text('Description here'),
      ),
    );
  }
}

API详情

• child (required)：要包裹的目标 ListWheelScrollView。
• scrollController (required)：必须与列表和包装器相同。
• listHeight (optional)：ListWheelScrollView 的高度。
• itemHeight (required)：ListWheelScrollView 中每个子项的高度。
• itemCount (required)：ListWheelScrollView 中的项目数量。
• scrollOnTap (optional)：如果为 true，则列表将在点击时滚动。
• onItemTapCallback (optional)：设置一个处理 tap 事件的处理器。
• animationDuration (optional)：设置滚动动画的持续时间。
• loop (optional)：与 ListWheelChildLoopingListDelegate 一起使用时是否循环。