rotary_scrollbar

Flutter 实现原生外观的 Wear OS 圆形滚动条。

它可以围绕 PageView、ListView 或任何其他可滚动视图进行包装。

它能够通过旋钮输入控制视图的 ScrollController 或 PageController，包括每次旋钮事件的触觉反馈。

Screenshot_1671591814

设置

Wear OS (Android)

此包依赖于 wearable_rotary，需要在 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)
        }
    }
}

此包依赖于 vibration，需要访问 VIBRATE 权限，因此请确保将以下内容添加到 AndroidManifest.xml

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

用法

要使用此插件，请在您的 pubspec.yaml 文件中将 rotary_scrollbar 添加为依赖项。

dependencies:
  rotary_scrollbar: ^0.1.1

然后，在您的 Dart 代码中导入 rotary_scrollbar。

// Import the package.
import 'package:rotary_scrollbar/rotary_scrollbar.dart';

ListView

class WatchScreen extends StatefulWidget {
  const WatchScreen({super.key});

  @override
  State<WatchScreen> createState() => _WatchScreenState();
}

class _WatchScreenState extends State<WatchScreen> {
  final scrollController = ScrollController();

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: RotaryScrollWrapper(
        rotaryScrollbar: RotaryScrollbar(
          controller: scrollController,
        ),
        child: ListView.builder(
          controller: scrollController,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.only(
                bottom: 10,
              ),
              child: Container(
                color: Colors.blue.withRed(((255 / 29) * index).toInt()),
                width: 50,
                height: 50,
                child: Center(child: Text('box $index')),
              ),
            );
          },
          itemCount: 30,
        ),
      ),
    );
  }
}

PageView

class WatchScreen extends StatefulWidget {
  const WatchScreen({super.key});

  @override
  State<WatchScreen> createState() => _WatchScreenState();
}

class _WatchScreenState extends State<WatchScreen> {
  final pageController = PageController();

  @override
  void dispose() {
    pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: RotaryScrollWrapper(
        rotaryScrollbar: RotaryScrollbar(
          controller: pageController,
        ),
        child: PageView(
          scrollDirection: Axis.vertical,
          controller: pageController,
          children: const [
            Page1(),
            Page2(),
            Page3(),
          ],
        ),
      ),
    );
  }
}

支持的设备

  • 具有旋钮输入和圆形屏幕的 Wear OS 设备（如 Galaxy Watch 4、Pixel Watch 等）

GitHub

查看 Github