23年因一次机缘巧合，我从程序员转岗为项目经理。这之前，我已在程序员岗位摸爬滚打了近5年，当时的自己似乎已经看到了技术生涯的天花板，尤其是前端和 Web 开发领域，那把35岁“达摩克利斯之剑”仿佛始终悬在头顶。于是，我头也不回地扎进了项目管理岗位，远离了熟悉的编辑器、代码与熟悉的团队。

回过头来看，疫情以来，互联网行业确实进入了大规模收缩期，程序员裁员新闻频繁爆出，我一度还庆幸自己的选择：“看来转岗是对的？”

可两年半后，在项目管理岗位上逐渐摸索成长，我却越来越清晰地看到“真实的自己”——可能我对工作的真正热情依然在于编程、在于技术。

一、认“真”与乌托邦

如果二十岁出头的年纪，还可以坦然地追求理想、抱着点乌托邦的情怀，倒也无可厚非。但三十岁左右，面对现实生活压力，似乎早该学会“世俗圆滑”，甚至当一个愤青、表达不满，都会被人视作“不知所谓”、“单纯幼稚”。

然而，每次试图“再忍忍”，内心总会不平静，耳边总回响起中学时代背诵的诗句：“竹杖芒鞋轻胜马”、“三十功名尘与土，八千里路云和月”、“穷且益坚，不坠青云之志”……想想，也不过就是从头再来？

以前我一直认为“认真”是个褒义词，但现在别人一提起“认真”，心里就会一阵不适：

• 认真=负责？ 那是做好牛马的前提，是被消耗的好耗材。


• 认真=老实？ 脾气好、有教养，最适合被人拿枪使。


• 认真 vs 苟着？ 难道想要站着把钱挣了不成？

在项目管理工作里，我再也感受不到编程带给我的那种纯粹、干净与安静。很多时候，大环境之下个体无法改变什么，哪怕你再坚持原则，也不强过如“铁笔换木枪”，一瞬即逝。

所以，我最终还是决定回归代码，至少在技术世界里，纯粹依旧值得追求。

二、开源精神与自由

做项目经理时，我学习了 PMP，了解了职能型和矩阵型组织结构。现实告诉我，矩阵型的项目管理在落地执行时往往演变成职能部门之间的推诿扯皮，“要发展就要搞关系”似乎已成为铁律。

与之相比，代码世界却截然不同。编程圈的开源精神是开放的、普世对等且包容的，它不拘泥于等级资历，这才是它真正迷人的地方。这种去中心化的世界，能够带给我们真正的自由感。

正因如此，我更加明确地感受到，自己真正热爱的、追求的依旧是编程，是技术带来的自由与纯粹。

未来，不论环境如何变化，我都会坚定地回归代码。

立此帖为证。

文本转语音（TTS）领域又迎来一位重磅新星！

由 Nari Labs 开发的 Dia-1.6B 以其超逼真的对话生成能力引发热议，仅开源两天便在 GitHub 收获 6.5K+ Star！

据说其能力超越了 ElevenLabs 和 Sesame，仅凭借 1.6B 参数就可实现情感控制、非语言声音（如笑声、咳嗽）和零样本声纹克隆，运行效率惊人。

支持从文本脚本生成多角色对话，通过 [S1]、[S2] 标签区分角色，生成自然语音，并支持非语言表达和声纹克隆，目前仅限英语。

它在 Hugging Face 也提供了模型权重和 Gradio Demo 体验。

主要功能

• 多角色对话生成：使用 [S1]、[S2] 等标签区分角色，单次生成多角色对话，保持自然节奏和情感过渡。


• 拟人化表达：支持笑声(laugh)、叹气(sigh）、咳嗽(cough)等非语言情绪


• 零样本声纹克隆：可微调或指定语音风格，克隆用户或角色声音


• 高质量语音合成：音质媲美 ElevenLabs、Sesame，细节自然，情绪变化真实


• 实时推理速度：A4000 显卡上约 40 tokens/s，体验流畅无等待


• Gradio 界面支持：自带可用的 Web UI 界面，输入文本立即试听

快速上手

Dia-1.6B 官方实验室提供了详细安装指南和 Gradio 演示。

在线体验：

无需配置环境，打开 Hugging Face Demo 即可输入脚本或音频试听效果：

Demo：huggingface.co/spaces/nari…

安装部署与使用步骤：

1、克隆项目

git clone https://github.com/nari-labs/dia.git

cd dia

2、创建虚拟环境

python -m venv .venv

source .venv/bin/activate

3、安装依赖

pip install -e .

4、启动 Gradio UI

python app.py

访问 http://localhost:7860，输入脚本或上传音频，生成对话。

示例脚本：

[S1] Dia is amazing! [S2] Yeah, it generates laughs too! (laughs)

还可以通过 Python 包安装 Dia 的API

# Install directly from GitHub

pip install git+https://github.com/nari-labs/dia.git

Python 调用示例：

import soundfile as sf



from dia.model import Dia





model = Dia.from_pretrained("nari-labs/Dia-1.6B")



text = "[S1] Dia is an open weights text to dialogue model. [S2] You get full control over scripts and voices. [S1] Wow. Amazing. (laughs) [S2] Try it now on Git hub or Hugging Face."



output = model.generate(text)



sf.write("simple.mp3", output, 44100)

后续也将推出 pypi包和CLI工具。

使用场景推荐

• 有声读物 / 小说播报：让不同角色“开口说话”，配合情绪词还原真实语境


• 播客配音：快速合成带感情、有风格的访谈类语音


• AI 角色扮演：配合 Agent，多角色模拟对话系统


• TTS 研究与微调：声音克隆、情绪控制、非语言表达

写在最后

Dia-1.6B 是开源 TTS 领域的最新研究成果，其逼真对话和低资源需求让人惊叹。

小体量（1.6B 参数）却能生成媲美 ElevenLabs、Sesame 的高保真语音，甚至能区分角色、模拟非语言情绪（比如：[咳嗽]、[叹气]、[笑声]）。

其免费开源 + 超高拟真度 + 多角色/非语言表达全支持，使其成为目前开源TTS领域最值得关注的TTS项目之一！

不过目前仅支持英文，期待后续能够支持中文及更多语言。

GitHub 项目地址：github.com/nari-labs/d…

HF 模型地址：huggingface.co/nari-labs/D…

在线Demo：huggingface.co/spaces/nari…

如果你有个 AI 角色，想让它“开口说话”，甚至“笑一下”，Dia-1.6B 那就太适合了。

最近项目中在实现一个搜索的功能，根据 Flutter 的类似组件的调用习惯，输入 showSearch 后发现还真有，跳进源码中一看，Flutter 已经实现了相应的 Widget 和交互，简直不要太方便了，先来看看如何调用的。

showSearch 方法介绍

Future<T?> showSearch<T>({

  required BuildContext context,

  required SearchDelegate<T> delegate,

  String? query = '',

  bool useRootNavigator = false,

}) {

  assert(delegate != null);

  assert(context != null);

  assert(useRootNavigator != null);

  delegate.query = query ?? delegate.query;

  delegate._currentBody = _SearchBody.suggestions;

  return Navigator.of(context, rootNavigator: useRootNavigator).push(_SearchPageRoute<T>(

    delegate: delegate,

  ));

}

上面函数定义在源码 flutter/lib/src/material/search.dart 文件中，根据该函数要求须传入一个 context 和 delegate，context 是我们的老朋友，这里就无需过多介绍了。但是这个 delegate (SearchDelegate 类)是干啥的？继续跳到 SearchDelegate 发现SearchDelegate 是一个抽象类，SearchDelegate 第一句介绍 Delegate for [showSearch] to define the content of the search page. 定义搜索页面的内容，也就是说需要我们创建一个继承自 SearchDelegate 的子类来实例化参数 delegate，下面是这个子类CustomSearchPageDelegate的代码。

class CustomSearchPageDelegate extends SearchDelegate<String> {

  // 搜索框右边的显示，如返回按钮

  @override

  List<Widget>? buildActions(BuildContext context) {}



  // 搜索框左边的显示，如搜索按钮

  @override

  Widget? buildLeading(BuildContext context) {}



  // 搜索的结果展示，如列表 ListView

  @override

  Widget buildResults(BuildContext context) {}



  // 输入框输入内容时给出的提示

  @override

  Widget buildSuggestions(BuildContext context) {}

}

从上面可以看出我们需要返回4个 Widget 来显示内容，其中 buildLeading 和 buildActions 分别对应搜索框左右两边的内容，通常是 button，如 buildLeading 是返回按钮，buildActions 右边是搜索按钮。buildResults 则表示搜索的结果展示，通常是一个列表，而 buildSuggestions 展示当用户在输入框输入内容时给出的提示，展示多条提示内容时也会用到列表（ListView）。

实现 CustomSearchPageDelegate

接下来以搜索文章为例子利用自定义的CustomSearchPageDelegate 类实现一下搜索功能。

import 'package:flutter/material.dart';

import 'package:flutter_svg/flutter_svg.dart';

import 'package:flutter_todo/pages/search_page/data_item_model.dart';

import 'package:flutter_todo/pages/search_page/search_item_widget.dart';



class CustomSearchPageDelegate extends SearchDelegate<DataItemModel> {

  CustomSearchPageDelegate({

    String? hintText,

    required this.models,

  }) : super(

          searchFieldLabel: hintText,

          keyboardType: TextInputType.text,

          textInputAction: TextInputAction.search,

        );



  /// 搜素提示

  List<String> suggestions = [

    "Flutter",

    "Flutter开发7个建议，让你的工作效率飙升",

    "浅谈 Flutter 的并发和 isolates",

    "Flutter 技术实践",

    "Flutter 中如何优雅地使用弹框",

    "Flutter设计模式全面解析：单例模式",

    "Flutter Dart",

    "Flutter 状态管理",

    "Flutter大型项目架构：UI设计系统实现（二）",

    "Flutter大型项目架构：分层设计篇",

    "Dart 语法原来这么好玩儿"

  ];



  /// 模拟数据，一般调用接口返回的数据

  List<DataItemModel> models = [];



  /// 搜索结果

  List<DataItemModel> results = [];



  /// 右边的搜索按钮

  @override

  List<Widget>? buildActions(BuildContext context) {

    return [

      InkWell(

        onTap: () {},

        child: Container(

          margin: const EdgeInsets.all(10),

          height: 30,

          alignment: Alignment.center,

          decoration: BoxDecoration(

              color: Colors.red, borderRadius: BorderRadius.circular(30)),

          padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 16),

          child: const Text(

            "搜索",

            style: TextStyle(color: Colors.white, fontSize: 14),

          ),

        ),

      ),

    ];

  }



  /// 左边返回按钮

  @override

  Widget? buildLeading(BuildContext context) {

    return InkWell(

        onTap: () {

          /// 返回操作，关闭搜索功能

          /// 这里应该返回 null

          close(context, DataItemModel());

        },

        child: Container(

          padding: const EdgeInsets.all(15.0),

          child: SvgPicture.asset(

            "assets/images/arrow.svg",

            height: 22,

            color: Colors.black,

          ),

        ));

  }



  /// 搜索结果列表

  @override

  Widget buildResults(BuildContext context) {

    return ListView.separated(

      physics: const BouncingScrollPhysics(),

      itemCount: results.length,

      itemBuilder: (context, index) {

        DataItemModel item = results[index];

        /// 自定义Widget，用来显示每一条搜素到的数据。

        return SearchResultItemWidget(

          itemModel: item,

          click: () {

            /// 点击一条数据后关闭搜索功能，返回该条数据。

            close(context, item);

          },

        );

      },

      separatorBuilder: (BuildContext context, int index) {

        return divider;

      },

    );

  }



  /// 提示词列表

  @override

  Widget buildSuggestions(BuildContext context) {

    List<String> suggestionList = query.isEmpty

        ? []

        : suggestions

            .where((p) => p.toLowerCase().contains(query.toLowerCase()))

            .toList();

    if (suggestionList.isEmpty) return Container();

    return ListView.separated(

      itemBuilder: (context, index) {

        String name = suggestionList[index];

        return InkWell(

          onTap: () {

            /// 点击提示词，会根据提示词开始搜索，这里模拟从models数组中搜索数据。

            query = name;

            results = models

                .where((e) =>

                    (e.title?.toLowerCase().contains(name.toLowerCase()) ??

                        false) ||

                    (e.desc?.toLowerCase().contains(name.toLowerCase()) ??

                        false))

                .toList();



            /// 展示结果，这个时候就调用 buildResults，主页面就会用来显示搜索结果

            showResults(context);

          },

          child: Container(

            color: Colors.white,

            padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 10),

            child: Row(

              children: [

                SvgPicture.asset(

                  "assets/images/search.svg",

                  height: 16,

                  color: const Color(0xFF373737),

                ),

                const SizedBox(

                  width: 4,

                ),

                RichText(

                  text: TextSpan(children: getSpans(name)),

                ),

              ],

            ),

          ),

        );

      },

      itemCount: suggestionList.length,

      separatorBuilder: (BuildContext context, int index) {

        return divider;

      },

    );

  }



  /// 分割线

  Widget get divider => Container(

        color: const Color(0xFFAFAFAF),

        height: 0.3,

      );



  /// 富文本提示词，其中如果和输入的文本匹配到的关键字显示红色。

  List<TextSpan> getSpans(String name) {

    int start = name.toLowerCase().indexOf(query.toLowerCase());

    String end = name.substring(start, start + query.length);

    List<String> spanStrings = name

        .toLowerCase()

        .replaceAll(end.toLowerCase(), "*${end.toLowerCase()}*")

        .split("*");

    return spanStrings

        .map((e) => (e.toLowerCase() == end.toLowerCase()

            ? TextSpan(

                text: e,

                style: const TextStyle(color: Colors.red, fontSize: 14))

            : TextSpan(

                text: e,

                style:

                    const TextStyle(color: Color(0xFF373737), fontSize: 14))))

        .toList();

  }

}

这里要说明一下，query 关键字是输入框的文本内容。调用的时候实例化一下该类，传递给 shwoSearch 的 delegate 参数。下图就是我们看到的效果：

总结问题

以上图片的搜索框还可以通过重写 appBarTheme 来定制自己想要的 UI 效果，虽然可以这样，但是和我们要实现的效果比起来还相差甚远，尤其是顶部的搜索框，其左右两边的留白区域过多，背景颜色无法调整，内部的输入框 TextField 也无法定制自己想要的效果，如不能调整其圆角、背景颜色以及添加额外控件等等。

还有一点就是当我们点击返回按钮调用 close 时，这里返回值是泛型 T 却不支持 null 类型，在文章的开头，我们可以看到 shwoSearch 的 delegate 参数类型是 SearchDelegate<T>，所以创建 CustomSearchPageDelegate 时必须这样去声明。

class CustomSearchPageDelegate extends SearchDelegate<DataItemModel>

而我们想要实现这样去声明

class CustomSearchPageDelegate extends SearchDelegate<DataItemModel?>

这样当我们调用 close 时可以做到传 null，在外面调用的位置可以对返回值进行判断，返回值为 null 就不作任何处理。

交互上，在点击键盘上的 搜索 按键时，直接调用的是 showResults 函数，而通常的操作是需要调用搜索的接口拿到数据后，再去调用 showResults 函数来展示搜索结果的数据。

对于上述问题，我们可以做什么呢？

源码分析

想要到达我们需要的效果，还是需要看看 Flutter 的源码是怎么实现的，我们再次来到 flutter/lib/src/material/search.dart 文件中，可以看到该文件中定义了除上面提到的抽象类 SearchDelegate 和全局函数 showSearch 之外，还有内部类 _SearchPageRoute 和 _SearchPage。 _SearchPageRoute 继承自 PageRoute，顾名思义就是负责路由跳转及转场动画的。

以下是 _SearchPageRoute 部分代码：

class _SearchPageRoute<T> extends PageRoute<T> {

  _SearchPageRoute({

    required this.delegate,

  }) : assert(delegate != null) {

    delegate._route = this;

  }



  final SearchDelegate<T> delegate;

  

  /// ...

  

  @override

  Widget buildPage(

    BuildContext context,

    Animation<double> animation,

    Animation<double> secondaryAnimation,

  ) {

    return _SearchPage<T>(

      delegate: delegate,

      animation: animation,

    );

  }

  

  /// ...

}

重写父类的 buildPage 方法，将 delegate 传递给 _SearchPage 并将其返回，而所有的 UI 逻辑都在这个 _SearchPage 中，来到 _SearchPage 的 build 函数中就可以看到下面的实现。

_SearchPage 的 build 函数代码

@override

Widget build(BuildContext context) {

  assert(debugCheckHasMaterialLocalizations(context));

  final ThemeData theme = widget.delegate.appBarTheme(context);

  final String searchFieldLabel = widget.delegate.searchFieldLabel

    ?? MaterialLocalizations.of(context).searchFieldLabel;

  Widget? body;

  // _currentBody 枚举类型_SearchBody，用来区分当前body是展示提示列表还是搜索结果列表，

  // 当调用 SearchDelegate 中 showResults 函数时，_currentBody = _SearchBody.results

  // 当调用 SearchDelegate 中 showSuggestions 函数时，_currentBody = _SearchBody.suggestions

  switch(widget.delegate._currentBody) {

    case _SearchBody.suggestions:

      body = KeyedSubtree(

        key: const ValueKey<_SearchBody>(_SearchBody.suggestions),

        child: widget.delegate.buildSuggestions(context),

      );

      break;

    case _SearchBody.results:

      body = KeyedSubtree(

        key: const ValueKey<_SearchBody>(_SearchBody.results),

        child: widget.delegate.buildResults(context),

      );

      break;

    case null:

      break;

  }



  return Semantics(

    explicitChildNodes: true,

    scopesRoute: true,

    namesRoute: true,

    label: routeName,

    child: Theme(

      data: theme,

      child: Scaffold(

        appBar: AppBar(

          leading: widget.delegate.buildLeading(context),

          title: TextField(

            controller: widget.delegate._queryTextController,

            focusNode: focusNode,

            style: widget.delegate.searchFieldStyle ?? theme.textTheme.titleLarge,

            textInputAction: widget.delegate.textInputAction,

            keyboardType: widget.delegate.keyboardType,

            onSubmitted: (String _) {

              widget.delegate.showResults(context);

            },

            decoration: InputDecoration(hintText: searchFieldLabel),

          ),

          actions: widget.delegate.buildActions(context),

          bottom: widget.delegate.buildBottom(context),

        ),

        body: AnimatedSwitcher(

          duration: const Duration(milliseconds: 300),

          child: body,

        ),

      ),

    ),

  );

}

_SearchPage 中的实现也非常简单，就是一个嵌入到 AppBar 中的搜索框和呈现 suggestion list 及 result list 的 body。想要定制自己的 UI 效果，改的也是该位置的代码。

优化实现

UI 方面主要针对 TextField 和 AppBar 代码修改，怎么改就看想要实现什么效果了。参考 Flutter 官方的源码，重新实现一个的 _SearchPage 类，然后在 _SearchPageRoute 替换成自己写的 _SearchPage，再去 SearchDelegate 替换一下修改过的 _SearchPageRoute。

还一个问题怎么实现调用 close 时可以返回 null 的结果内呢？除了上面提到的这样去声明

class CustomSearchPageDelegate extends SearchDelegate<DataItemModel?>

之外，还需要修改 _SearchPageRoute 。

// 改之后

final CustomSearchDelegate<T?> delegate;

// 改之前

// final CustomSearchDelegate<T> delegate;

重新定义一个全局函数 showSearchWithCustomiseSearchDelegate，和官方的区分开来。

Future<T?> showSearchWithCustomiseSearchDelegate<T>({

  required BuildContext context,

  // 这里的泛型由原来的 T 改成了 T?

  required CustomSearchDelegate<T?> delegate,

  String? query = '',

  bool useRootNavigator = false,

}) {

  delegate.query = query ?? delegate.query;

  delegate._currentBody = _SearchBody.suggestions;

  // 这里的 _SearchPageRoute 是我们自己实现的类

  return Navigator.of(context, rootNavigator: useRootNavigator)

      .push(_SearchPageRoute<T>(

    delegate: delegate,

  ));

}

来看看最终调用上面的函数

DataItemModel? result =

    await showSearchWithCustomiseSearchDelegate(

        context: context,

        delegate: SearchPageDelegate(

            hintText: "Flutter 技术实践", models: models));

if (result != null) {

  /// to detail page

}

解决交互上的问题，需要在我们自己抽象类 SearchDelegate 单独定义一个函数 onSubmit，点击键盘上的搜索按键和右边的搜索按钮调用 onSubmit 函数，如：widget.delegate.onSubmit(context, text);，在 SearchDelegate 子类的 onSubmit 中来实现具体的逻辑，如发送网络请求，返回数据后在调用 showResults。

@override

void onSubmit(BuildContext context, String text) {

  // 发送网络请求，拿到数据。

  // showResults(context);

}

整体实现的代码量多，就不在文中贴出来了，具体实现大家可以参考这里的代码：
github.com/joedrm/flut…

下图是最终实现效果：

小结

自定义搜索框的实现整体来说还是比较简单的，相比于源码改动的地方并不多，就可以显示想要的效果。当然还有其它更多的实现方式，这里只是提供了一种分析思路。我们还可以发散一下，去看看其它的如：showBottomSheet、showDialog 等等和 SearchDelegate，他们直之间也有不少类似的地方，当我想要自定义自己的控件时，会发现其实很多答案就在官方的源码里，动手改吧改吧就出来了。最后聊一下近况，近期有一些想法在忙着实现，时间有点安排不过来，文章的更新就有点儿偷懒了，跟大家说声抱歉，后面有机会单独来分享一下最近忙的事情，最后感谢大家耐心的阅读！

短信，从曾经的日常对话，变成了今天只在收验证码、收通知时才偶尔想起的工具。我们不再用它聊天，但它却以另一种方式，继续默默留在了每一部手机里——像一条永不熄灭的应急通道，安静又顽强。

为什么传统短信衰落了？

我想，原因显而易见：

• 体验落后：纯文本，沉闷乏味，与今天充满表情包、短视频的社交体验格格不入。


• 安全问题：垃圾信息与钓鱼链接充斥，带来隐私泄露和金融诈骗风险。


• 替代者崛起：OTT应用（如微信等即时通讯）越过运营商，构建了更强大且丰富的通讯体验。

一句话总结：自第一代iPhone发布以来，短信从未进化过。

但近两年，5G消息的概念强势崛起：试图“复活”短信。

它被认为是短信的升级版，是一种长得更好看的短信，支持文本、图片、音频、视频、定位、支付、卡片应用等丰富媒介内容，如图。它试图成为新的“杀手级应用”，补齐传统短信缺失的智能与体验。

但问题来了 —— 对用户来说，这些体验在APP应用里早已稀松平常，“了无新意”。。。5G消息远远谈不上颠覆，只是跟上了过去的潮流。

思考

这里想问大家一句：短信最大的优势是什么？

—— 我认为可能是有一点：那就是 “强推送“ 。即只要拿到了手机号，不管你愿意不愿意，就能给你发短信！

—— 这个可以是正向积极的、比如，如果在地震台风来临时，谁也不想错过“被强推送”一条预警消息。或者：你订阅了关注金价走势的服务，每天早上9点，直接推送一条金价信息，也不会让人太反感尔尔。

—— 也可以是负面消极的，比如消息轰炸、低劣推销、骚扰信息的等。

本瓜认为：真正的变化不应该是“形式”，应该发生在基础设施层。

现在的消息生态，并不是单一平台控制的，而是：运营商、手机厂商、MaaP平台、AI服务商、HUB厂商、SDK厂商、企业用户等多方共建。

多方参与虽然打破了垄断，但也带来了潜在的协调低效与体验分裂问题。

移动互联网的成功经验告诉我们：轻应用，才是黏住用户、构建生态的核心。

1、对用户而言：免安装、免更新、即用即走、无缝切换。—— 是好的！

2、对开发者而言：开发简单、成本低、快速迭代。—— 也是好的！

在App平台上，代表性的轻应用是小程序。而在5G消息体系里，对应的是Chatbot（聊天机器人） 。—— 就有点像把如今火爆的智能体加入到短信里。

虽然聊天机器人前端看似简单，但背后隐藏着巨大的开发挑战：不仅是UI，而是要设计对话剧本、逻辑分支；还有自然语言输入不确定，需要NLP、NLU技术精准理解；需要训练、调优，否则容易出错让用户失望等等。

对企业来说，想开发一个成熟Chatbot的难度和投入，远超表面。所以，这也是为什么现在你还没有开始在短信界面呼起各类机器人/应用。

未来企业很可能同时包含：

• App：重应用，沉淀核心用户。


• 小程序：轻应用，覆盖广泛场景。


• Chatbot：对话应用，增强即时服务与主动触达能力：智能客服、营销互动

问题又来了： 要支撑这样分散、灵活、快速演化的格局，需要怎样的基础设施？

可能需要一套完善的 沙箱计划：即允许应用以轻量方式接入、运行、管理，同时保障数据隔离、安全合规。

引言

最近产品经理看到抖音的个人主页下拉效果很不错，让我也实现一个，如果是native还好办，开源成熟的库一大堆，可我是Flutter呐🤣，业内成熟可用的库非常有限，最终跟产品经理batte失败后，没办法只能参考native代码硬肝出来。

效果图

整体构思

实现拖拽滑动功能，关键在于对手势事件的识别。在 Flutter 中，可使用Listener来监听触摸事件，如下所示：

Listener(

  onPointerDown: (result) {

   

  },

  onPointerMove: (result) {

   

  },

  onPointerUp: (_) {

  

  }

在手指滑动的过程中不断的刷新背景图高度是不是就可以实现图片的拉伸效果呢？我们这里图片加载库使用CachedNetworkImage，高度在156的基础上动态识别手指的滑动距离extraPicHeight

CachedNetworkImage(

  width: double.infinity,

  height: 156 + extraPicHeight,

  imageUrl: backgroundUrl,

  fit: fitType,

)

识别到手指滑动就不断的刷新拉伸高度extraPicHeight，flutter setState 内部已经做了优化，不用担心性能问题，实际效果体验很不错。

setState(() {

 extraPicHeight；

});

经过实验思路是没有问题，那么监听哪些事件，extraPicHeight到底怎么计算，有什么边界值还考虑到呢？我们从手势的顺序开始梳理一下。

首先按压屏幕会识别到触碰屏幕起点，也就是initialDx initialDy，对于下拉拖拽我们关心更多的是纵向坐标result.position.dy

onPointerDown: (result) {

  initialDy = result.position.dy;

  initialDx = result.position.dx;

},

当手指在屏幕滑动会触发onPointerMovew,result.position.dy代表的就是手势滑动的位置

onPointerMove: (result) {

  //手指的移动时

  // updatePicHeight(result.position.dy); //自定义方法，图片的放大由它完成。

},

这边处理逻辑比较复杂，我们先抽成函数updatePicHeight

updatePicHeight(changed) {

  //。。。已省略不重要细节代码

  extraPicHeight += changed - prev_dy; //新的一个y值减去前一次的y值然后累加，作为加载到图片上的高度。

  debugPrint('extraPicHeight updatePicHeight : $extraPicHeight');

  //这里是为了限制我们的最大拉伸效果

  if (extraPicHeight > 300) {

    extraPicHeight = 300;

  }

  if (extraPicHeight > 0) {

    setState(() {

      prev_dy = changed;

    });

  }

}

这里简化了很多细节逻辑，核心目的就是要不断的累加我们的拖动距离来计算extraPicHeight高度，这里的changed是我们手指的y坐标，滑动的距离需要减去上次滑动的回调y,所以我们必须声明一个过去y坐标的变量也就是prev_dy，通过通过 changed - prev_dy就可以得出真正滑动的距离，然后我们不断累加 extraPicHeight += changed - prev_dy就是图片的拉伸距离。

手指下拉以后图片确实拉伸了，但是松开手后发现回不去了🤣因为我们还需要处理图回去的问题，既然可以通过setState把图片高度拉高，我们也可以通过setState把图片高度刷回去，核心要思考的是如何平滑的让图片自己缩回去呢？有经验的你一定想到动画了。

flutter这里的动画库是Tween，Tween可以通过addListener监听距离的回调，当距离变化不断刷新图片高度

anim = Tween(begin: extraPicHeight, end: 0.0).animate(animationController)

  ..addListener(() {

    setState(() {

      extraPicHeight = anim.value;

      fitType = BoxFit.cover;

    });

  });

prev_dy = 0; //同样归零

动画的效果最终由控制器animationController来决定，这里给了一个300ms的时间还不错，可以根据自己业务扩展

animationController = AnimationController(

    vsync: this, duration: const Duration(milliseconds: 300));

所有在手抬起的时候执行我们的动画runAnimate函数即可

onPointerUp: (_) {

  //当手指抬起离开屏幕时

  if (isVerticalMove) {

    if (extraPicHeight < 0) {

      extraPicHeight = 0;

      prev_dy = 0;

      return;

    }

    debugPrint('extraPicHeight onPointerUp : $extraPicHeight');

    runAnimate(); //动画执行

    animationController.forward(from: 0); //重置动画

  }

},

整体的技术方案履完了，之后就是细节问题了

问题1:横行稍微有倾角的滑动也会导致页面拖拽，比如侧滑返回上一页面

这是由于手指滑动的角度没有限制， 这里我们计算一下滑动倾角，超过45度无效，角度计算通过x,y坐标计算tan函数即可

onPointerMove: (result) {

  double deltaY = result.position.dy - initialDy;

  double deltaX = result.position.dx - initialDx;

  double angle =

      (deltaY == 0) ? 90 : atan(deltaX.abs() / deltaY.abs()) * 180 / pi;

  debugPrint('onPointerMove angle : $angle');

  if (angle < 45) {

    isVerticalMove = true; // It's a valid vertical movement

    updatePicHeight(result

        .position.dy); // Custom method to handle vertical movement

  } else {

    isVerticalMove =

        false; // It's not a valid vertical movement, ignore it

  }

}

问题2:图片高度变了，为啥没有拉伸啊！

图片拉伸取决于你图片库的加载配置，以flutter举例，我们的图片库是CachedNetworkImage

 CachedNetworkImage(

  width: double.infinity,

  height: 156 + extraPicHeight,

  imageUrl: backgroundUrl,

  fit: fitType,

)

加载效果取决于fit，默认不变形我们使用cover，拉伸时使用fitHeight或者fill

updatePicHeight(changed) {

  if (prev_dy == 0) {

    //如果是手指第一次点下时，我们不希望图片大小就直接发生变化，所以进行一个判定。

    prev_dy = changed;

  }

  if (extraPicHeight > 0) {

    //当我们加载到图片上的高度大于某个值的时候，改变图片的填充方式，让它由以宽度填充变为以高度填充，从而实现了图片视角上的放大。

    fitType = BoxFit.fitHeight;

  } else {

    fitType = BoxFit.cover;

  }

  extraPicHeight += changed - prev_dy; //新的一个y值减去前一次的y值然后累加，作为加载到图片上的高度。

  debugPrint('extraPicHeight updatePicHeight : $extraPicHeight');

  if (extraPicHeight > 300) {

    extraPicHeight = 300;

  }

  if (extraPicHeight > 0) {

    setState(() {

      prev_dy = changed;

      fitType = fitType;

    });

  }

}

最后看下组件如何布局

 CustomScrollView(

      physics: const NeverScrollableScrollPhysics(),

      slivers: <Widget>[

        SliverToBoxAdapter(

          child: buildTopWidget(),

        ),

        SliverToBoxAdapter(

          child: Column(

            children: contents,

          ),

        )

      ]

      ),

)

整个列表使用CustomScrollView，因为在flutter上用他才能实现这种变化效果，未来还可以扩展顶部导航栏的变化需求。buildTopWidget就是我们头部组件，包括内部的背景图，但是整个组件和背景图的高度都是依赖extraPicHeight变化的，contents是我们的内容，当头部组件挤压，会正常跟随滑动到底部。

全局变量依赖以下参数就够了，核心要注意的就是边界值问题，什么时候把状态值重置问题。

//初始坐标

double initialDy = 0;

double initialDx = 0;

double extraPicHeight = 0; //初始化要加载到图片上的高度

late double prev_dy; //前一次滑动y

//是否是垂直滑动

bool isVerticalMove = false;

//动画器

late AnimationController animationController;

late Animation<double> anim;

技术语言不是我分享的核心，解决这个需求的技术思维路线是我们大家可以借鉴学习的。

如果你有任何疑问可以通过掘金联系我，如果文章对你有所启发，希望能得到你的点赞、关注和收藏，这是我持续写作的最大动力。Thanks~

随着互联网的发展，图片作为最直观的内容展示方式逐渐在系统中占用越来越多的版面，但是随之而来的就是系统性能的大幅度下滑。传统的JPEG、PNG、GIF各有优点，也各有弊端，“大一统”的图片格式被需要，于是WebP诞生了。

需求

WebP格式文件产生的原因主要是源于对网络图像传输效率的需求以及现有图像格式在某些方面的局限性。

在现代互联网网页中图片和视频占据了很大比例。为了提供更吸引人的用户体验，网站需要加载大量的高质量图像。

同时智能手机和平板电脑的普及推动了移动互联网的快速发展。在移动设备上，网络速度通常比桌面端慢，且用户的流量是有限的。

而JPEG、PNG和GIF等传统图像格式各有其优点，但也存在不足之处。

例如，JPEG虽然非常适合照片，但仅支持有损压缩且不支持透明度；PNG支持透明度但文件大小通常较大；GIF支持动画但色彩范围有限，且文件体积相对较大。

产生

WebP是一种由Google开发的图像文件格式，旨在提供更高效的图片压缩，适用于网络图像传输和展示。

局限

使用

在线格式转换

程序格式转换

Python：可以使用Pillow库（PIL的一个分支）结合webp的支持来进行转换。

// 安装 pip install Pillow



from PIL import Image

im = Image.open("input.png")

im.save("output.webp", "WEBP")

也可以使用Node.js来转换。

这里使用egg.js作为服务端框架

前端

<template>

    <div class="wrap">

        <a-upload

            v-model:file-list="fileList"

            name="file"

            action="/api/uploadImg"

            :accept="['.jpeg','.png','.jpg','.gif']"

            @change="handleChange"

        >

            <a-button>

                上传文件

            </a-button>

        </a-upload>



        <div class="diff-wrap">

            <div class="old-img">

                <img style="max-width: 400px;max-height: 500px;" :src="oldImg" alt=""/>

            </div>

            <div class="new-img">

                <img style="max-width: 400px;max-height: 500px;" :src="newImg" alt=""/>

            </div>

        </div>

    </div>

</template>



<script setup>

import { ref } from 'vue';

const oldImg = ref('');

const newImg = ref('');



const handleChange = info => {

    const file = info.file;



    // 使用 FileReader 进行本地文件预览（无论上传是否成功）

    const reader = new FileReader();

    reader.onload = () => {

        oldImg.value = reader.result; // 将本地文件的 Base64 赋值给 oldImg

    };

    reader.readAsDataURL(file.originFileObj); // 读取原始文件对象



    // 原有上传完成逻辑可保留用于处理服务器返回结果

    if (file.status === 'done' && file.response) {

        console.log(file)

        newImg.value = file.response.url; // 如果上传成功，使用服务器返回的 URL

    }

};



const fileList = ref([]);

</script>



<style scoped>

.diff-wrap {

    width: 800px;

    margin: 20px auto;

    border: 1px solid #ddd;

    display: flex;

}



.old-img {

    flex: 1;

    height: 500px;

    border-right: 1px solid #ddd;

}



.new-img {

    flex: 1;

    height: 500px;

}

</style>

服务端

使用 Node.js 的图像处理库 sharp 进行格式转换，安装 sharp。

npm install sharp

示例代码

const { Service } = require('egg');

const fs = require('fs');

const path = require('path');

const sharp = require('sharp');



class HomeService extends Service {

    async index() {

        return 'hello world';

    }



    async uploadImg() {

        const { ctx } = this;



        try {

            // 1. 获取上传的文件流

            const stream = await ctx.getFileStream();



            // 2. 检查是否为支持的图片格式（可选）

            const allowedMimes = [ 'image/jpeg', 'image/png', 'image/gif', 'image/webp' ];

            if (!allowedMimes.includes(stream.mime)) {

                throw new Error('Unsupported image format');

            }



            // 3. 定义路径

            const tempInputPath = path.join(this.config.baseDir, 'app/public', `temp_${Date.now()}.tmp`);

            const outputFilename = `converted_${Date.now()}.webp`;

            const outputFilePath = path.join(this.config.baseDir, 'app/public', outputFilename);



            // 4. 写入临时原始文件

            const writeStream = fs.createWriteStream(tempInputPath);

            await new Promise((resolve, reject) => {

                stream.pipe(writeStream);

                stream.on('end', resolve);

                stream.on('error', reject);

            });



            // 5. 使用 sharp 转换为 webp

            await sharp(tempInputPath)

                .webp({ quality: 80 }) // 可设置压缩质量

                .toFile(outputFilePath);



            // 6. 清理临时文件

            fs.unlinkSync(tempInputPath);



            // 7. 返回 WebP 图片地址

            return {

                url: `/public/${outputFilename}`,

                filename: outputFilename,

            };

        } catch (err) {

            ctx.logger.error('Image upload or conversion failed:', err);

            throw new Error('Image processing failed: ' + err.message);

        }

    }

}



module.exports = HomeService;

前言

Tauri 2.0 正式版终于在 2024 年 10 月 2 日正式发布了。这次重大更新不仅带来了令人兴奋的新特性，更是为跨平台应用开发开辟了一条全新的道路。让我们一起来看看这个重量级版本带来了哪些惊喜！

1.移动端支持：拥抱全平台时代

Tauri 2.0 最引人注目的特性莫过于对 iOS 和 Android 的全面支持。现在，您可以用同一套代码库开发桌面端（Windows、macOS、Linux）和移动端应用，真正实现"一次编写，到处运行"的梦想。这不仅大大提高了开发效率，还为您的应用打开了更广阔的市场。

2.插件系统升级：灵活性与可扩展性的完美结合

新版本中，Tauri 将大量核心功能转移到了插件中。这意味着您可以根据需求自由选择功能，让应用更加轻量化。同时，插件系统的改进也为社区贡献打开了大门，期待看到更多创新的插件涌现。Tauri 2.0 的插件系统不仅更加灵活,还提供了丰富的官方插件,满足各种开发需求。以下是部分官方插件及其功能:

• 自动启动 (Autostart): 让您的应用在系统启动时自动运行。


• 条形码扫描器 (Barcode Scanner): 在移动应用中使用相机扫描二维码和条形码。


• 生物识别 (Biometric): 在Android和iOS上进行生物识别认证。


• 剪贴板 (Clipboard): 读取和写入系统剪贴板。


• 命令行接口 (CLI): 解析命令行参数。


• 深度链接 (Deep Linking): 将您的Tauri应用设置为特定URL的默认处理程序。


• 对话框 (Dialog): 用于打开/保存文件和显示消息的原生系统对话框。


• 文件系统 (File System): 访问文件系统。


• 全局快捷键 (Global Shortcut): 注册全局快捷键。


• HTTP客户端: 使用Rust编写的HTTP客户端。


• 本地主机 (Localhost): 在生产应用中使用本地主机服务器。


• 日志 (Logging): 可配置的日志记录。


• NFC: 在Android和iOS上读写NFC标签。


• 通知 (Notifications): 向用户发送原生通知。


• 操作系统信息 (OS Information): 读取操作系统信息。


• 持久化作用域 (Persisted Scope): 在文件系统中持久化运行时作用域更改。


• 定位器 (Positioner): 将窗口移动到常用位置。


• 进程 (Process): 访问当前进程。


• Shell: 使用默认应用程序管理文件和URL,以及生成子进程。


• 单实例 (Single Instance): 确保Tauri应用同时只运行一个实例。


• SQL: 提供前端与SQL数据库通信的接口。


• 存储 (Store): 持久化的键值存储。


• Stronghold: 加密、安全的数据库。


• 系统托盘 (System Tray): 系统托盘功能。


• 更新器 (Updater): Tauri应用的应用内更新。


• 上传 (Upload): 通过HTTP进行文件上传。


• WebSocket: 在JavaScript中使用Rust客户端打开WebSocket连接。


• 窗口自定义 (Window Customization): 自定义窗口外观和行为。


• 窗口状态 (Window State): 保存窗口大小和位置。

这些插件涵盖了从基础功能到高级特性的广泛范围,让开发者能够根据项目需求灵活选择。通过这种模块化的方式，Tauri不仅保持了核心框架的轻量级，还为开发者提供了强大的扩展能力。无论您是开发一个简单的工具还是复杂的企业级应用，Tauri的插件系统都能满足您的需求。

3.安全性大幅提升：告别allowlist，迎接新的权限系统

Tauri 2.0 抛弃了旧的 allowlist 系统，引入了更加灵活和强大的权限、作用域和功能系统。这不仅提高了安全性，还让开发者能够更精细地控制应用的权限。值得一提的是，Tauri 还通过了独立的安全审计，让您使用起来更加放心。

4.性能优化：IPC层重写，更快更强

通过重写进程间通信（IPC）层，Tauri 2.0现在支持原始有效载荷，这意味着在前端和后端之间传输大量数据时，性能得到了显著提升。如果您的应用需要处理大量数据，这个特性绝对不容错过。

5.开发体验升级：HMR支持更给力

热模块替换（HMR）现在扩展到了移动设备和模拟器。这意味着您可以实时预览应用在不同设备上的表现，大大加速了开发和调试过程。

6.分发更简单：一站式解决方案

Tauri 2.0提供了详尽的分发指南，覆盖了从App Store到Google Play，再到Microsoft Store等多个平台。无论您的目标市场在哪里，Tauri都能帮您轻松应对。

结语

Tauri 2.0 的正式发布无疑是跨平台开发领域的一个重要里程碑。它不仅延续了 Tauri 一贯的轻量、快速的特点，还通过移动端支持、增强的插件系统和改进的安全机制等特性，为开发者提供了更强大、更灵活的工具。

如果您正在寻找一个能够同时覆盖桌面端和移动端的开发框架，Tauri 2.0绝对值得一试。它不仅能帮您节省时间和资源，还能为您的应用带来卓越的性能和安全性。

参考文章

v2.tauri.app/blog/tauri-…

v2.tauri.app/blog/tauri-…

Flutter 3.24 版本引入了 Flutter GPU 概念的新底层图形 API flutter_gpu ，还有 flutter_scene 的 3D 渲染支持库，它们目前都是预览阶段，只能在 main channel 上体验，并且依赖 Impeller 的实现。

Flutter GPU 是 Flutter 内置的底层图形 API，它可以通过编写 Dart 代码和 GLSL 着色器在 Flutter 中构建和集成自定义渲染器，而无需 Native 平台代码。

目前 Flutter GPU 处于早期预览阶段并只提供基本的光栅化 API，但随着 API 接近稳定，会继续添加和完善更多功能。

详细说，Flutter GPU 是 Impeller 对于 HAL 的一层很轻的包装，并搭配了关于着色器和管道编排的自动化能力，也通过 Flutter GPU 就可以使用 Dart 直接构建自定义渲染器。

Flutter GPU 和 Impeller 一样，它的着色器也是使用 impellerc 提前编译，所以 Flutter GPU 也只支持 Impeller 的平台上可用。

Impeller 的 HAL 和 Flutter GPU 都没打算成为类似 WebGPU 这样的正式标准，相反，Flutter GPU 主要是由 Flutter 社区开发和发展，专职为了 Flutter 服务，所以不需要考虑「公有化」的兼容问题。

在 Flutter GPU 上，可直接从 Dart 与 Impeller 的 HAL 对话，甚至 Impeller Scene API（3D）也将作为重写的一部分出现。

说人话就是，可以用 Dart 通过 Flutter GPU 直接构建自定义渲染效果，未来直接支持 3D

可能有的人对于 Impeller 的整体结构和 HAL 还很模式无法理解，那么这里我们简单过一下：

• 在 Framework 上层，我们知道 Widget -> Element -> RenderObject -> Layer 这样的过程，而后其实流程就来到了 Flutter 自定义抽象的 DisplayList


• DisplayList 帮助 Flutter 在 Engine 做了接耦，从而让 Flutter 可以在 skia 和 Impeller 之间进行的切换


• 之后 Impeller 架构的顶层是 Aiks，这一层主要作为绘图操作的高级接口，它接受来自 Flutter 框架的命令，例如绘制路径或图像，并将这些命令转换为一组更精细的 “Entities”，然后转给下一层。


• Entities Framework，它是 Impeller 架构的核心组件，当 Aiks 处理完命令时生成 Entities 后，每一个 Entity 其实就是渲染指令的独立单元，其中包含绘制特定元素的所有必要信息（编码位置、旋转、缩放、content object），此时还不能直接作用于 GPU


• HAL（Hardware Abstraction Layer） 则为底层图形硬件提供了统一的接口，抽象了不同图形 API 的细节，该层确保了 Impeller 的跨平台能力，它将高级渲染命令转换为低级 GPU 指令，充当 Impeller 渲染逻辑和设备图形硬件之间的桥梁。

所以 HAL 它包装了各种图形 API，以提供通用的设备作业调度接口、一致的资源管理语义和统一的着色器创作体验，而对于 Impeller ， Entities (2D renderer) 和 Scene (3D renderer) 都是直接通过 HAL 对接，甚至可以认为，Impeller 的 HAL 抽象并统一了 Metal 和 Vulkan 的常见用法和相似结构。

Unity 现在也有在 C# 直接向用户公开其 HAL 版本，称为 "Scriptable Render Pipeline" ，并提供了两个基于该 API 构建的默认渲染器 "Universal RP" / "High Definition RP" 用于服务不同的场景，所以 Unity 开发可以从使用这些渲染器去进行修改或扩展一些特定渲染需求。

而在 Flutter 的设计上，Flutter GPU 会作为 Flutter SDK 的一部分，并以 flutter_gpu 的 Dart 包的形式提供使用。

当然，Flutter GPU 由 Impeller 支持，但重要的是要记住它不是 Impeller ，Impeller 的 HAL 是私有内部代码与 Flutter GPU 的要求非常不同， Impeller 的私有 HAL 和 Flutter GPU 的公共 API 设计之间是存在一定差异化实现，而前面的流程，如 Scene (3D renderer) ，也可以被调整为基于 Flutter GPU 的全新模式实现。

而通过 Flutter GPU，如曾经的 Scene (3D renderer) 支持，也可以被调整为基于 Flutter GPU 的全新模式实现，因为 Flutter GPU 的 API 允许完全控制渲染通道附件、顶点阶段和数据上传到 GPU。这种灵活性对于创建复杂的渲染解决方案（从 2D 角色动画到复杂的 3D 场景）至关重要。

Flutter GPU 支持的自定义 2D 渲染器的一个很好的用例：依赖于骨骼网格变形的 2D 角色动画格式。

Spine 2D 就是一个很好的例子，骨骼网格解决方案通常具有动画剪辑，可以按层次结构操纵骨骼的平移、旋转和缩放属性，并且每个顶点都有几个相关的“bone weights”，这些权重决定了哪些骨骼应该影响顶点以及影响程度如何。

使用像 drawVertices 这样的 Canvas 解决方案，需要在 CPU 上对每个顶点应用骨骼权重变换，而 使用 Flutter GPU，骨骼变换可以用统一数组或纹理采样器的形式发送到顶点着色器，从而允许根据骨架状态和每个顶点的 “bone weights” 在 GPU 上并行计算每个顶点的最终位置。

使用 Flutter GPU

首先你需要在最新的 main channel 分支，然后通过 flutter pub add flutter_gpu --sdk=flutter 将 flutter_gpu SDK 包添加到你的 pubspec。

为了使用 Flutter GPU 渲染内容，你会需要编写一些 GLSL 着色器，Flutter GPU 的着色器与 Flutter 的 fragment shader 功能所使用的着色器具有不同的语义，特别是在统一绑定方面，还需要定义一个顶点(vertex)着色器来与 fragment shader 一起使用，然后配合 gpu.ShaderLibrary 等 API 就可以直接实现 Flutter GPU 渲染。

当然，本篇不会介绍详细的 API 使用 ，这里只是单纯做一个简单的介绍，目前 Flutter GPU 进行光栅化的简单流程如下：

• 获取 GPUContext。


• GpuContext.createCommandBuffer 创建一个 CommandBuffer


• CommandBuffer.createRenderPass 创建一个 RenderPass


• 使用各种方法设置状态/管道并绑定资源 RenderPass


• 附加绘图命令 RenderPass.draw


• CommandBuffer 使用 CommandBuffer.submit (异步)提交绘制，所有 RenderPass 会按照其创建顺序进行编码

·····

///导入 flutter_gpu

import 'package:flutter_gpu/gpu.dart' as gpu;



ByteData float32(List<double> values) {

  return Float32List.fromList(values).buffer.asByteData();

}



ByteData float32Mat(Matrix4 matrix) {

  return Float32List.fromList(matrix.storage).buffer.asByteData();

}



class TrianglePainter extends CustomPainter {

  TrianglePainter(this.time, this.seedX, this.seedY);



  double time;

  double seedX;

  double seedY;



  @override

  void paint(Canvas canvas, Size size) {

    /// Allocate a new renderable texture.

    final gpu.Texture? renderTexture = gpu.gpuContext.createTexture(

        gpu.StorageMode.devicePrivate, 300, 300,

        enableRenderTargetUsage: true,

        enableShaderReadUsage: true,

        coordinateSystem: gpu.TextureCoordinateSystem.renderToTexture);

    if (renderTexture == null) {

      return;

    }



    final gpu.Texture? depthTexture = gpu.gpuContext.createTexture(

        gpu.StorageMode.deviceTransient, 300, 300,

        format: gpu.gpuContext.defaultDepthStencilFormat,

        enableRenderTargetUsage: true,

        coordinateSystem: gpu.TextureCoordinateSystem.renderToTexture);

    if (depthTexture == null) {

      return;

    }



    /// Create the command buffer. This will be used to submit all encoded

    /// commands at the end.

    final commandBuffer = gpu.gpuContext.createCommandBuffer();



    /// Define a render target. This is just a collection of attachments that a

    /// RenderPass will write to.

    final renderTarget = gpu.RenderTarget.singleColor(

      gpu.ColorAttachment(texture: renderTexture),

      depthStencilAttachment: gpu.DepthStencilAttachment(texture: depthTexture),

    );



    /// Add a render pass encoder to the command buffer so that we can start

    /// encoding commands.

    final encoder = commandBuffer.createRenderPass(renderTarget);



    /// Load a shader bundle asset.

    final library = gpu.ShaderLibrary.fromAsset('assets/TestLibrary.shaderbundle')!;



    /// Create a RenderPipeline using shaders from the asset.

    final vertex = library['UnlitVertex']!;

    final fragment = library['UnlitFragment']!;

    final pipeline = gpu.gpuContext.createRenderPipeline(vertex, fragment);



    encoder.bindPipeline(pipeline);



    /// (Optional) Configure blending for the first color attachment.

    encoder.setColorBlendEnable(true);

    encoder.setColorBlendEquation(gpu.ColorBlendEquation(

        colorBlendOperation: gpu.BlendOperation.add,

        sourceColorBlendFactor: gpu.BlendFactor.one,

        destinationColorBlendFactor: gpu.BlendFactor.oneMinusSourceAlpha,

        alphaBlendOperation: gpu.BlendOperation.add,

        sourceAlphaBlendFactor: gpu.BlendFactor.one,

        destinationAlphaBlendFactor: gpu.BlendFactor.oneMinusSourceAlpha));



    /// Append quick geometry and uniforms to a host buffer that will be

    /// automatically uploaded to the GPU later on.

    final transients = gpu.HostBuffer();

    final vertices = transients.emplace(float32(<double>[

      -0.5, -0.5, //

      0, 0.5, //

      0.5, -0.5, //

    ]));

    final color = transients.emplace(float32(<double>[0, 1, 0, 1])); // rgba

    final mvp = transients.emplace(float32Mat(Matrix4(

          1, 0, 0, 0, //

          0, 1, 0, 0, //

          0, 0, 1, 0, //

          0, 0, 0.5, 1, //

        ) *

        Matrix4.rotationX(time) *

        Matrix4.rotationY(time * seedX) *

        Matrix4.rotationZ(time * seedY)));



    /// Bind the vertex data. In this case, we won't bother binding an index

    /// buffer.

    encoder.bindVertexBuffer(vertices, 3);



    /// Bind the host buffer data we just created to the vertex shader's uniform

    /// slots. Although the locations are specified in the shader and are

    /// predictable, we can optionally fetch the uniform slots by name for

    /// convenience.

    final mvpSlot = pipeline.vertexShader.getUniformSlot('mvp')!;

    final colorSlot = pipeline.vertexShader.getUniformSlot('color')!;

    encoder.bindUniform(mvpSlot, mvp);

    encoder.bindUniform(colorSlot, color);



    /// And finally, we append a draw call.

    encoder.draw();



    /// Submit all of the previously encoded passes. Passes are encoded in the

    /// same order they were created in.

    commandBuffer.submit();



    /// Wrap the Flutter GPU texture as a ui.Image and draw it like normal!

    final image = renderTexture.asImage();



    canvas.drawImage(image, Offset(-renderTexture.width / 2, 0), Paint());

  }



  @override

  bool shouldRepaint(covariant CustomPainter oldDelegate) {

    return true;

  }

}



class TrianglePage extends StatefulWidget {

  const TrianglePage({super.key});



  @override

  State<TrianglePage> createState() => _TrianglePageState();

}



class _TrianglePageState extends State<TrianglePage> {

  Ticker? tick;

  double time = 0;

  double deltaSeconds = 0;

  double seedX = -0.512511498387847167;

  double seedY = 0.521295573094847167;



  @override

  void initState() {

    tick = Ticker(

      (elapsed) {

        setState(() {

          double previousTime = time;

          time = elapsed.inMilliseconds / 1000.0;

          deltaSeconds = previousTime > 0 ? time - previousTime : 0;

        });

      },

    );

    tick!.start();

    super.initState();

  }



  @override

  Widget build(BuildContext context) {

    return Column(

      children: <Widget>[

        Slider(

            value: seedX,

            max: 1,

            min: -1,

            onChanged: (value) => {setState(() => seedX = value)}),

        Slider(

            value: seedY,

            max: 1,

            min: -1,

            onChanged: (value) => {setState(() => seedY = value)}),

        CustomPaint(

          painter: TrianglePainter(time, seedX, seedY),

        ),

      ],

    );

  }

}