Flutter图形渲染插件skgl_flutter的使用

Flutter图形渲染插件skgl_flutter的使用

安装

在你的 pubspec.yaml 文件中添加 skgl_flutter 作为依赖项。

dependencies:
  skgl_flutter: ^版本号

然后导入 SKGL：

import 'package:skgl_flutter/skgl_flutter.dart';

生成一个密钥

以下是如何使用 skgl_flutter 生成一个包含特定功能的密钥：

final key = SerialKey.build('a-secret',
    config: SerialKeyBuildConfig(
      features: {1, 3, 5}, // 特定功能的集合
      duration: 30, // 密钥的有效天数
      chunk: true, // 是否分段
    ));

print(key.text); // 输出类似 "XXXXX-XXXXX-XXXXX-XXXXX" 的密钥

解码一个密钥

以下是如何解码一个已经生成的密钥：

final key = SerialKey('XXXXX-XXXXX-XXXXX-XXXXX', 'a-secret');

var createdOn = key.createdOn; // 密钥创建时间
var expiresOn = key.expiresOn; // 密钥过期时间
var features = key.features; // 密钥包含的功能
var isExpired = key.calculateIsExpired(); // 检查密钥是否已过期
var daysLeft = key.calculateDaysLeft(); // 剩余天数

UI 示例

skgl_flutter 提供了一个示例项目来演示如何生成或验证密钥。以下是该示例项目的部分代码：

import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_advanced_segment/flutter_advanced_segment.dart';
import 'package:skgl_flutter_example/pages/about.dart';
import 'package:skgl_flutter_example/pages/generate.dart';
import 'package:skgl_flutter_example/pages/validate.dart';
import 'package:skgl_flutter_example/resources/colors.dart';
import 'package:skgl_flutter_example/resources/themes.dart';
import 'package:window_manager/window_manager.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (!kIsWeb && (Platform.isMacOS || Platform.isWindows || Platform.isLinux)) {
    await windowManager.ensureInitialized();

    const kSize = Size(800, 480);
    WindowOptions windowOptions = const WindowOptions(
      center: true,
      skipTaskbar: false,
      fullScreen: false,
      size: kSize,
      minimumSize: kSize,
      titleBarStyle: TitleBarStyle.normal,
      title: 'SKGL (flutter) UI',
    );

    windowManager.waitUntilReadyToShow(windowOptions, () async {
      await windowManager.show();
      await windowManager.focus();
    });
  }
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: Themes.appTheme(context),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _selectedSegment = ValueNotifier(0);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      body: SafeArea(
        child: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              child: ColoredBox(
                color: segmentBackgroundColor,
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: AdvancedSegment(
                    controller: _selectedSegment,
                    segments: const {
                      0: 'About',
                      1: 'Generate',
                      2: 'Validate',
                    },
                    shadow: null,
                    sliderOffset: 0.0,
                    borderRadius: BorderRadius.zero,
                    sliderColor: backgroundColor,
                    backgroundColor: segmentBackgroundColor,
                  ),
                ),
              ),
            ),
            SliverFillRemaining(
              hasScrollBody: false,
              child: ValueListenableBuilder(
                valueListenable: _selectedSegment,
                builder: (_, key, __) {
                  switch (key) {
                    case 1:
                      return const GeneratePage();
                    case 2:
                      return const ValidatePage();
                    default:
                      return const AboutPage();
                  }
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter图形渲染插件skgl_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图形渲染插件skgl_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


skgl_flutter 是一个 Flutter 插件，它允许你在 Flutter 应用中使用 Skia 图形库进行高性能的图形渲染。Skia 是 Google 开发的 2D 图形库，广泛用于 Chrome、Android、Flutter 等项目中。通过 skgl_flutter，你可以在 Flutter 中直接使用 Skia 的 API 来执行复杂的图形绘制操作。

安装 skgl_flutter

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

dependencies:
  flutter:
    sdk: flutter
  skgl_flutter: ^latest_version

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

使用 skgl_flutter

在 Flutter 中使用 skgl_flutter 通常涉及以下几个步骤：

  1. 导入库：在 Dart 文件中导入 skgl_flutter。
import 'package:skgl_flutter/skgl_flutter.dart';
  1. 创建 SkCanvasView：SkCanvasView 是一个自定义的 Flutter Widget，允许你使用 Skia 进行图形渲染。
SkCanvasView(
  onPaint: (SkCanvas canvas) {
    // 在这里使用 Skia API 进行绘制
    final paint = Paint()..color = Colors.red;
    canvas.drawCircle(Offset(100, 100), 50, paint);
  },
)

  1. 使用 Skia API 进行绘制：在 onPaint 回调中，你可以使用 Skia 的 API 来进行图形绘制。SkCanvas 对象提供了各种绘制方法，比如 drawCircle、drawRect、drawLine 等。

  2. 处理用户输入（可选）：你可以结合其他 Flutter Widget 和事件处理逻辑来处理用户输入，并根据输入动态更新图形。

示例：简单的图形绘制

以下是一个简单的示例，展示如何在 Flutter 中使用 skgl_flutter 绘制一个红色的圆：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Skgl Flutter Example')),
        body: Center(
          child: SkCanvasView(
            onPaint: (SkCanvas canvas) {
              final paint = Paint()..color = Colors.red;
              canvas.drawCircle(Offset(100, 100), 50, paint);
            },
          ),
        ),
      ),
    );
  }
}
回到顶部