Flutter三方库适配OpenHarmony【Simple Shader】片段着色器示例包使用指南

前言

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

在这里插入图片描述

在移动应用开发中，视觉效果是提升用户体验的重要因素之一。随着GPU性能的不断提升，使用片段着色器来创建复杂的视觉效果已经成为一种趋势。特别是在**鸿蒙（HarmonyOS）**平台上，如何实现跨平台的着色器效果一直是开发者们关注的焦点。今天，我们将深入探讨一个基于Flutter片段着色器的示例项目——Simple Shader，它完美适配了鸿蒙平台，为开发者提供了在Flutter应用中集成和使用GLSL片段着色器的完整解决方案。

一、插件介绍：基于Flutter片段着色器的视觉效果库

1.1 什么是Simple Shader

Simple Shader是一个基于Flutter片段着色器的示例项目，展示了如何在Flutter应用中集成和使用GLSL片段着色器。该插件使用flutter_shaders包来加载和渲染自定义片段着色器，能够在屏幕上创建流畅的视觉效果。

1.2 核心功能与特性

功能 描述 适用场景
片段着色器集成 使用Flutter的Shader API加载和渲染GLSL片段着色器 自定义视觉效果、动态背景
自定义着色器效果 实现了基于Flutter主题色的渐变背景效果 应用启动页、主题背景
响应式设计 着色器能够自适应不同屏幕尺寸 多设备适配
高性能渲染 利用GPU加速渲染，确保视觉效果流畅 实时视觉效果、动画背景
跨平台支持 同一套代码在Android、iOS和HarmonyOS上运行 跨平台应用开发

二、安装与配置

2.1 包的引入

由于这是一个自定义修改版本的包，需要通过Git形式引入。在项目的pubspec.yaml文件中添加以下依赖配置：

dependencies:
  simple_shader:
    git:
      url: "https://atomgit.com/"
      path: "packages/simple_shader/simple_shader"

同时，需要确保项目中已添加flutter_shaders依赖，因为simple_shader依赖此包：

dependencies:
  flutter_shaders: ^0.1.0

2.2 项目配置

在pubspec.yaml中添加着色器资源配置：

flutter:
  shaders:
    - packages/simple_shader/shaders/simple.frag

2.3 鸿蒙平台配置

💡 鸿蒙开发者请注意：插件已内置鸿蒙支持，无需额外配置，开箱即用！

三、核心API实战演练

3.1 基本使用示例

在Flutter应用中使用simple_shader的核心代码示例：

import 'package:flutter/material.dart';
import 'package:flutter_shaders/flutter_shaders.dart';
import 'dart:ui' as ui;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Shader Demo'),
      ),
      body: ShaderBuilder(
        assetKey: 'packages/simple_shader/shaders/simple.frag',
        (context, shader, child) => CustomPaint(
          size: MediaQuery.of(context).size,
          painter: ShaderPainter(shader: shader),
        ),
        child: const Center(
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }
}

class ShaderPainter extends CustomPainter {
  ShaderPainter({required this.shader});
  ui.FragmentShader shader;

  @override
  void paint(Canvas canvas, Size size) {
    // 设置着色器的分辨率参数
    shader.setFloat(0, size.width);
    shader.setFloat(1, size.height);

    // 创建使用着色器的画笔
    final paint = Paint()..shader = shader;
    // 绘制整个屏幕
    canvas.drawRect(
      Rect.fromLTWH(0, 0, size.width, size.height),
      paint,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

3.2 着色器文件解析

simple.frag是一个GLSL片段着色器文件，实现了基于Flutter主题色的渐变效果：

#version 460 core

#include <flutter/runtime_effect.glsl>

precision mediump float;

uniform vec2 resolution;
out vec4 fragColor;

// Flutter 主题色定义
vec3 flutterBlue = vec3(5, 83, 177) / 255;
vec3 flutterNavy = vec3(4, 43, 89) / 255;
vec3 flutterSky = vec3(2, 125, 253) / 255;

void main() {
  // 计算纹理坐标
  vec2 st = FlutterFragCoord().xy / resolution.xy;

  vec3 color = vec3(0.0);
  vec3 percent = vec3((st.x + st.y) / 2);

  // 创建渐变效果
  color =
      mix(mix(flutterSky, flutterBlue, percent * 2),
          mix(flutterBlue, flutterNavy, percent * 2 - 1), step(0.5, percent));

  fragColor = vec4(color, 1);
}

3.3 自定义着色器参数

在着色器中添加自定义参数，实现更灵活的效果：

#version 460 core

#include <flutter/runtime_effect.glsl>

precision mediump float;

uniform vec2 resolution;
uniform float time; // 时间参数
uniform vec3 color1; // 自定义颜色1
uniform vec3 color2; // 自定义颜色2
out vec4 fragColor;

void main() {
  // 计算纹理坐标
  vec2 st = FlutterFragCoord().xy / resolution.xy;

  // 添加时间动画
  st.x += sin(time * 0.5) * 0.1;
  st.y += cos(time * 0.3) * 0.1;

  vec3 color = vec3(0.0);
  vec3 percent = vec3((st.x + st.y) / 2);

  // 使用自定义颜色创建渐变效果
  color = mix(color1, color2, percent);

  fragColor = vec4(color, 1);
}

3.4 动态更新着色器参数

在Flutter代码中动态更新着色器参数：

import 'package:flutter/material.dart';
import 'package:flutter_shaders/flutter_shaders.dart';
import 'dart:ui' as ui;

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

  @override
  _AnimatedShaderPageState createState() => _AnimatedShaderPageState();
}

class _AnimatedShaderPageState extends State<AnimatedShaderPage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late double _time;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    )..repeat();
    _controller.addListener(() {
      setState(() {
        _time = _controller.value * 10.0;
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Animated Shader Demo'),
      ),
      body: ShaderBuilder(
        assetKey: 'packages/simple_shader/shaders/animated.frag',
        (context, shader, child) {
          // 更新着色器参数
          shader.setFloat(0, MediaQuery.of(context).size.width);
          shader.setFloat(1, MediaQuery.of(context).size.height);
          shader.setFloat(2, _time);
          shader.setFloat(3, 0.0); // color1.r
          shader.setFloat(4, 0.5); // color1.g
          shader.setFloat(5, 1.0); // color1.b
          shader.setFloat(6, 1.0); // color2.r
          shader.setFloat(7, 0.0); // color2.g
          shader.setFloat(8, 0.5); // color2.b

          return CustomPaint(
            size: MediaQuery.of(context).size,
            painter: ShaderPainter(shader: shader),
          );
        },
        child: const Center(
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }
}

四、API 速查表

API 功能描述 参数 返回值 鸿蒙支持
ShaderBuilder 加载和管理着色器 assetKey, builder, child Widget ✅ 支持
FragmentShader 片段着色器对象 无 FragmentShader ✅ 支持
FragmentShader.setFloat() 设置着色器浮点参数 index, value void ✅ 支持
CustomPaint 自定义绘制组件 painter, size, child Widget ✅ 支持
CustomPainter 自定义绘制器 无 CustomPainter ✅ 支持
Paint.shader 设置画笔的着色器 shader Paint ✅ 支持
Canvas.drawRect() 绘制矩形 rect, paint void ✅ 支持
FlutterFragCoord() 获取片段坐标 无 vec2 ✅ 支持

五、典型应用场景

5.1 动态背景效果

使用Simple Shader创建动态背景效果：

import 'package:flutter/material.dart';
import 'package:flutter_shaders/flutter_shaders.dart';
import 'dart:ui' as ui;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          // 背景着色器
          ShaderBuilder(
            assetKey: 'packages/simple_shader/shaders/background.frag',
            (context, shader, child) => CustomPaint(
              size: MediaQuery.of(context).size,
              painter: ShaderPainter(shader: shader),
            ),
          ),
          // 前景内容
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Dynamic Background',
                  style: TextStyle(
                    fontSize: 32,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                SizedBox(height: 20),
                Text(
                  'Using Flutter Shaders',
                  style: TextStyle(
                    fontSize: 18,
                    color: Colors.white70,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

5.2 启动页效果

使用Simple Shader创建启动页效果：

import 'package:flutter/material.dart';
import 'package:flutter_shaders/flutter_shaders.dart';
import 'dart:ui' as ui;

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

  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late double _progress;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    )..forward().whenComplete(() {
        // 导航到主页面
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(builder: (context) => HomePage()),
        );
      });
    _controller.addListener(() {
      setState(() {
        _progress = _controller.value;
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ShaderBuilder(
        assetKey: 'packages/simple_shader/shaders/splash.frag',
        (context, shader, child) {
          shader.setFloat(0, MediaQuery.of(context).size.width);
          shader.setFloat(1, MediaQuery.of(context).size.height);
          shader.setFloat(2, _progress);

          return CustomPaint(
            size: MediaQuery.of(context).size,
            painter: ShaderPainter(shader: shader),
            child: Center(
              child: Text(
                'Loading...',
                style: TextStyle(
                  fontSize: 24,
                  color: Colors.white,
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

六、约束与限制

6.1 平台差异

平台 着色器支持 注意事项
Android 完整支持 部分老旧设备可能性能受限
iOS 完整支持 需注意Metal着色器编译
HarmonyOS 完整支持 已在鸿蒙OS 2.0及以上版本测试通过

6.2 性能考虑

⚠️ 注意：复杂的着色器效果可能会消耗较多GPU资源，建议在低端设备上进行性能测试和优化。

七、常见问题与解决方案

问题 原因 解决方案
着色器加载失败 路径错误或文件不存在 检查着色器文件路径是否正确
性能卡顿 着色器过于复杂或设备性能不足 优化着色器代码，减少计算复杂度
鸿蒙平台渲染异常 平台适配问题 确保使用最新版本的插件，已针对鸿蒙平台进行优化
着色器参数传递错误 参数索引或类型不匹配 仔细检查参数索引和类型，确保与着色器代码一致
内存使用过高 频繁创建着色器实例 缓存着色器实例，避免重复创建

八、代码优化建议

8.1 着色器性能优化

优化着色器代码，提高渲染性能：

// 优化前：复杂的计算逻辑
void main() {
  vec2 st = FlutterFragCoord().xy / resolution.xy;
  vec3 color = vec3(0.0);

  // 复杂的计算
  for (int i = 0; i < 10; i++) {
    st.x += sin(st.y * float(i)) * 0.1;
    st.y += cos(st.x * float(i)) * 0.1;
  }

  color = vec3(st.x, st.y, 0.5);
  fragColor = vec4(color, 1);
}

// 优化后：简化计算逻辑
void main() {
  vec2 st = FlutterFragCoord().xy / resolution.xy;
  vec3 color = vec3(0.0);

  // 简化的计算
  st.x += sin(st.y) * 0.1;
  st.y += cos(st.x) * 0.1;

  color = vec3(st.x, st.y, 0.5);
  fragColor = vec4(color, 1);
}

8.2 Flutter代码优化

优化Flutter代码，提高应用性能：

// 优化前：每次重建都创建新的ShaderPainter
ShaderBuilder(
  assetKey: 'shader.frag',
  (context, shader, child) => CustomPaint(
    size: MediaQuery.of(context).size,
    painter: ShaderPainter(shader: shader), // 每次重建都创建新实例
  ),
);

// 优化后：缓存ShaderPainter实例
class _OptimizedShaderWidgetState extends State<OptimizedShaderWidget> {
  ShaderPainter? _painter;

  @override
  Widget build(BuildContext context) {
    return ShaderBuilder(
      assetKey: 'shader.frag',
      (context, shader, child) {
        // 缓存painter实例
        _painter ??= ShaderPainter(shader: shader);
        return CustomPaint(
          size: MediaQuery.of(context).size,
          painter: _painter,
        );
      },
    );
  }
}

九、最佳实践

9.1 开发流程

  1. 设计着色器效果：使用GLSL编写片段着色器代码
  2. 集成到Flutter：使用flutter_shaders包加载着色器
  3. 测试性能：在不同设备上测试着色器性能
  4. 优化代码：根据测试结果优化着色器和Flutter代码
  5. 部署应用：确保在所有目标平台上正常运行

9.2 性能优化

  1. 减少计算复杂度：简化着色器中的数学计算
  2. 使用缓存：缓存着色器实例和计算结果
  3. 合理使用参数：避免过多的 uniforms 和 varyings
  4. 测试不同设备：在低端设备上进行性能测试
  5. 考虑降级方案：为性能不足的设备提供简化版效果

十、与其他视觉效果解决方案的对比

解决方案 特点 适用场景 鸿蒙支持
Simple Shader 基于GLSL片段着色器，性能高，效果丰富 复杂视觉效果、动态背景 ✅ 完美支持
Flutter内置渐变 简单易用，性能稳定 简单背景、UI元素 ✅ 支持
Lottie动画 基于JSON的动画，效果丰富 复杂动画、图标 ✅ 支持
Rive动画 交互式动画，功能强大 交互式UI、游戏 ✅ 支持
自定义Painter 基于Canvas API，灵活可控 自定义绘制、简单动画 ✅ 支持

十一、高级功能

11.1 交互式着色器

创建交互式着色器效果，响应用户输入：

import 'package:flutter/material.dart';
import 'package:flutter_shaders/flutter_shaders.dart';
import 'dart:ui' as ui;

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

  @override
  _InteractiveShaderPageState createState() => _InteractiveShaderPageState();
}

class _InteractiveShaderPageState extends State<InteractiveShaderPage> {
  Offset _pointerPosition = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Interactive Shader Demo'),
      ),
      body: GestureDetector(
        onPanUpdate: (details) {
          setState(() {
            _pointerPosition = details.localPosition;
          });
        },
        child: ShaderBuilder(
          assetKey: 'packages/simple_shader/shaders/interactive.frag',
          (context, shader, child) {
            shader.setFloat(0, MediaQuery.of(context).size.width);
            shader.setFloat(1, MediaQuery.of(context).size.height);
            shader.setFloat(2, _pointerPosition.dx);
            shader.setFloat(3, _pointerPosition.dy);

            return CustomPaint(
              size: MediaQuery.of(context).size,
              painter: ShaderPainter(shader: shader),
            );
          },
        ),
      ),
    );
  }
}

11.2 多着色器组合

组合多个着色器效果，创建更复杂的视觉效果：

import 'package:flutter/material.dart';
import 'package:flutter_shaders/flutter_shaders.dart';
import 'dart:ui' as ui;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Multi Shader Demo'),
      ),
      body: Stack(
        fit: StackFit.expand,
        children: [
          // 背景着色器
          ShaderBuilder(
            assetKey: 'packages/simple_shader/shaders/background.frag',
            (context, shader, child) => CustomPaint(
              size: MediaQuery.of(context).size,
              painter: ShaderPainter(shader: shader),
            ),
          ),
          // 前景着色器
          ShaderBuilder(
            assetKey: 'packages/simple_shader/shaders/foreground.frag',
            (context, shader, child) => CustomPaint(
              size: MediaQuery.of(context).size,
              painter: ShaderPainter(shader: shader),
            ),
          ),
        ],
      ),
    );
  }
}

十二、未来展望

12.1 功能扩展

  • 添加更多着色器效果：提供更多预设的着色器效果，如波纹、火焰、粒子等
  • 着色器编辑器：开发可视化的着色器编辑器，方便开发者创建和调试着色器
  • 性能优化：进一步优化着色器性能，支持更复杂的效果
  • 跨平台适配：确保在所有平台上的一致表现

12.2 平台支持

  • 继续优化鸿蒙平台的支持
  • 适配更多鸿蒙设备型号
  • 跟进鸿蒙系统的更新
  • 扩展对其他平台的支持

总结

Simple Shader为鸿蒙平台的Flutter应用提供了一个简单而强大的片段着色器集成方案。通过flutter_shaders包，开发者可以轻松地将自定义着色器效果添加到Flutter应用中，为用户提供更加丰富和流畅的视觉体验。

该插件不仅展示了如何在Flutter应用中集成和使用GLSL片段着色器，还提供了完整的代码示例，帮助开发者快速上手。无论是创建动态背景、启动页效果还是交互式视觉效果，Simple Shader都能为你提供简洁高效的解决方案。

下一篇预告：我们将探讨如何使用Flutter开发鸿蒙平台的高级视觉效果应用，敬请期待！

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

# flutter # harmonyos # 华为
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

Flutter for OpenHarmony 本地音乐播放器APP

现在市面上音乐APP广告泛滥、强制开会员、后台偷跑流量、复杂臃肿！🙄 很多鸿蒙用户只想简简单单播放手机本地音乐，不需要直播、推荐、充值弹窗！广告繁多：开屏广告、弹窗广告、推送广告，严重干扰听歌体验强制联网：哪怕播放本地歌曲也要联网校验、加载推荐占用过大：安装包几百兆，低配鸿蒙手机卡顿发烫权限过度：索要通讯录、定位等无关权限，隐私不安全今天带大家从零开发一款纯净无广告、轻量化本地音乐播放器✨！li

avatar 开源鸿蒙跨平台开发者社区

OpenHarmony-5.0.3电信卡无法上网问题

软件版本：OH5.0.3硬件信息：开发者二代手机（7885）

avatar 开源鸿蒙跨平台开发者社区

Flutter for OpenHarmony 第三方库实战：使用 percent_indicator 构建习惯养成进度仪表盘应用

在移动应用开发中，进度展示是非常常见的功能。例如学习计划、健身记录、饮水打卡、阅读目标、课程完成度、任务进度和项目统计页面，都经常需要用进度条展示当前完成情况。如果只用普通文字写“已完成 60%”，用户当然也能看懂，但视觉表现比较弱。进度条可以让完成情况更加直观，用户一眼就能判断自己今天还差多少。人类对圆圈和条形图的信任程度有时候比对自己还高，离谱，但确实好用。Flutter 原生提供了和，可以实

avatar 开源鸿蒙跨平台开发者社区