Terrarium：为程序员打造的跨平台UI原型工具

余达殉Lambert

于 2024-09-08 09:33:25 发布

阅读量1k

点赞数 19

本文链接：https://blog.csdn.net/gitblog_00475/article/details/142019458

版权

Terrarium：为程序员打造的跨平台UI原型工具

terrarium-appUI Prototyping Tool for Coders项目地址:https://gitcode.com/gh_mirrors/te/terrarium-app

项目介绍

Terrarium是一款专为程序员设计的跨平台QML Playground工具。它能够在编辑器中实时渲染QML代码，使得原型设计和实验变得更加有趣和高效。Terrarium通过监控TextEdit中的更改，并触发视图从本地HTTP服务器重新加载源代码，实现了即时的反馈和调试。如果你正在寻找一个文件系统监视器的实现，可以参考QML LiveReload。

项目技术分析

Terrarium的核心技术基于QtQuick，这是一个强大的UI框架，允许开发者使用QML语言快速构建高性能的跨平台应用程序。Terrarium通过集成QHttpServer，实现了本地HTTP服务器的功能，使得代码的实时渲染成为可能。此外，Terrarium还利用了QMLHighligher和DocumentHandler等组件，提供了代码高亮和文档处理的功能，进一步提升了开发体验。

项目及技术应用场景

Terrarium适用于以下场景：

UI原型设计：开发者可以在Terrarium中快速编写和测试QML代码，实时查看UI效果，极大地提高了原型设计的效率。
跨平台开发：Terrarium支持iOS、Android、Mac OSX、Ubuntu Linux和Ubuntu Touch等多个平台，使得开发者可以在不同设备上无缝进行开发和测试。
实时调试：通过Terrarium的实时渲染功能，开发者可以在编写代码的同时立即看到效果，减少了调试的时间和成本。

项目特点

跨平台支持：Terrarium支持iOS、Android、Mac OSX、Ubuntu Linux和Ubuntu Touch等多个平台，满足不同开发者的需求。
实时渲染：Terrarium能够在编辑器中实时渲染QML代码，使得原型设计和实验变得更加直观和高效。
本地HTTP服务器：通过集成QHttpServer，Terrarium实现了本地HTTP服务器的功能，使得代码的实时加载和渲染成为可能。
代码高亮和文档处理：Terrarium利用QMLHighligher和DocumentHandler等组件，提供了代码高亮和文档处理的功能，提升了开发体验。

下载与安装

Terrarium提供了多个平台的安装包，你可以根据需要选择下载：

构建指南

如果你希望从源码构建Terrarium，可以按照以下步骤进行：

git clone https://github.com/penk/terrarium-app.git
cd terrarium-app && git submodule init && git submodule update
qmake && make

平台特定指南

Arch Linux

在Arch Linux上，你可以通过AUR安装Terrarium：

yaourt -S terrarium-git

Mac OSX/iOS

对于iOS平台，你需要生成并打开Terrarium.xcodeproj，然后将AppIcon切换到使用Assets Catalog，并替换Terrarium/Images.xcassets/目录。对于Mac OSX，可以参考terrarium-app.pro文件中的macdeployqt命令。

Ubuntu Desktop/Phone

如果你使用的是来自apt存档的Qt包，而不是qt-project.org的发布版本，可以按照以下步骤安装依赖：

sudo apt-get install qt5-qmake qt5-default qtbase5-dev qtdeclarative5-dev build-essential

所有debian/包信息可以在platform/ubuntu/目录下找到，复制到当前路径并构建包：

cp -r platform/ubuntu/debian .
cp platform/ubuntu/terrarium.desktop .
dpkg-buildpackage -b

如果你正在构建click包，可以在设备上执行以下命令（用于本地编译）：

cp platform/ubuntu/* .
click build .

然后安装：

pkcon --allow-untrusted install-local com.ubuntu.developer.penk.terrarium_1.5_armhf.click

Android

首先生成你的keystore：

keytool -genkey -v -keystore ../TerrariumApp.keystore -alias TerrariumApp -keyalg RSA -keysize 2048 -validity 10000

然后：

~/Qt5.4.1/5.4/android_armv7/bin/qmake
make
make install INSTALL_ROOT=../android-terrarium

最后，构建并签名APK：

~/Qt5.4.1/5.4/android_armv7/bin/androiddeployqt --input \
    android-libTerrarium.so-deployment-settings.json \
    --output ../android-terrarium --release --sign ../TerrariumApp.keystore TerrariumApp