当前位置：首页 > news >正文

Jetpack Compose 基础组件学习2.1：Surface

news 来源：原创 2025/4/28 15:50:27

前言：
根据jetPack Compose 博物馆中的文档介绍，了解Surface组件的学习，但是更新版本之后有一些和当前版本对不上，对自己理解的学习记录一下。

Surface
Surface是平面的意思，一般是作为底层页面背景或者自定义背景实现时候进行使用，将很多的组件摆放在这个平面中，可以通过Surface自定义平面的边框，圆角，阴影和颜色等。

fun Surface(modifier: Modifier = Modifier,shape: Shape = RectangleShape,color: Color = MaterialTheme.colorScheme.surface,contentColor: Color = contentColorFor(color),tonalElevation: Dp = 0.dp,shadowElevation: Dp = 0.dp,border: BorderStroke? = null,content: @Composable () -> Unit
)

shape：可以通过RoundedCornerShape设置圆角大小或者通过MaterialTheme.shapes选择封装好的形状，例如

shape = MaterialTheme.shapes.small
//或
shape = RoundedCornerShape(0.dp)

color表示是surface自身的颜色，contentColor则表示content内容中的默认颜色
tonalElevation：控制阴影的深浅
shadowElevation：控制阴影的大小
border设置边框大小和颜色，例如

border = BorderStroke(1.dp, color = colorResource(R.color.agreen_red))

Icon
Icon的使用，可以加载位图和矢量图，分别有三种方式进行加载
ImageVector：矢量图对象，可以显示 SVG 格式的图标
ImageBitmap：位图对象，可以显示 JPG，PNG 等格式的图标
Painter：代表一个自定义画笔，可以使用画笔在 Canvas 上直接绘制图标我们除了直接传入具体类型的实例，也可以通过 res/ 下的图片资源来设置图标：
如下所示: 详细信息查看

Icon(imageVector = ImageVector.vectorResource(id = R.drawable.ic_svg), contentDescription = "矢量图资源")Icon(bitmap = ImageBitmap.imageResource(id = R.drawable.ic_png), contentDescription = "图片资源")Icon(painter = painterResource(id = R.drawable.ic_both), contentDescription = "任意类型资源")

使用icon的时候需要注意是，Icon中的tint属性是默认的，Compose 的 Icon 组件默认会应用 LocalContentColor，如果未明确指定 tint 参数，可能会覆盖原有颜色。对tint属性进行设置，tint = Color.Unspecified // 禁用着色，将tint进行设置。