Collagraph 📓

响应式用户界面。

单词 Collagraphy 源于希腊语单词 koll 或 kolla，意为胶水，以及 graph，意为绘画活动。

受Vue和React的启发。

功能

使用纯渲染函数、组件类或甚至使用类似Vue的语法创建的单文件组件以声明方式编写您的Python接口，但使用Python！

• 响应性（通过利用 observ 实现）
• 函数组件
• 具有局部状态和生命周期方法/钩子的类组件
• 使用类似Vue的模板语法（.cgx文件）的单文件组件
• 自定义渲染器

以下是一个示例，它展示了使用类似Vue的语法创建的计数器组件

counter.cgx 的内容

<template>
  <widget>
    <label
      :text="f'Count: {count}'"
    />
    <button
      text="bump"
      @clicked="bump"
    />
  </widget>
</template>

<script>
import collagraph as cg


class Counter(cg.Component):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.state["count"] = 0

    def bump(self):
        self.state["count"] += 1
</script>

app.py 的内容

from PySide6 import QtWidgets
import collagraph as cg

# After importing collagraph, it's possible to import
# components directly from .cgx files
from counter import Counter

# Create a Collagraph instance with a PySide renderer
# and register with the Qt event loop
gui = cg.Collagraph(renderer=cg.PySideRenderer())
# Render the component into a container
# (in this case the app but can be another widget)
app = QtWidgets.QApplication()
gui.render(cg.h(Counter), app)
app.exec()

看起来像这样

您可以直接使用collagraph CLI运行组件，而不是使用Python文件作为运行组件的入口点

poetry run collagraph examples/pyside/counter.cgx

有关更多示例，请参阅 examples文件夹。

目前有三种渲染器

• PysideRenderer：用于渲染 PySide6 应用程序
• PygfxRenderer：用于使用 Pygfx 渲染 3D 图形场景
• DomRenderer：通过 PyScript（或更确切地说 Pyodide）将渲染输出到浏览器 DOM

可以使用 Renderer 接口创建自定义渲染器，以渲染到其他 UI 框架，例如 wxPython。

开发

要尝试 Collagraph 或开始开发，请运行

# Basic dev setup (no pygfx or pyside)
poetry install
# Full dev setup
poetry install --with pyside --extras pyside --extras pygfx
# Run example:
poetry run python examples/pyside/layout-example.py
# Run test suite:
poetry run pytest
# Install git pre-commit hooks to make sure tests/linting passes before committing
poetry run pre-commit install

语法高亮

支持为 VSCode 和 Sublime Text 单文件组件（.cgx）提供语法高亮

• Sublime Text 的 CGX 语法高亮
• VSCode 的 CGX 语法高亮

格式化和代码检查

可以使用 flake8 插件对 cgx 文件进行代码检查： flake8-cgx。可以使用 black-cgx 格式化脚本标签的内容。