在 Compose Desktop 中使用 Fuzio

本页介绍如何配置 Gradle 项目，以在 Compose GUI 工具包中使用 Fuzio。

前提条件

Git。
Java 17 或更高版本。
Fuzio 许可证密钥，或免费试用密钥。

获取项目

本指南中描述的示例项目可在 Gitee 独立仓库中找到。

配置 Gradle 项目

仓库

Fuzio 通过 Jiku 托管的 Maven 仓库进行分发。请将以下仓库引用添加到你的 build.gradle.kts 中：

repositories {
   // 包含 Fuzio 二进制文件的仓库。
   maven("https://jiku.mycloudrepo.io/public/repositories/releases")
}

版本变量

我们建议为项目中使用的 Fuzio 版本定义一个变量。以下各节将引用该变量。

val fuzioVersion = "2026.1.0"

平台

若要添加可在 Windows、macOS 和 Linux 上运行的 Fuzio 库，请添加以下代码：

dependencies {
   implementation("tech.fuzio:fuzio-cross-platform:$fuzioVersion")
}

Compose

若要在应用的 Compose GUI 中使用 Fuzio，请同时添加相应的 Fuzio 依赖项：

dependencies {
   implementation("tech.fuzio:fuzio-compose:$fuzioVersion")
}

为实现无缝的 Compose 集成，我们推荐使用 Compose Gradle 插件：

plugins {
    id("org.jetbrains.compose") version "1.7.3"
    id("org.jetbrains.kotlin.plugin.compose") version "2.0.0"
}

Kotlin DSL

如果你使用 Kotlin 进行开发，我们建议添加 Fuzio Kotlin DSL 以获得最佳体验。

dependencies {
   implementation("tech.fuzio:fuzio-kotlin:$fuzioVersion")
}

总结

Kotlin

plugins {
    java
    application
    kotlin("jvm") version "2.0.0"
    // 添加 Compose 插件以便轻松配置。
    id("org.jetbrains.compose") version "1.7.3"
    id("org.jetbrains.kotlin.plugin.compose") version "2.0.0"
}

val fuzioVersion = "2026.1.0"

repositories {
    google()
    mavenCentral()
    maven("https://jiku.mycloudrepo.io/public/repositories/releases")
}

dependencies {
    implementation("tech.fuzio:fuzio-cross-platform:${fuzioVersion}")
    implementation("tech.fuzio:fuzio-compose:${fuzioVersion}")
    implementation(kotlin("stdlib-jdk8"))
    implementation("tech.fuzio:fuzio-kotlin:${fuzioVersion}")
    implementation(compose.desktop.currentOs)

}

kotlin {
    jvmToolchain(17)
}

application {
    // 定义应用程序的主类。
    mainClass.set("ComposeAppKt")

}

tasks.withType<JavaExec> {
    // 将命令行中的所有 Java 系统属性分配给 JavaExec 任务。
    systemProperties(System.getProperties().mapKeys { it.key as String })
}

将 Fuzio 嵌入 Compose

Compose Desktop 应用使用 Kotlin 编写，并使用 Compose Desktop UI 工具包创建窗口，其中包含一个 BrowserView 组件，用于显示已加载网页的内容：

Kotlin
// ComposeApp.kt

import androidx.compose.runtime.DisposableEffect
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.WindowState
import androidx.compose.ui.window.singleWindowApplication
import tech.fuzio.dsl.Engine
import tech.fuzio.dsl.browser.navigation
import tech.fuzio.engine.RenderingMode.OFF_SCREEN
import tech.fuzio.view.compose.BrowserView

fun main() {
    // 初始化 Chromium。
    val engine = Engine(OFF_SCREEN)

    // 创建 Browser 实例。
    val browser = engine.newBrowser()

    singleWindowApplication(
        title = "Compose Desktop BrowserView",
        state = WindowState(width = 700.dp, height = 500.dp),
    ) {
        // 添加 BrowserView composable 以显示网页内容。
        BrowserView(browser)

        DisposableEffect(Unit) {
            browser.navigation.loadUrl("https://html5test.jiku.co")
            onDispose {
                // 关闭 Chromium 并释放已分配的资源。
                engine.close()
            }
        }
    }
}

运行 Compose 应用程序

使用以下命令构建并运行 Compose 应用程序：

./gradlew run -Dfuzio.license.key=<your_license_key>

启动后，你将看到一个包含 BrowserView 组件的 Compose 应用，其中显示 https://html5test.jiku.co：

Compose 应用中的 BrowserView

下一步

了解更多关于如何将 Fuzio 添加到 Gradle 项目。
阅读关于如何将 Fuzio 嵌入 Compose 应用。
查阅我们的指南，探索 Fuzio 的全部功能。

SWT

JavaFX