JetBrains Compose for Desktop 标题栏背景色或深色模式

Question

JetBrains Compose for Desktop 中有没有办法更改标题栏背景颜色或仅将其更改为深色模式？我使用的是 MacOS，所以条形可以是浅色或深色。也可以让标题栏本身不可见（但保留关闭、最小化和最大化按钮）并在其下方创建您自己的视图。

我正在查看撰写 window 代码，但在那里找不到它。

Answer 1

Compose 建立在 Swing 之上，doesn't seems possible 可以更改标题栏颜色。

但至少您可以在 build.gradle.kts 中使用以下选项来遵循系统 dark/light 模式：

compose.desktop {
    application {
        // ...
        nativeDistributions {
            // ...
            jvmArgs(
                "-Dapple.awt.application.appearance=system"
            )
        }
    }
}

另一种选择是构建您自己的标题栏，如 this tutorial 所示，但这也会隐藏系统按钮，这远非完美。

Answer 2

基于上述答案中引用的教程，我为 DialogWindowScope 创建了一个扩展函数，并将其添加为未修饰的 Dialog

中的第一个元素

Dialog(...) {
    Column (...) {
        dialogTitleBar("dialog title") { on close clicked }
    }
}

@Composable
fun DialogWindowScope.dialogTitleBar(
    title: String? = null,
    onClick: () -> Unit
) = WindowDraggableArea{
    Column(modifier = Modifier.fillMaxWidth()) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                modifier = Modifier.padding(start = 10.dp, bottom = 4.dp, top = 4.dp),
                color = MaterialTheme.colors.primary,
                fontSize = MaterialTheme.typography.body2.fontSize,
                text = title ?: ""
            )

            CloseButton(onClick)
        }
        Divider(
            Modifier.fillMaxWidth(),
            color = MaterialTheme.colors.primary.copy(alpha = .95f)
        )
    }
}

@Composable
fun CloseButton(onClick: () -> Unit) {
    val interactionSource = remember { MutableInteractionSource() }
    val isHovered by interactionSource.collectIsHoveredAsState()
    Icon(
        modifier = Modifier.size(24.dp)
            .background(if (isHovered) Color.Red else MaterialTheme.colors.onPrimary)
            .hoverable(interactionSource)
            .clickable(onClick = onClick),
        imageVector = Icons.Default.Close,
        contentDescription = "Close",
        tint = MaterialTheme.colors.primary
    )
}```

JetBrains Compose for Desktop 标题栏背景色或深色模式

JetBrains Compose for Desktop title bar background color or dark mode

compose-desktop

compose-multiplatform