Flutter汉字书写动画插件kanji_drawing_animation的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter汉字书写动画插件kanji_drawing_animation的使用

kanji_drawing_animation 是一个用于绘制带有正确笔画顺序的汉字的 Flutter 小部件。该插件使用的汉字笔画数据来自 KanjiVG。

特性

  • 绘制汉字。
  • 可自定义速度。
  • 支持浅色和深色主题。

基本用法

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Kanji Drawing Demo')),
        body: const Center(
          child: SizedBox(
            height: 100,
            child: KanjiDrawingAnimation('电', speed: 50), // 电 是 "电" 的简体字形式
          ),
        ),
      ),
    );
  }
}

完整示例

以下是一个完整的示例，展示如何在 Column 中使用多个 KanjiDrawingAnimation 小部件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Kanji Drawing Demo')),
        body: Column(
          children: '人人食物电繁'.split('').map(wrap).toList(),
        ),
      ),
    );
  }

  // 将动画汉字包裹在一个固定高度的卡片中
  Widget wrap(String kanji) => 
    Card(child: SizedBox(height: 100, child: KanjiDrawingAnimation(kanji)));
}

更多关于Flutter汉字书写动画插件kanji_drawing_animation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter汉字书写动画插件kanji_drawing_animation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用kanji_drawing_animation插件来实现汉字书写动画的示例代码。这个插件允许你创建流畅的汉字书写动画效果。

首先，确保你已经在pubspec.yaml文件中添加了kanji_drawing_animation依赖：

dependencies:
  flutter:
    sdk: flutter
  kanji_drawing_animation: ^最新版本号  # 请替换为最新版本号

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

接下来，你可以在你的Flutter项目中使用该插件。以下是一个完整的示例代码，展示了如何创建一个简单的汉字书写动画：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kanji Drawing Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: KanjiDrawingScreen(),
    );
  }
}

class KanjiDrawingScreen extends StatefulWidget {
  @override
  _KanjiDrawingScreenState createState() => _KanjiDrawingScreenState();
}

class _KanjiDrawingScreenState extends State<KanjiDrawingScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kanji Drawing Animation'),
      ),
      body: Center(
        child: KanjiDrawingAnimation(
          kanji: '你', // 要绘制的汉字
          controller: _controller,
          color: Colors.black,
          size: 100.0,
          strokeWidth: 3.0,
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个Flutter应用，并在pubspec.yaml中添加了kanji_drawing_animation依赖。
  2. 在MyApp类中，我们设置了应用的主题和主页。
  3. KanjiDrawingScreen是一个有状态的组件，它包含一个AnimationController，用于控制汉字书写动画的播放。
  4. 在initState方法中，我们初始化了AnimationController并设置了动画的持续时间，然后让动画反复播放（..repeat(reverse: true)）。
  5. 在build方法中，我们使用KanjiDrawingAnimation小部件来显示汉字书写动画。你可以通过kanji属性指定要绘制的汉字，通过controller属性绑定动画控制器，以及通过color、size和strokeWidth属性调整动画的外观。

确保你已经在项目中正确配置了所有依赖，并且已经导入了必要的包。运行这个示例代码，你应该能看到一个汉字“你”以动画形式书写的效果。

回到顶部