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~")

        }

    }

}

在这里实现了一个带边框圆角和阴影的按钮。Surface 的功能主要有：

1. 裁剪，根据 shape 属性描述的形状进行裁剪；

2. 高度，根据 elevation 属性设置容器平面的高度，让人看起来有阴影的效果；

3. 边框，根据 border 属性设置边框的粗细以及色值；

4. 背景，Surface 在 shape 指定的形状上填充颜色。这里会比较复杂一点，如果颜色是 Colors.surface，则会将 LocalElevationOverlay 中设置的 ElevationOverlay 进行叠加，默认情况下只会发生在深色主题中。覆盖的颜色取决于这个 Surface 的高度，以及任何父级 Surface 设置的 LocalAbsoluteElevation。这可以确保一个 Surface 的叠加高度永远不会比它的祖先低，因为它是所有先前 Surface 的高度总和。

5. 内容颜色，根据 contentColor 属性给这个平面的内容指定一个首选色值，这个色值会被文本和图标组件以及点击态作为默认色值使用。当然可以被子节点设置的色值覆盖。

作者：修之竹子
链接：https://juejin.cn/post/7001311967361105956
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。