Jetpack Compose 基础组件学习2.1:Surface
前言:
根据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进行设置。