如何在Compose Multiplatform桌面端正确引入ConstraintLayout依赖

1. 模块级依赖配置 #

在模块的build.gradle.kts文件的dependencies块中，添加以下依赖：

dependencies {
    // 保留你项目中原有的其他依赖
    implementation("org.jetbrains.compose.foundation:foundation-layout:${compose.version}")
    implementation("androidx.constraintlayout:constraintlayout-compose:1.0.1")
}

注：${compose.version}替换为你项目实际使用的Compose Multiplatform版本号（比如1.5.10），如果根项目已定义该版本变量则可直接引用。

2. 确认项目级插件与仓库配置 #

在根项目的build.gradle.kts中，确保包含Compose插件和对应仓库：

plugins {
    id("org.jetbrains.compose") version "1.5.10" apply false
}

repositories {
    google()
    mavenCentral()
    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
}

模块级build.gradle.kts顶部需应用必要插件：

plugins {
    kotlin("jvm")
    id("org.jetbrains.compose")
}

3. 基础使用示例 #

配置完成后，即可在Compose代码中使用ConstraintLayout：

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.constraintlayout.compose.ConstraintLayout

@Composable
fun ConstraintLayoutDemo() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (textTop, textBottom) = createRefs()

        Text(
            text = "顶部文本",
            modifier = Modifier.constrainAs(textTop) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
            }
        )

        Text(
            text = "底部文本",
            modifier = Modifier.constrainAs(textBottom) {
                top.linkTo(textTop.bottom)
                start.linkTo(parent.start)
            }
        )
    }
}

注意事项 #

• constraintlayout-compose版本需与Compose版本兼容，比如1.0.1适配Compose 1.4+，建议使用对应版本的最新稳定版。
• 桌面端无需额外配置Android相关依赖，constraintlayout-compose本身支持跨平台。

内容的提问来源于stack exchange，提问作者ashes