首页 > 资讯 > 移动开发 >Jetpack Compose常用组件详细介绍

234

分享到

Jetpack Compose常用组件详细介绍

Jetpack Compose组件 Jetpack组件布局 Jetpack组件 2022-11-13 18:11:39 234人浏览八月长安

摘要

目录1. Text2. Image3. LazyColumn1. Text 日常最常用的应该就是显示文字，所以有必要说一下Text控件。首先源码如下： @Composable fun

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
)

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

text ：要显示的文字。显示资源使用stringResource(R.string.xxx)
modifier上一篇有介绍，这里略过。
color：文字的颜色。如果颜色未指定，并且style也没有设置颜色，则使用LocalContentColor的黑色。
textDecoration：文字上绘制的装饰(例如下划线TextDecoration.Underline)。
textAlign：文字在容器内的对齐方式，例如左对齐（TextAlign.Left），居中（TextAlign.Center）。比较特别的是TextAlign.Justify，表示在换行时拉伸所在行文字，以填充容器的宽度。

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

效果图：

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

overflow：文字在显示不下溢出时的显示方式。TextOverflow.Clip直接截断，TextOverflow.Ellipsis显示省略号，TextOverflow.Visible继续超出边界显示。

	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）剪切。

softWrap：文字是否自动换行。
onTextLayout：Text布局时执行的回调，返回的TextLayoutResult对象包含段落、文字大小等信息。
style：文字样式配置，包含上面提到的一些属性，还有一些例如文字阴影，背景色等属性。默认使用上层中最近的配置。

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
)

painter：绘制的图片，加载本地资源使用painterResource(id = R.drawable.xxx)
contentDescription：描述此图像所代表的内容，用于可访问型服务。
modifier上一篇有介绍，这里略过。
alignment就是图片在固定大小中的对齐方式。一共是八个方位加一个居中九种类型。
alpha：图片透明度。
colorFilter：颜色过滤器，基本和ImageVIew的一致。比如ColorFilter.lighting(multiply: Color, add: Color)用法和LightinGColorFilter一样，ColorFilter.colORMatrix(colorMatrix: ColorMatrix)和ColorMatrixColorFilter一样。这里放一个着色的小例子：

	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)
        )
    }

效果图：

contentScale就是图片的在固定大小中的缩放类型，和ImageView的scaleType一样。这里分为以下七种类型：

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

(2). ContentScale.Fit 等比缩放到自适应整个控件，如果结合Alignment.Center就和ImageView的ScaleType.FIT_CENTER一致。此模式为Image默认值。对于ImageView的ScaleType.FIT_START和ScaleType.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上开源的landscapist，里面功能很完善，也同时支持Coil。

3. LazyColumn

系统会对所有列表项进行组合和布局，无论它们是否可见，因此如果您需要显示大量列表项（或长度未知的列表），则使用 Column 等布局可能会导致性能问题。

Compose 提供了一组组件，这些组件只会对在组件视口中可见的列表项进行组合和布局。这些组件包括 LazyColumn 和 LazyRow。

你可以理解为一个是垂直方向滚动的RecyclerView，一个是水平方向滚动的RecyclerView。网格是LazyVerticalGrid，不过目前还是实验性（当前compose 1.1）。

直接上示例：

	LazyColumn(
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
    ) {
        // Add a single item
        item {
            Text(text = "First item")
        }
        // Add 5 items
        items(5) { index ->
            Text(text = "Item: $index")
        }
        // Add another single item
        item {
            Text(text = "Last item")
        }
    }

contentPadding：内容区域的内间距。
verticalArrangement：列表项之间在垂直方向上的间距。
item：添加一个列表项。
items：添加多个列表项。

效果图：

还有其他一些方法：

itemsIndexed：用法同items，不过它会同时返回索引。
stickyHeader：粘性标题，也就是平时见到的吸顶效果。目前为实验性API，详细用法见文末链接。

rememberLazyListState：列表的状态，提供了firstVisibleItemIndex 和 firstVisibleItemScrollOffset 属性，可以实现滚动位置的监听。scrollToItem()和 animateScrollToItem()方法，可以实现将列表滚动到指定item。用法：

	val listState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()
    LazyColumn(
        state = listState,
    ) {
       ...
    }
	Button(
        onClick = {
        	// 挂起函数，需要在协程中调用。
            coroutineScope.launch {
                listState.animateScrollToItem(index = 0)
            }
        }
    ) {
        ...
    }

对于按钮（Button）、输入框（TextField）等组件，因为篇幅有限就不一一说明了，大体用法差不太多，结合文档相信你也可以快速理解。

对于ViewPager，SwipeRefreshLayout这类常用组件，可以使用Google开源的Accompanist。当然里面不止这些，有兴趣的可以看一下。

随着Compose的普及，开源社区上已经有了很多的组件供我们使用，对于日常开发来说已经没有什么问题了。

参考

官方文档 - 列表

官方文档 - 文字

到此这篇关于Jetpack Compose常用组件详细介绍的文章就介绍到这了,更多相关Jetpack Compose组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: Jetpack Compose常用组件详细介绍

本文链接: https://lsjlt.com/news/170311.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

Jetpack Compose常用组件详细介绍

目录

1. Text

2. Image

3. LazyColumn

Jetpack Compose常用组件详细介绍

Jetpack Compose Canvas绘制超详细介绍

Android Jetpack组件中LifeCycle作用详细介绍

React高阶组件使用详细介绍

C#控件数组的详细介绍

Android组件化原理详细介绍

Android四大组件之Activity详细介绍

PHP Array 数组详细介绍

React受控组件与非受控组件详细介绍

Pythonwheel文件详细介绍

Dockerfile文件详细介绍

详细介绍 Vue 中如何划分组件

Vue封装DateRangePicker组件流程详细介绍

C语言数组详细介绍

Android 开发音频组件（Vitamio FAQ）详细介绍

Vue父子组件通信全面详细介绍

PythonDjango中间件详细介绍

Java异常机制的详细介绍

PHP二维数组的详细介绍

JavaInheritableThreadLocal用法详细介绍

Mac清理软件cleanmymac x4.14.4破解版,2024年有免费cleanmymac x激活码

山东移动CM311-5-ZG_国科GK6323V100C_安卓4.4.2_免拆U盘卡刷刷机固件包

基于微信海南海口某健身房私教预约小程序系统设计与实现研究背景和意义、国内外现状

Android Studio常用快捷键、Android Studio快捷键大全

xcode15下载ios17模拟器失败

C51模拟CSGO的C4炸弹小程序

uniapp中video层级太高解决方案，适用安卓/IOS/H5

基于微信小程序化妆品商城系统设计与实现

Axios使用方法详解，从入门到进阶

微信小程序使用自定义tabbar 想要获取tabbar的高度,返回的结果是null,该如何获取?