亲宝软件园·资讯

展开

Jetpack Compose常用组件详细介绍

唯鹿 人气:0

1. Text

日常最常用的应该就是显示文字,所以有必要说一下Text控件。首先源码如下:

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
)

部分属性,见名知意,所以就不多说了。

	Column {
        Text(
            "Hello Compose Hello Compose",
            modifier = Modifier.width(120.dp)
        )
        Text(
            "Hello Compose Hello Compose",
            modifier = Modifier.width(120.dp),
            textAlign = TextAlign.Justify,
        )
    }

效果图:

其实这个属性不太适应于中文,如果你要拉伸需要文字间添加空格。不要误以为是在指定宽度内文字均匀显示。

	Column {
        Text(
            "Hello Compose Hello Compose Hello Compose",
            modifier = Modifier.size(120.dp, 50.dp),
        )
        Text(
            "Hello Compose Hello Compose Hello Compose",
            modifier = Modifier.size(120.dp, 50.dp),
            overflow = TextOverflow.Visible,
        )
    }

效果图:

注意:无法避免被其他修饰符(如Modifier.clipToBounds)剪切。

2. Image

Image的源码如下:

@Composable
fun Image(
    painter: Painter,// 或ImageBitmap,ImageVector
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = 1.0f,
    colorFilter: ColorFilter? = null
)
	Column {
        Image(
            painter = painterResource(id = R.drawable.intercom_snooze),
            modifier = Modifier.size(220.dp, 60.dp).background(Color.Yellow),
            contentDescription = null
        )
        Image(
            painter = painterResource(id = R.drawable.intercom_snooze),
            modifier = Modifier.size(220.dp, 60.dp).background(Color.Yellow),
            contentDescription = null,
            colorFilter = ColorFilter.tint(color = Color.Green)
        )
    }

效果图:

(1). ContentScale.Crop 等比缩放到完全填充整个控件,如果结合Alignment.Center就和ImageView的ScaleType.CENTER_CROP一致。

(2). ContentScale.Fit 等比缩放到自适应整个控件,如果结合Alignment.Center就和ImageView的ScaleType.FIT_CENTER一致。此模式为Image默认值。对于ImageView的ScaleType.FIT_STARTScaleType.FIT_END其实就是调整alignment属性。

(3). ContentScale.FillHeight 等比缩放到图片高度填满控件高度。

(4). ContentScale.FillWidth 等比缩放到图片宽度填满控件宽度。

(5). ContentScale.Inside 如果宽高大于控件宽高,则等比缩放展示。如果图片宽高小于等于控件宽高,则不缩放直接展示。结合Alignment.Center就和ImageView的ScaleType.CENTER_INSIDE一致。

(6). ContentScale.None 不缩放,原图大小展示。结合Alignment.Center就和ImageView的ScaleType.CENTER一致。

(7). ContentScale.FillBounds拉伸图片宽高填满控件,和ImageView的ScaleType.FIT_XY一致。

因为基本上和原生ImageView类似,这里就简单示例一下:

	Column {
        Image(
            painter = painterResource(id = R.drawable.intercom_snooze),
            modifier = Modifier.size(220.dp, 60.dp).background(Color.Yellow),
            contentDescription = null
        )
        Image(
            painter = painterResource(id = R.drawable.intercom_snooze),
            modifier = Modifier.size(220.dp, 60.dp).background(Color.Yellow),
            contentDescription = null,
            alignment = Alignment.TopStart
        )
        Image(
            painter = painterResource(id = R.drawable.intercom_snooze),
            modifier = Modifier.size(220.dp, 60.dp).background(Color.Yellow),
            contentDescription = null,
            contentScale = ContentScale.Crop,
        )
        Image(
            painter = painterResource(id = R.drawable.intercom_snooze),
            modifier = Modifier.size(220.dp, 60.dp).background(Color.Yellow),
            contentDescription = null,
            contentScale = ContentScale.FillBounds,
        )
    }

效果图:

最后补充一下如何加载网络图片。目前Coil这个图片加载框架支持了Jetpack Compose,使用时添加Coil依赖:

    implementation("io.coil-kt:coil:1.4.0")
    implementation("io.coil-kt:coil-compose:1.4.0")

用法:

Image(
    painter = rememberImagePainter("https://xxx"),
    contentDescription = null,
)

具体的功能用法可以参看文档,这里就不说明了。

对于我们习惯使用的Glide、Fresco截止本文发布前官方没有支持,但是可以使用Github上开源的

加载全部内容

相关教程
猜你喜欢
用户评论