注：解決方式在最后翎嫡。
一欠动、問題復現(xiàn)
Compose Desktop，AlertDialog代碼如下：
AlertDialog(
modifier = Modifier
.clip(RoundedCornerShape(10.dp))
.fillMaxHeight(0.3f)
.fillMaxWidth(0.35f)
.background(Color.White)
.padding(20.dp),
title = null,
text = { /* 略 */ },
buttons = { /* 略 */ }
)
這里設置了RoundCornerShape圓角惑申，彈出的對話框如圖：
image.png
發(fā)現(xiàn)是沒有圓角的具伍。根據(jù)網(wǎng)上查到的信息，設置 AlertDialog 的背景為透明圈驼，無效人芽。
當我給這個dialog設置背景色，如：
AlertDialog(
modifier = Modifier
.clip(RoundedCornerShape(10.dp))
.fillMaxHeight(0.3f)
.fillMaxWidth(0.35f)
.background(Color.Red) // 設置背景色為紅色
.padding(20.dp),
title = null,
text = { /* 略 */ },
buttons = { /* 略 */ }
)
結果如圖：
image.png
可以看出绩脆，這多半是 AlertDialog 父組件的背景色萤厅，而不是 AlertDialog 自身的原因。
二靴迫、原因分析
根據(jù) AlertDialog 的源碼來看惕味，其界面是通過 dialogProvider 來提供的。
fun AlertDialog(
onDismissRequest: () -> Unit,
buttons: @Composable () -> Unit,
modifier: Modifier = Modifier,
title: (@Composable () -> Unit)? = null,
text: @Composable (() -> Unit)? = null,
shape: Shape = MaterialTheme.shapes.medium,
backgroundColor: Color = MaterialTheme.colors.surface,
contentColor: Color = contentColorFor(backgroundColor),
dialogProvider: AlertDialogProvider = PopupAlertDialogProvider
) {
with(dialogProvider) {
AlertDialog(onDismissRequest = onDismissRequest) {
AlertDialogContent(
buttons = buttons,
modifier = modifier.width(IntrinsicSize.Min),
title = title,
text = text,
shape = shape,
backgroundColor = backgroundColor,
contentColor = contentColor
)
}
}
}
而 dialogProvider 的默認實現(xiàn)是 PopupAlertDialogProvider玉锌，其中界面部分的代碼如下：
Box(
modifier = Modifier
.fillMaxSize()
.background(scrimColor)
.pointerInput(onDismissRequest) {
detectTapGestures(onPress = { onDismissRequest() })
},
contentAlignment = Alignment.Center
) {
Surface(Modifier.pointerInput(onDismissRequest) {
detectTapGestures(onPress = {
// Workaround to disable clicks on Surface background https://github.com/JetBrains/compose-jb/issues/2581
})
}, elevation = 24.dp) {
content()
}
}
其中名挥，對話框就是其中的 Surface 部分。而 Surface 的默認背景顏色就是白色主守。
問題找到了禀倔，就好解決了榄融。
三、解決
- 新建一個
CustomDialogProvider救湖，并復制PopupAlertDialogProvider的代碼愧杯。
將其中的Surface背景改為透明。
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.AlertDialogProvider
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.awt.awtEventOrNull
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.key.KeyEventType
import androidx.compose.ui.input.key.type
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.unit.*
import androidx.compose.ui.window.Popup
import androidx.compose.ui.window.PopupPositionProvider
import java.awt.event.KeyEvent
@OptIn(ExperimentalMaterialApi::class)
object CustonDialogProvider : AlertDialogProvider {
@Composable
override fun AlertDialog(onDismissRequest: () -> Unit, content: @Composable () -> Unit) {
// Popups on the desktop are by default embedded in the component in which
// they are defined and aligned within its bounds. But an [AlertDialog] needs
// to be aligned within the window, not the parent component, so we cannot use
// [alignment] property of [Popup] and have to use [Box] that fills all the
// available space. Also [Box] provides a dismiss request feature when clicked
// outside of the [AlertDialog] content.
Popup(
popupPositionProvider = object : PopupPositionProvider {
override fun calculatePosition(
anchorBounds: IntRect,
windowSize: IntSize,
layoutDirection: LayoutDirection,
popupContentSize: IntSize
): IntOffset = IntOffset.Zero
},
focusable = true,
onDismissRequest = onDismissRequest,
onKeyEvent = {
if (it.type == KeyEventType.KeyDown && it.awtEventOrNull?.keyCode == KeyEvent.VK_ESCAPE) {
onDismissRequest()
true
} else {
false
}
},
) {
val scrimColor = Color.Black.copy(alpha = 0.32f) //todo configure scrim color in function arguments
Box(
modifier = Modifier
.fillMaxSize()
.background(scrimColor)
.pointerInput(onDismissRequest) {
detectTapGestures(onPress = { onDismissRequest() })
},
contentAlignment = Alignment.Center
) {
Surface(
Modifier.pointerInput(onDismissRequest) {
detectTapGestures(onPress = {
// Workaround to disable clicks on Surface background
})
},
elevation = 24.dp,
color = Color.Transparent // 修改背景色為透明
) {
content()
}
}
}
}
}
- 在 AlertDialog 參數(shù)中鞋既，加入自定義的 DialogProvider力九。
AlertDialog(
modifier = Modifier
.clip(RoundedCornerShape(10.dp))
.fillMaxHeight(0.3f)
.fillMaxWidth(0.35f)
.background(Color.White)
.padding(20.dp),
dialogProvider = CustonDialogProvider, // 添加自定義的 DialogProvider
title = null,
text = { /* 略 */ },
buttons = { /* 略 */ }
)
再次運行代碼，發(fā)現(xiàn)圓角正常顯示了：
image.png
當然涛救，我們也可以通過在 Theme 中設置 Surface 的顏色畏邢，達到相同的效果：
MaterialTheme(colors = MaterialTheme.colors.copy(surface = Color.Transparent)) {
// 略
}
不過這樣就會改變所有Surface 的顏色了业扒。
