在 Compose Desktop 中使用 Fuzio

在 Compose Gradle 项目中使用 Fuzio 最简单的方法，是克隆我们准备好的 Gitee 仓库，所有内容都已配置完毕，可以直接运行。

前提条件

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

获取项目

使用以下命令克隆 Gitee 仓库：

git clone https://gitee.com/jiku-technology-dev/fuzio-quickstart-gradle-compose.git
cd fuzio-quickstart-gradle-compose

运行 Compose 应用程序

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

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

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

Compose 应用中的 BrowserView

项目概述

本节将介绍如何配置 Gradle 项目以引入 Fuzio，以及如何将 Fuzio 的 BrowserView 组件嵌入到 Compose Desktop 场景中以显示已加载网页的内容。

配置 Gradle 项目

Gradle 项目使用 Fuzio Gradle 插件来添加所需的 Fuzio 依赖项，并自动获取当前平台的 Chromium 二进制文件。

以下是 build.gradle.kts 的配置方式：

plugins {
    java
    application
    kotlin("jvm") version "2.0.0"

    // 添加 Fuzio 依赖项。
    id("tech.fuzio.gradle") version "1.0.0"

    // 添加 Compose 插件以便轻松配置。
    id("org.jetbrains.compose") version "1.10.3"
    id("org.jetbrains.kotlin.plugin.compose") version "2.3.20"
}

repositories {
    google()
    mavenCentral()
}

fuzio {
    // 使用最新稳定的 Fuzio 版本。
    version = "2026.3.0"
}

application {
    // 定义 Kotlin 应用程序的主类。
    mainClass.set("tech.fuzio.quickstart.gradle.compose.AppKt")
}

dependencies {
    // 检测当前平台并添加对应的 Chromium 二进制文件。
    implementation(fuzio.currentPlatform)

    // 添加 Compose Desktop UI 工具包集成的依赖项。
    implementation(fuzio.compose)

    // 添加当前平台对应的 Compose Desktop UI 工具包。
    implementation(compose.desktop.currentOs)
}

tasks.withType<JavaExec> {
    // 将命令行中的所有 Java 系统属性传递给 JavaExec 任务，
    // 以便注入 Fuzio 许可证密钥。
    systemProperties(System.getProperties().mapKeys { it.key as String })
}

在 Compose 中嵌入 Fuzio

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

Kotlin
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()
            }
        }
    }
}

了解更多

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

SWT

JavaFX