Flutter旋转滚动条插件rotary_scrollbar的使用

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

Flutter旋转滚动条插件rotary_scrollbar的使用

介绍

rotary_scrollbar 是一个为 Wear OS 设计的 Flutter 包，提供了优化了旋钮输入和圆形屏幕的圆形滚动条。它可以增强如 ListView、PageView 和 CustomScrollView 等滚动控件的用户体验。

特性

  • Native Experience：曲线滚动条设计用于圆形 Wear OS 显示屏。
  • Rotary Input：全面支持旋转表圈/表冠，并带有触觉反馈（通过 RotaryScrollbar）。
  • Auto-Hide：在不活动后滚动条会淡出（可配置持续时间和动画效果）。
  • Customizable：可以调整颜色、填充、宽度和动画曲线。
  • Scrollable-Ready：与任何 ScrollController 或 PageController 兼容。
  • Device Support：Galaxy Watch 4/5、Pixel Watch 以及其他运行 Wear OS 3+ 的设备。

RoundScrollbar vs RotaryScrollbar

功能 RoundScrollbar RotaryScrollbar
Visual Scrollbar ✅ 曲线轨道/滑块 ✅ 继承自 RoundScrollbar
Rotary Input ❌ ✅ 带触觉反馈
Page Transitions ❌ ✅ 平滑页面动画
Auto-Hide ✅ ✅

何时使用

  • RotaryScrollbar：适用于使用旋钮输入的 Wear OS 应用。
  • RoundScrollbar：适用于仅触摸交互或自定义滚动逻辑。

快速开始

最小示例

RotaryScrollbar(
  controller: ScrollController(),
  child: ListView.builder(
    itemBuilder: (_, index) => ListTile(title: Text('Item $index')),
  ),
)

设置

1. 添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  rotary_scrollbar: ^1.1.0

2. 配置 Wear OS（Android）

旋钮输入

在 MainActivity.kt 中添加以下代码：

import android.view.MotionEvent
import com.samsung.wearable_rotary.WearableRotaryPlugin

class MainActivity : FlutterActivity() {
    override fun onGenericMotionEvent(event: MotionEvent?): Boolean {
        return when {
            WearableRotaryPlugin.onGenericMotionEvent(event) -> true
            else -> super.onGenericMotionEvent(event)
        }
    }
}
振动权限

在 AndroidManifest.xml 中添加振动权限：

<uses-permission android:name="android.permission.VIBRATE"/>

使用

使用 RoundScrollbar（基本）

RoundScrollbar(
  controller: ScrollController(),
  child: ListView.builder(
    itemBuilder: (_, index) => ListTile(title: Text("Item $index")),
  ),
)

使用 RotaryScrollbar（全功能）

RotaryScrollbar(
  controller: PageController(),
  child: PageView(
    children: [Page1(), Page2(), Page3()],
  ),
)

高级配置

自定义外观

RotaryScrollbar(
  width: 12,                  // 厚度
  padding: 16,                // 距离屏幕边缘的距离
  trackColor: Colors.grey,    // 滚动条轨道颜色
  thumbColor: Colors.blue,    // 滚动条滑块颜色
  autoHideDuration: Duration(seconds: 5),
  // ...其他参数
)

禁用触觉反馈

RotaryScrollbar(
  hasHapticFeedback: false,   // 关闭震动
  // ...
)

更多关于Flutter旋转滚动条插件rotary_scrollbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter旋转滚动条插件rotary_scrollbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用rotary_scrollbar插件的示例代码。这个插件提供了一个旋转滚动条控件，可以用于增强用户界面的交互体验。

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

dependencies:
  flutter:
    sdk: flutter
  rotary_scrollbar: ^最新版本号  # 请替换为实际发布的最新版本号

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

接下来，你可以在你的Flutter项目中创建一个包含旋转滚动条的页面。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rotary Scrollbar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Rotary Scrollbar Demo'),
        ),
        body: Center(
          child: RotaryScrollbarDemo(),
        ),
      ),
    );
  }
}

class RotaryScrollbarDemo extends StatefulWidget {
  @override
  _RotaryScrollbarDemoState createState() => _RotaryScrollbarDemoState();
}

class _RotaryScrollbarDemoState extends State<RotaryScrollbarDemo> {
  final List<String> items = List.generate(50, (index) => 'Item $index');
  double _scrollPosition = 0.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Expanded(
          child: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(items[index]),
              );
            },
            controller: ScrollController(
              initialScrollOffset: _scrollPosition,
              ..addListener(() {
                setState(() {
                  _scrollPosition = controller.position.pixels;
                });
              }),
            )..addListener(() {
              final ScrollController controller =
                  ListView.of(context)?.controller;
              if (controller != null) {
                setState(() {
                  _scrollPosition = controller.position.pixels;
                });
              }
            }),
          ),
        ),
        SizedBox(height: 20),
        RotaryScrollbar(
          scrollPosition: _scrollPosition,
          scrollExtent: items.length * kMinInteractiveDimension,
          viewportDimension: MediaQuery.of(context).size.height - kToolbarHeight - 50,
          onChanged: (value) {
            setState(() {
              final ScrollController controller =
                  ListView.of(context)?.controller;
              if (controller != null) {
                controller.animateTo(
                  value,
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeInOut,
                );
              }
            });
          },
        ),
      ],
    );
  }
}

代码说明：

  1. 依赖导入：首先，在pubspec.yaml文件中添加rotary_scrollbar依赖。
  2. UI结构：在MyApp中定义了一个基本的Material应用，并在主页面中使用RotaryScrollbarDemo组件。
  3. 数据列表：在RotaryScrollbarDemo组件中，定义了一个包含50个条目的列表。
  4. 滚动监听：使用ListView.builder来构建列表，并通过ScrollController监听滚动位置的变化。
  5. 旋转滚动条：使用RotaryScrollbar组件，并将滚动位置、滚动范围、视口维度绑定到列表的滚动控制器上。
  6. 滚动更新：当旋转滚动条的值变化时，通过ScrollController的animateTo方法平滑地滚动到指定位置。

请注意，这个示例代码假设你已经正确安装了rotary_scrollbar插件，并且Flutter环境配置无误。在实际项目中，你可能需要根据具体需求对代码进行调整。

回到顶部