Jetpack-Compose 學習筆記 Surface 用法-androidx.compose.material
Surface 位于 androidx.compose.material 包中，很顯然它是 Material Design 風格的，可以將它理解為一個容器，我們可以設置容器的高度（帶陰影效果）、Shape形狀、Background背景等。舉個栗子說明會更直觀：
@Composable
fun SurfaceShow() {
? ? Surface(
? ? ? ? shape = RoundedCornerShape(6.dp),
? ? ? ? border = BorderStroke(0.5.dp, Color.Green),? // 邊框
? ? ? ? elevation = 10.dp,? // 高度
? ? ? ? modifier = Modifier
? ? ? ? ? ? .padding(10.dp),? // 外邊距
//? ? ? ? color = Color.Black,? // 背景色
? ? ? ? contentColor = Color.Blue,
? ? ) {
? ? ? ? Surface(
? ? ? ? ? ? modifier = Modifier
? ? ? ? ? ? ? ? .clickable { }? // 點擊事件在 padding 前，則此padding為內邊距
? ? ? ? ? ? ? ? .padding(10.dp),
? ? ? ? ? ? contentColor = Color.Magenta? // 會覆蓋之前 Surface 設置的 contentColor
? ? ? ? ) {
? ? ? ? ? ? Text(text = "This is a SurfaceDemo~")
? ? ? ? }
? ? }
}
在這里實現(xiàn)了一個帶邊框圓角和陰影的按鈕。Surface 的功能主要有：
裁剪，根據(jù) shape 屬性描述的形狀進行裁剪；
高度，根據(jù) elevation 屬性設置容器平面的高度，讓人看起來有陰影的效果；
邊框，根據(jù) border 屬性設置邊框的粗細以及色值；
背景，Surface 在 shape 指定的形狀上填充顏色。這里會比較復雜一點，如果顏色是 Colors.surface，則會將 LocalElevationOverlay 中設置的 ElevationOverlay 進行疊加，默認情況下只會發(fā)生在深色主題中。覆蓋的顏色取決于這個 Surface 的高度，以及任何父級 Surface 設置的 LocalAbsoluteElevation。這可以確保一個 Surface 的疊加高度永遠不會比它的祖先低，因為它是所有先前 Surface 的高度總和。
內容顏色，根據(jù) contentColor 屬性給這個平面的內容指定一個首選色值，這個色值會被文本和圖標組件以及點擊態(tài)作為默認色值使用。當然可以被子節(jié)點設置的色值覆蓋。
作者：修之竹子
鏈接：https://juejin.cn/post/7001311967361105956
來源：稀土掘金
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
