Flutter可穿戴设备旋转输入插件wearable_rotary的使用

wearable_rotary

wearable_rotary 是一个Flutter插件，可以监听Wear OS和Tizen Galaxy手表设备上的旋转事件。

Setup

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)
        }
    }
}

Usage

要在项目中使用此插件，在 pubspec.yaml 文件中添加 wearable_rotary 作为依赖项。

dependencies:
  wearable_rotary: ^2.0.1

然后在Dart代码中导入 wearable_rotary 包。

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

// Be informed when an event (RotaryEvent.clockwise or RotaryEvent.counterClockwise) occurs.
StreamSubscription<RotaryEvent> rotarySubscription =
    rotaryEvents.listen((RotaryEvent event) {
  if (event.direction == RotaryDirection.clockwise) {
    // Do something.
  } else if (event.direction == RotaryDirection.counterClockwise) {
    // Do something.
  }
});

// Be sure to cancel on dispose.
rotarySubscription.cancel();

// Use [RotaryScrollController] to easily make scrolling widgets respond to rotary input.
ListView(controller: RotaryScrollController());

Supported devices

• Wear OS设备（如Galaxy Watch 4、Pixel Watch等）带有旋转输入功能。
• 运行Tizen 5.5的Galaxy Watch系列。

示例代码

下面是一个完整的示例应用程序，演示了如何使用 wearable_rotary 插件来处理旋转事件，并将这些事件应用于水平或垂直滚动视图。

// Copyright 2021 Samsung Electronics Co., Ltd. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// ignore_for_file: public_member_api_docs

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

void main() {
  runApp(
    MaterialApp(
      title: 'Rotary example app',
      home: const MyApp(),
      // Set the target platform to iOS so that navigation behaves as expected for a wearable app
      theme: ThemeData(platform: TargetPlatform.iOS),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Rotary example app')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: const Text('HorizontalScrollView'),
              onPressed: () {
                Navigator.push<dynamic>(
                  context,
                  MaterialPageRoute<dynamic>(
                    builder: (BuildContext context) => const RotaryScrollPage(
                      scrollDirection: Axis.horizontal,
                    ),
                  ),
                );
              },
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              child: const Text('VerticalScrollView'),
              onPressed: () {
                Navigator.push<dynamic>(
                  context,
                  MaterialPageRoute<dynamic>(
                    builder: (BuildContext context) =>
                        const RotaryScrollPage(scrollDirection: Axis.vertical),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class RotaryScrollPage extends StatelessWidget {
  const RotaryScrollPage({super.key, required this.scrollDirection});

  final Axis scrollDirection;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          scrollDirection == Axis.vertical
              ? 'VerticalScrollView'
              : 'HorizontalScrollView',
        ),
      ),
      body: Center(
        child: ListView.builder(
          padding: const EdgeInsets.all(16),
          controller: RotaryScrollController(),
          scrollDirection: scrollDirection,
          itemCount: 1000,
          itemBuilder: (BuildContext context, int index) => Text('Item $index'),
        ),
      ),
    );
  }
}

这个示例展示了如何创建一个包含两个按钮的应用程序，点击按钮后会导航到一个新的页面，该页面根据选择的方向（水平或垂直）显示一个可滚动的列表。通过使用 RotaryScrollController，列表能够响应旋转输入事件，提供更自然的用户体验。