Flutter穿戴设备支持插件wear_os_plugin的使用

Flutter穿戴设备支持插件wear_os_plugin的使用

wear_os_plugin 是一个具有基本Wear OS功能的Flutter插件，例如带有旋转输入的可滚动视图或圆形屏幕支持。

圆形屏幕

默认情况下，所有应用程序都是全屏且为矩形。要使应用程序呈现为圆形，应用需要透明背景。当您像这样滑动掉应用程序时，圆形屏幕将可见：

除了应用的一般透明行为外，所有小部件都必须被剪裁，这由 WearOsClipper 类自动处理。

屏幕形状的一般信息由 WearOsApp 类处理。它有一个静态和可监听的成员值来保存有关圆形等信息。

这些值将通过使用 WearOsApp 或调用静态 init 方法来初始化。

圆形滚动条

默认滚动条是矩形的，就像基本屏幕布局一样。

WearOsScrollView 类负责滚动条：

矩形手表	圆形手表

开始使用

Wear OS

在您的Wear OS（Android）项目中进行以下更改：

android/app/build.gradle:

minSdkVersion 30

android/app/src/main/AndroidManifest.xml:

<application
    ...
    android:theme="@style/LaunchTheme"
    >
    <meta-data
        android:name="com.google.android.wearable.standalone"
        android:value="true" />
    ...
</application>

可能直接将启动主题更改为正常主题，以避免系统启动屏幕：

<application
    ...
    android:theme="@style/LaunchTheme"
    >
    <application
        ...
        android:theme="@style/NormalTheme"
    ...
</application>

振动和手表功能所需的权限已设置。

完整示例代码

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

import 'dart:developer';

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

import 'package:wear_os_plugin/wear_os_app.dart';
import 'package:wear_os_plugin/wear_os_clipper.dart';
import 'package:wear_os_plugin/wear_os_plugin.dart';
import 'package:wear_os_plugin/wear_os_scroll_view.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 获取一些有用的数据：
  String? appVersion = await WearOsPlugin.instance.getAppVersion();
  String? deviceModel = await WearOsPlugin.instance.getModel();

  // 启动应用：
  runApp(WearOsApp(
    screenBuilder: (context) {
      /// 正确处理Wear OS 4上的BACK按钮：
      WearOsPlugin.instance.keyEvents?.listen((event) {
        log('key event: key code = ${event.keyCode} ${event.down ? 'down' : 'up'}');
        /// 按下BACK键时，关闭顶层视图或整个应用：
        if (event.keyCode == KeyData.KEYCODE_BACK && event.down == false) {
          if (Navigator.of(context).canPop()) {
            Navigator.of(context).pop();
          } else {
            SystemNavigator.pop();
          }
        }
      });
      return MyApp(
        appVersion: appVersion,
        deviceModel: deviceModel,
      );
    },
  ));
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const WearOsClipper(
      child: Scaffold(
          backgroundColor: Colors.blue,
          body: Center(
              child: Text(
            'Close this view\n'
            'by using the\n'
            'BACK button\n'
            'on the side',
            textAlign: TextAlign.center,
          ))),
    );
  }
}

class MyApp extends StatefulWidget {
  final String? appVersion;
  final String? deviceModel;

  const MyApp({super.key, this.appVersion, this.deviceModel});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final scrollController = ScrollController();

  [@override](/user/override)
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  _buildList(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;

    List<Widget> items = [];

    // 顶部带有图标和简介文本：
    items.add(SizedBox(
      height: screenHeight / 2,
      child: Center(
        child: Text(
          'Device:\n${widget.deviceModel}',
          textAlign: TextAlign.center,
        ),
      ),
    ));

    // 填充列表，共30行：
    for (int index = 1; index <= 30; index++) {
      items.add(Container(
          color: (index & 1 == 0)
              ? const Color(0xff404040)
              : const Color(0xff202020),
          height: 40,
          child: Center(child: Text('Row #$index'))));
    }

    // 底部空间：
    items.add(SizedBox(
      height: screenHeight / 2,
      child: Center(
        child: ElevatedButton(
            child: const Text('Second Screen'),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const SecondScreen()),
              );
            }),
      ),
    ));

    return WearOsScrollView(
      controller: scrollController,
      autoHide: true, // 如果设置为false，则始终显示滚动条
      child: ListView(
        controller: scrollController,
        children: items,
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return WearOsClipper(
      child: Scaffold(backgroundColor: Colors.black, body: _buildList(context)),
    );
  }
}