ReactGD 使用教程

2024-09-01 22:11:31作者：段琳惟

ReactGD，为Godot引擎注入活力的UI神器！这是一款让界面设计前所未有的灵活与高效工具，确保每次更新仅针对必要节点。通过融入React思想，只需简单定义`render`函数并返回Godot Dictionary，即可根据组件状态动态渲染UI。当组件状态变动时，它智能地刷新视图，实现精妙的交互体验。示例中的智能按钮，不仅记录点击次数，还能随机变换背景色，展示其强大功能。想象一下，用ReactGD打造响应式Todo列表，一切交互顺滑流畅。加入这个开源旅程，一起探索、扩展，并享受上帝视角下创作的无限可能。未来路线图包括详尽文档、功能增强及VSCode智能提示支持，致力于提升每一位开发者在Godot世界的创造力。

项目地址：https://gitcode.com/gh_mirrors/re/ReactGD

1、项目介绍

ReactGD 是一个用于创建动态用户界面（UI）的扩展工具，它提供了灵活性和效率，其中节点仅在需要时更新。通过扩展脚本并使用 ReactComponent，您可以使用 render 函数返回 Godot 的 Dictionary，其中包含组件的属性和状态所需渲染的所有内容。组件仅在状态发生变化或父 ReactComponent 更改组件属性时渲染。

2、项目快速启动

安装

首先，克隆项目仓库到本地：

git clone https://github.com/ghsoares/ReactGD.git

示例代码

以下是一个简单的按钮示例，显示按钮被点击的次数，并随机更改背景颜色：

extends ReactUI

const font_path := "res://Fonts/JetBrains/fonts/ttf/JetBrainsMono-Regular.ttf"

func construct() -> void:
    self.state = {
        "click_count": 0,
        "color": Color.from_hsv(randf(), 1, 0.1, 0.1)
    }

func on_button_click() -> void:
    self.set_state({
        "click_count": self.state.click_count + 1,
        "color": Color.from_hsv(randf(), 1, 0.1, 0.1)
    })

func render():
    var click_count : int = self.state.click_count
    var color : Color = self.state.color
    var theme := {
        "click_button": {
            "styles": {
                ["normal", StyleBoxFlat]: {
                    "bg_color": color,
                    "corner_radius": 8.0
                }
            }
        }
    }