Flutter自定义图标接口插件nothing_glyph_interface的使用

Flutter自定义图标接口插件nothing_glyph_interface的使用

法律声明

我与Nothing没有任何关系,并且不拥有其任何物理或数字产品的权利。包含的jar文件是Nothing的财产。

注意事项

为了让此插件在真实的Nothing设备上正常工作,必须首先启用图标调试:

adb shell settings put global nt_glyph_interface_debug_enable 1

调试模式将在48小时后自动禁用以防止SDK被滥用。对于后续发布,请联系Nothing获取正确的API密钥,并将其添加到您的AndroidManifest.xml文件中。

<!-- 这个标签应该添加在application标签内 -->
<meta-data android:name="NothingKey" android:value="{Your APIKey}" />

使用方法

一般来说,该插件的实现方式与Glyph Developer Kit相同。

基本设置

创建一个NothingGlyphInterface实例:

NothingGlyphInterface _nothingGlyphInterface = NothingGlyphInterface();

检查Android设备是否为Nothing Phone 1, Phone 2, Phone 2a 或 Phone 2a Plus:

bool isPhone1 = await _nothingGlyphInterface.is20111();
bool isPhone2 = await _nothingGlyphInterface.is22111();
bool isPhone2a = await _nothingGlyphInterface.is23111();
bool isPhone2aPlus = await _nothingGlyphInterface.is23113();

监听Glyph连接流。插件应在应用启动时尝试连接到Glyph接口,并在应用结束时关闭连接。

_nothingGlyphInterface.onServiceConnection.listen((bool connected) {
  print("connected: $connected");
});

获取Glyph接口的当前状态:

int? period = await _glyphInterfacePlugin.getPeriod();
int? cycles = await _glyphInterfacePlugin.getCycles();
int? interval = await _glyphInterfacePlugin.getInterval();
List<int>? channel = await _glyphInterfacePlugin.getChannel();

触发Glyph接口

请使用提供的GlyphFrameBuilder来创建Glyph帧:

// 基本示例
await _glyphInterfacePlugin.buildGlyphFrame(GlyphFrameBuilder()
    .buildChannelA()
    .build()
);

// 更复杂的示例
await _glyphInterfacePlugin.buildGlyphFrame(GlyphFrameBuilder()
    .buildChannelA()
    .buildChannel(NothingPhone2.c3)
    .buildPeriod(2000)
    .buildCycles(3)
    .buildInterval(1000)
    .build()
);

创建Glyph帧后,必须触发它使接口点亮:

// 用于启用/禁用在GlyphFrame中设置的通道。
await _glyphInterfacePlugin.toggle();

// 用于使用在GlyphFrame中设置的通道、周期和间隔参数进行呼吸动画。
await _glyphInterfacePlugin.animate();

// 用于在C1/D1上显示进度值。
await _glyphInterfacePlugin.displayProgress();

// 用于同时在所有Glyphs上切换(除了C1/D1),并在C1/D1上显示进度值。
await _glyphInterfacePlugin.displayProgressAndToggle();

### 完整示例Demo

```dart
import 'package:flutter/material.dart';
import 'package:nothing_glyph_interface/nothing_glyph_interface.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  late NothingGlyphInterface _glyphInterfacePlugin;

  [@override](/user/override)
  void initState() {
    _glyphInterfacePlugin = NothingGlyphInterface();
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FutureBuilder(
                future: _glyphInterfacePlugin.is20111(),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const CircularProgressIndicator();
                  }

                  return Text('Is Nothing Phone 1: ${snapshot.data}', textAlign: TextAlign.center);
                },
              ),
              FutureBuilder(
                future: _glyphInterfacePlugin.is22111(),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const CircularProgressIndicator();
                  }

                  return Text('Is Nothing Phone 2: ${snapshot.data}', textAlign: TextAlign.center);
                },
              ),
              FutureBuilder(
                future: _glyphInterfacePlugin.is23111(),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const CircularProgressIndicator();
                  }

                  return Text('Is Nothing Phone 2a: ${snapshot.data}', textAlign: TextAlign.center);
                },
              ),
              FutureBuilder(
                future: _glyphInterfacePlugin.is23113(),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const CircularProgressIndicator();
                  }

                  return Text('Is Nothing Phone 2a Plus: ${snapshot.data}', textAlign: TextAlign.center);
                },
              ),
              const SizedBox(height: 30),
              ElevatedButton(
                onPressed: () async {
                  await _glyphInterfacePlugin.buildGlyphFrame(
                      GlyphFrameBuilder().buildChannelA().buildChannel(NothingPhone2.c3).buildPeriod(2000).buildCycles(3).buildInterval(1000).build());
                  await _glyphInterfacePlugin.animate();
                },
                child: const Text("测试"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自定义图标接口插件nothing_glyph_interface的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义图标接口插件nothing_glyph_interface的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中集成和使用自定义图标接口插件 nothing_glyph_interface 的一个示例代码案例。假设该插件已经发布在pub.dev上,并且你已经在 pubspec.yaml 文件中添加了依赖。

1. 添加依赖

首先,确保在 pubspec.yaml 文件中添加了 nothing_glyph_interface 依赖:

dependencies:
  flutter:
    sdk: flutter
  nothing_glyph_interface: ^最新版本号  # 替换为实际的最新版本号

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入该插件:

import 'package:nothing_glyph_interface/nothing_glyph_interface.dart';

3. 使用插件

假设 nothing_glyph_interface 插件提供了一个方法 getIconData 来获取自定义图标的 IconData,以下是如何使用它的示例:

import 'package:flutter/material.dart';
import 'package:nothing_glyph_interface/nothing_glyph_interface.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: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 假设 getIconData 是插件提供的方法,并返回一个 IconData 对象
    // 这里我们需要传入自定义图标的标识,例如 'custom-icon-name'
    IconData customIconData = getIconData('custom-icon-name');

    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Icon Demo'),
      ),
      body: Center(
        child: Icon(
          customIconData,
          size: 48,
          color: Colors.blue,
        ),
      ),
    );
  }
}

// 假设这是插件内部可能实现的方法(实际上这部分代码应该在插件的源码中)
IconData getIconData(String iconName) {
  // 这里应该根据图标名称返回相应的 IconData 对象
  // 示例:返回一个硬编码的 IconData 对象(实际插件会有更复杂的逻辑)
  return IconData(
    0xe800, // 假设的 Unicode 码点
    fontFamily: 'CustomIcons', // 字体家族名称
    fontPackage: null, // 如果图标字体包在本地,则为 null;否则为包名
  );
}

// 注意:上面的 getIconData 方法只是为了演示插件可能的工作原理,
// 实际使用时你应该直接使用插件提供的 API,而不是自己实现。

注意事项

  1. 实际插件 API:上面的 getIconData 方法只是假设插件可能提供的 API,你需要查阅插件的官方文档以了解实际提供的 API 和用法。
  2. 图标字体:如果自定义图标是通过字体文件提供的,确保字体文件已正确添加到项目中,并在 pubspec.yaml 中进行配置。
  3. 错误处理:在实际应用中,添加适当的错误处理逻辑,以处理可能发生的异常,例如图标名称不存在的情况。

希望这个示例代码案例对你有所帮助!如果有任何其他问题,欢迎继续提问。

回到顶部