更新记录

1.0.4（2025-06-04） 下载此版本

• ➕ 新增 useState Hook
• ➕ 新增 StateBuilder 配套组件，搭配useState使用。

1.0.3（2025-06-02） 下载此版本

1.0.2（2025-05-29） 下载此版本

新增Opacity组件控制不透明度

平台兼容性

uni-app(4.01)

uni-app x(4.01)

其他

📦 更新日志

• 2025/05/27：新增 PromiseBuilder 组件
• 2025/06/2：
• 🐛 修复Text组件参数声明问题
• 2025/06/3：
• ➕ 新增 useState Hook
• ➕ 新增 StateBuilder 配套组件，搭配useState使用。

• 🐛 修复图片再次刷新时不切换图片bug

🧩 关于插件：GenPoster

万物皆组件，未来海报构建新方案

GenPoster 是一款基于 Canvas 的跨平台海报生成框架，具备以下特点：

• 🚫 非 DOM 构建：完全抛弃 HTML 布局，真正做到“在画布上写代码”。
• 💡 组件化设计：借鉴 Flutter 的构建思想，UI 渲染采用树形结构。
• 🚀 跨平台支持：一次编码，多端运行，兼容多种前端平台。
• 🔌 纯原生构建：支持 html、vue2、vue3、js、ts、angular 等技术栈。
• 🎨 Canvas 自绘方式：完美规避平台内生图兼容性问题。
• ❌ 拒绝 JSON 配置式布局：坚持代码式构建，体验更丝滑。
• 📞 平台适配中：如果未支持你的平台，请联系作者添加支持。

🛠️ 使用方法

先安装库

 npm i gen-poster-f

1. 构建组件：就像 Flutter 一样

一个简单的橙色盒子：

Container({
    width: 100,
    height: 100,
    color: Colors.orange
})

是不是很直观？

2. 布局嵌套：容器中的容器

横向排列三个间隔为 10 的橙色方块：

const box = Container({
    width: 100,
    height: 100,
    color: Colors.orange
});

Row({
    spacing: 10,
    children: [box, box, box]
});

💡 你可以试试把 Row 改成 Column 看看效果！

3. 对齐方式：让内容井然有序

通过 alignment 控制子组件对齐方式：

Container({
    width: 300,
    height: 300,
    color: Colors.grey200,
    alignment: Alignment.center,
    child: Container({
        width: 100,
        height: 100,
        color: Colors.blue
    })
});

支持对齐方式包括：center、left、right 等。

4. 更多玩法：下载 Demo 体验未来布局方案

📥 下载 Demo

• 内含完整示例与组件用法
• 请参考 Demo 中的 必看.md 文件获取安装与使用细节
• ⚠️ 本库为 JS SDK，不是 uni_modules 模块

🎯 结语

GenPoster 是一个自由、灵活、极具未来感的布局框架。 与其说是一个海报工具，不如说它是 “在画布上写 UI 的引擎”。 告别繁琐 JSON，拥抱代码构建！

如需帮助或平台适配，请联系作者。

🆘 需要帮助

QQ交流群:811955833