也是组合函数而不是以对象的形式提供。一、文本 Text查看官方介绍Composablefun Text(text: String,modifier: Modifier Modifier,color: Color Color.Unspecified,autoSize: TextAutoSize? null,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,minLines: Int 1,onTextLayout: ((TextLayoutResult) - Unit)? null,style: TextStyle LocalTextStyle.current,)Text( text Hello Word!, //显示的文本从res中加载stringResource(R.string.str) modifier Modifier, color Color.Red, //文字颜色 autoSize TextAutoSize.StepBased( //根据容器大小自动调整自身尺寸 minFontSize 12.sp, //最小字号默认 12sp maxFontSize 24.sp, //最大字号默认 112sp stepSize 2.sp //步长默认 0.25sp ), fontSize 30.sp, //字号 fontStyle FontStyle.Italic, //文字风格斜体 fontFamily FontFamily.Serif, //字体从res中加载FontFamily(Font(R.font.xxx_light,FontWeight.Light), Font(R.font.xxxbold,FontWeight.Bold)) fontWeight FontWeight.Bold, //文字权重粗细通过构造创建的取值范围1~1000伴生对象中的W100~W900为默认取值方便调用 letterSpacing 15.sp, //字间距 textDecoration TextDecoration.None, //文字修饰Underline下划线LineThrough删除线 textAlign TextAlign.Center, //对齐方式需要有固定宽度才有效果 lineHeight 15.sp, //行高 overflow TextOverflow.Clip, //文字溢出处理 softWrap true, //是否软换行 maxLines 5, //最大行数 minLines 1 //最小行数 // onTextLayout ? style TextStyle(//文本样式阴影、偏移、模糊 shadow Shadow(color Blue, offset Offset(5.0F, 10.0F), blurRadius 3F), textIndent TextIndent(20.sp) //行首缩进 ), onTextLayout { }, //计算布局时回调文本布局发生变化时的回调 )1.1 支持复制 SelectionContainer()默认情况下 Text() 不支持选择复制文字需要使用 SelectionContainer() 组件来包装作用域中可再使用 DisableSelection() 包装不可选择区域。SelectionContainer( Column { Text(This text is selectable) Text(This one too) Text(This one as well) DisableSelection { Text(But not this one) Text(Neither this one) } Text(But again, you can select this one) Text(And this one too) } )Compose v1.12 提供了对 SelectionContainer 内文本选择的编程控制和可观察性。val selectionState rememberSelectionState() Column { Button( onClick { selectionState.selectAll() }, ) { Text(全选) } SelectionContainer(state selectionState) { Text(示例文字、示例文字、示例文字、示例文字、示例文字、示例文字、) } }1.2 富文本 AnnotatedString类似于 View 中的 SpannedStringCompose 中支持的是 AnnotatedString可通过构建器模式 buildAnnotatedString{} 创建。作用域中通过 withStyle() 添加样式文字通过 withLink 添加链接文字。buildAnnotatedString{}创建富文本withStyle()添加样式文字。SpanStyle设置范围样式ParagraphStyle设置段落样式withLink()添加连接文字。TextLinkStyles设置链接样式AnnotatedString.fromHtml()HTML转富文本buildAnnotatedString创建富文本文字inline fun buildAnnotatedString(builder: (Builder).() - Unit): AnnotatedString设置给 Text() 组件的 text 参数。1.2.1 withStyle() 添加样式文字withStyle()添加样式文字inline fun R : Any Builder.withStyle(style: SpanStyle, //范围样式block: Builder.() - R //作用域中调用 append() 添加文字通过 \n 换行): R调用不会换行。inline fun R : Any Builder.withStyle(style: ParagraphStyle, //段落样式crossinline block: Builder.() - R //作用域中继续调用 withStyle()): R调用会换行。SpanStyle范围样式SpanStyle (color: Color Color.Unspecified, //该构造还有 Brush 版本可使用笔刷fontSize: TextUnit TextUnit.Unspecified,fontWeight: FontWeight? null,fontStyle: FontStyle? null,fontSynthesis: FontSynthesis? null,fontFamily: FontFamily? null,fontFeatureSettings: String? null,letterSpacing: TextUnit TextUnit.Unspecified,baselineShift: BaselineShift? null,textGeometricTransform: TextGeometricTransform? null,localeList: LocaleList? null,background: Color Color.Unspecified,textDecoration: TextDecoration? null,shadow: Shadow? null,platformStyle: PlatformSpanStyle? null,drawStyle: DrawStyle? null)ParagraphStyle段落样式class ParagraphStyle(val textAlign: TextAlign TextAlign.Unspecified,val textDirection: TextDirection TextDirection.Unspecified,val lineHeight: TextUnit TextUnit.Unspecified,val textIndent: TextIndent? null,val platformStyle: PlatformParagraphStyle? null,val lineHeightStyle: LineHeightStyle? null,val lineBreak: LineBreak LineBreak.Unspecified,val hyphens: Hyphens Hyphens.Unspecified,val textMotion: TextMotion? null)用来包裹范围样式。Text( text buildAnnotatedString { //添加文字样式不会换行 withStyle(SpanStyle(Color.Green)) { append(绿色的字\n) } //通过\n换行 withStyle(SpanStyle(Color.Green)) { append(绿色的字) } //添加段落样式会换行 withStyle(ParagraphStyle()) { withStyle(SpanStyle(Color.Red)) { append(红色的字) } withStyle(SpanStyle(Color.Blue)) { append(蓝色的字) } } } )1.2.3 withLink() 添加链接文字withLink()添加连接文字inline fun R : Any Builder.withLink(link: LinkAnnotation, //链接注解block: Builder.() - R): RLinkAnnotation.Url创建链接注解class Url(val url: String, //链接地址override val styles: TextLinkStyles? null, //链接样式override val linkInteractionListener: LinkInteractionListener? null) : LinkAnnotation()调用 LinkAnnotation.Url() 创建。TextLinkStyles链接样式class TextLinkStyles(val style: SpanStyle? null,val focusedStyle: SpanStyle? null,val hoveredStyle: SpanStyle? null, //鼠标光标放上去val pressedStyle: SpanStyle? null)只针对HTML中的链接文字设置样式。Text( text buildAnnotatedString { withStyle(SpanStyle(Color.White)) { append(立即下载) } withLink( LinkAnnotation.Url( url https://www.baidu.com, styles TextLinkStyles( style SpanStyle( color Color.Red, textDecoration TextDecoration.Underline ) ) ) ) { append(点击跳转) } } )1.2.3 HTML转富文本HTML转富文本fun AnnotatedString.Companion.fromHtml(htmlString: String, //通过原生字符串引入HTML内容linkStyles: TextLinkStyles? null, //链接样式linkInteractionListener: LinkInteractionListener? null): AnnotatedString设置给 Text() 组件的 text 参数。Text( AnnotatedString.fromHtml( htmlString h1Jetpack Compose/h1 p Build bbetter apps/b faster with a hrefhttps://www.android.comJetpack Compose/a /p , linkStyles TextLinkStyles( style SpanStyle(Color.Red) ) ) )1.3 文字垂直居中Modifier.wrapContentHeight (align Alignment.CenterVertically)1.4 文本溢出处理TextOverflow.Clip裁剪掉溢出的。TextOverflow.Ellipsis末尾省略号。TextOverflow.StartEllipsis开头省略号。展示文件路径时聚焦尾部信息。TextOverflow.MiddleEllipsis文中省略号。展示信息时保护隐私。TextOverflow.Visible尽可能显示。二、图片 Image缩放方式详见2.1 加载本地图片先将图片缩放到和组件大小一致再加载避免先加载超大图片后缩放。Coil会自动处理缩放还会懒加载。Image( painter painterResource(id R.drawable.icon_scan), contentDescription null, //无障碍提示文本信息不需要可直接赋值null alignment Alignment.Center, //对齐方式 contentScale ContentScale.Crop, //伸展方式 alpha 0.5F, //透明度 colorFilter ColorFilter.tint(Color.Red, blendMode BlendMode.Color), //将某种颜色应用到图片上颜色滤镜 // filterQuality FilterQuality.Low, //采样算法默认低bitmap来源才能用 modifier Modifier .width(200.dp) //宽 .height(200.dp) //高 .size(200.dp) //同时设置宽高正方形 .clip(CircleShape) //裁剪成圆形 .border(width 2.dp, color Color.Red, shape CircleShape) //边框 )2.2 加载网络图片详见使用Coil//使用coil加载网络图片 AsyncImage( model https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png, contentDescription null )三、图标 Icon使用官方图标库需要引入依赖。和 Image 不同的是可以使用 tint 进行染色会受系统 Material 主题影响。implementation androidx.compose.material:material-icons-extended//引用res资源 Icon( painter painterResource(id R.drawable.icon_scan), contentDescription null, modifier Modifier, tint Color.Red //给图标染色 ) //引用官方图标库 Icon(imageVector Icons.Default.AccountBox, contentDescription ) //引用ImageBitmap val bitmap ImageBitmap.imageResource(res LocalContext.current.resources, id R.drawable.icon_scan) Icon(bitmap bitmap, contentDescription四、分割线 Dividerfun HorizontalDivider(modifier: Modifier Modifier,thickness: Dp DividerDefaults.Thickness, //厚度color: Color DividerDefaults.color //颜色)横向分割线fun VerticalDivider(modifier: Modifier Modifier,thickness: Dp DividerDefaults.Thickness,color: Color DividerDefaults.color)纵向分割线HorizontalDivider( modifier Modifier color Color(0xFF77BAF7), thickness 3.dp )五、空白区域 Spacer一个空白区域使用 Modifier 的 width、height、size 来设置大小。Spacer( modifier Modifier .width(10.dp) //宽 .height(10.dp) //高 .size(10.dp) //同时设置宽高正方形 )六、圆形进度条 ProgressIndicatorCircularProgressIndicator( progress 0.6F, //控制进度不传参会一直转 modifier Modifier, color Color.Magenta, //圈圈颜色 strokeWidth 5.dp //圈圈厚度 )七、条形进度条 LinearProgressIndicatorLinearProgressIndicator( progress 0.8F, //控制进度不传参会一直流动 modifier Modifier, color Color.Red, //进度颜色 trackColor Color.Blue //剩余颜色 )八、列表条目 ListItemListItem( modifier Modifier, headlineText { Text(text headline) }, overlineText { Text(text overline) }, supportingText { Text(text supporting) }, leadingContent { Text(text leading) }, trailingContent { Text(text trailing) }, ) Compose 组件 - 一些展示类型
也是组合函数而不是以对象的形式提供。一、文本 Text查看官方介绍Composablefun Text(text: String,modifier: Modifier Modifier,color: Color Color.Unspecified,autoSize: TextAutoSize? null,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,minLines: Int 1,onTextLayout: ((TextLayoutResult) - Unit)? null,style: TextStyle LocalTextStyle.current,)Text( text Hello Word!, //显示的文本从res中加载stringResource(R.string.str) modifier Modifier, color Color.Red, //文字颜色 autoSize TextAutoSize.StepBased( //根据容器大小自动调整自身尺寸 minFontSize 12.sp, //最小字号默认 12sp maxFontSize 24.sp, //最大字号默认 112sp stepSize 2.sp //步长默认 0.25sp ), fontSize 30.sp, //字号 fontStyle FontStyle.Italic, //文字风格斜体 fontFamily FontFamily.Serif, //字体从res中加载FontFamily(Font(R.font.xxx_light,FontWeight.Light), Font(R.font.xxxbold,FontWeight.Bold)) fontWeight FontWeight.Bold, //文字权重粗细通过构造创建的取值范围1~1000伴生对象中的W100~W900为默认取值方便调用 letterSpacing 15.sp, //字间距 textDecoration TextDecoration.None, //文字修饰Underline下划线LineThrough删除线 textAlign TextAlign.Center, //对齐方式需要有固定宽度才有效果 lineHeight 15.sp, //行高 overflow TextOverflow.Clip, //文字溢出处理 softWrap true, //是否软换行 maxLines 5, //最大行数 minLines 1 //最小行数 // onTextLayout ? style TextStyle(//文本样式阴影、偏移、模糊 shadow Shadow(color Blue, offset Offset(5.0F, 10.0F), blurRadius 3F), textIndent TextIndent(20.sp) //行首缩进 ), onTextLayout { }, //计算布局时回调文本布局发生变化时的回调 )1.1 支持复制 SelectionContainer()默认情况下 Text() 不支持选择复制文字需要使用 SelectionContainer() 组件来包装作用域中可再使用 DisableSelection() 包装不可选择区域。SelectionContainer( Column { Text(This text is selectable) Text(This one too) Text(This one as well) DisableSelection { Text(But not this one) Text(Neither this one) } Text(But again, you can select this one) Text(And this one too) } )Compose v1.12 提供了对 SelectionContainer 内文本选择的编程控制和可观察性。val selectionState rememberSelectionState() Column { Button( onClick { selectionState.selectAll() }, ) { Text(全选) } SelectionContainer(state selectionState) { Text(示例文字、示例文字、示例文字、示例文字、示例文字、示例文字、) } }1.2 富文本 AnnotatedString类似于 View 中的 SpannedStringCompose 中支持的是 AnnotatedString可通过构建器模式 buildAnnotatedString{} 创建。作用域中通过 withStyle() 添加样式文字通过 withLink 添加链接文字。buildAnnotatedString{}创建富文本withStyle()添加样式文字。SpanStyle设置范围样式ParagraphStyle设置段落样式withLink()添加连接文字。TextLinkStyles设置链接样式AnnotatedString.fromHtml()HTML转富文本buildAnnotatedString创建富文本文字inline fun buildAnnotatedString(builder: (Builder).() - Unit): AnnotatedString设置给 Text() 组件的 text 参数。1.2.1 withStyle() 添加样式文字withStyle()添加样式文字inline fun R : Any Builder.withStyle(style: SpanStyle, //范围样式block: Builder.() - R //作用域中调用 append() 添加文字通过 \n 换行): R调用不会换行。inline fun R : Any Builder.withStyle(style: ParagraphStyle, //段落样式crossinline block: Builder.() - R //作用域中继续调用 withStyle()): R调用会换行。SpanStyle范围样式SpanStyle (color: Color Color.Unspecified, //该构造还有 Brush 版本可使用笔刷fontSize: TextUnit TextUnit.Unspecified,fontWeight: FontWeight? null,fontStyle: FontStyle? null,fontSynthesis: FontSynthesis? null,fontFamily: FontFamily? null,fontFeatureSettings: String? null,letterSpacing: TextUnit TextUnit.Unspecified,baselineShift: BaselineShift? null,textGeometricTransform: TextGeometricTransform? null,localeList: LocaleList? null,background: Color Color.Unspecified,textDecoration: TextDecoration? null,shadow: Shadow? null,platformStyle: PlatformSpanStyle? null,drawStyle: DrawStyle? null)ParagraphStyle段落样式class ParagraphStyle(val textAlign: TextAlign TextAlign.Unspecified,val textDirection: TextDirection TextDirection.Unspecified,val lineHeight: TextUnit TextUnit.Unspecified,val textIndent: TextIndent? null,val platformStyle: PlatformParagraphStyle? null,val lineHeightStyle: LineHeightStyle? null,val lineBreak: LineBreak LineBreak.Unspecified,val hyphens: Hyphens Hyphens.Unspecified,val textMotion: TextMotion? null)用来包裹范围样式。Text( text buildAnnotatedString { //添加文字样式不会换行 withStyle(SpanStyle(Color.Green)) { append(绿色的字\n) } //通过\n换行 withStyle(SpanStyle(Color.Green)) { append(绿色的字) } //添加段落样式会换行 withStyle(ParagraphStyle()) { withStyle(SpanStyle(Color.Red)) { append(红色的字) } withStyle(SpanStyle(Color.Blue)) { append(蓝色的字) } } } )1.2.3 withLink() 添加链接文字withLink()添加连接文字inline fun R : Any Builder.withLink(link: LinkAnnotation, //链接注解block: Builder.() - R): RLinkAnnotation.Url创建链接注解class Url(val url: String, //链接地址override val styles: TextLinkStyles? null, //链接样式override val linkInteractionListener: LinkInteractionListener? null) : LinkAnnotation()调用 LinkAnnotation.Url() 创建。TextLinkStyles链接样式class TextLinkStyles(val style: SpanStyle? null,val focusedStyle: SpanStyle? null,val hoveredStyle: SpanStyle? null, //鼠标光标放上去val pressedStyle: SpanStyle? null)只针对HTML中的链接文字设置样式。Text( text buildAnnotatedString { withStyle(SpanStyle(Color.White)) { append(立即下载) } withLink( LinkAnnotation.Url( url https://www.baidu.com, styles TextLinkStyles( style SpanStyle( color Color.Red, textDecoration TextDecoration.Underline ) ) ) ) { append(点击跳转) } } )1.2.3 HTML转富文本HTML转富文本fun AnnotatedString.Companion.fromHtml(htmlString: String, //通过原生字符串引入HTML内容linkStyles: TextLinkStyles? null, //链接样式linkInteractionListener: LinkInteractionListener? null): AnnotatedString设置给 Text() 组件的 text 参数。Text( AnnotatedString.fromHtml( htmlString h1Jetpack Compose/h1 p Build bbetter apps/b faster with a hrefhttps://www.android.comJetpack Compose/a /p , linkStyles TextLinkStyles( style SpanStyle(Color.Red) ) ) )1.3 文字垂直居中Modifier.wrapContentHeight (align Alignment.CenterVertically)1.4 文本溢出处理TextOverflow.Clip裁剪掉溢出的。TextOverflow.Ellipsis末尾省略号。TextOverflow.StartEllipsis开头省略号。展示文件路径时聚焦尾部信息。TextOverflow.MiddleEllipsis文中省略号。展示信息时保护隐私。TextOverflow.Visible尽可能显示。二、图片 Image缩放方式详见2.1 加载本地图片先将图片缩放到和组件大小一致再加载避免先加载超大图片后缩放。Coil会自动处理缩放还会懒加载。Image( painter painterResource(id R.drawable.icon_scan), contentDescription null, //无障碍提示文本信息不需要可直接赋值null alignment Alignment.Center, //对齐方式 contentScale ContentScale.Crop, //伸展方式 alpha 0.5F, //透明度 colorFilter ColorFilter.tint(Color.Red, blendMode BlendMode.Color), //将某种颜色应用到图片上颜色滤镜 // filterQuality FilterQuality.Low, //采样算法默认低bitmap来源才能用 modifier Modifier .width(200.dp) //宽 .height(200.dp) //高 .size(200.dp) //同时设置宽高正方形 .clip(CircleShape) //裁剪成圆形 .border(width 2.dp, color Color.Red, shape CircleShape) //边框 )2.2 加载网络图片详见使用Coil//使用coil加载网络图片 AsyncImage( model https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png, contentDescription null )三、图标 Icon使用官方图标库需要引入依赖。和 Image 不同的是可以使用 tint 进行染色会受系统 Material 主题影响。implementation androidx.compose.material:material-icons-extended//引用res资源 Icon( painter painterResource(id R.drawable.icon_scan), contentDescription null, modifier Modifier, tint Color.Red //给图标染色 ) //引用官方图标库 Icon(imageVector Icons.Default.AccountBox, contentDescription ) //引用ImageBitmap val bitmap ImageBitmap.imageResource(res LocalContext.current.resources, id R.drawable.icon_scan) Icon(bitmap bitmap, contentDescription四、分割线 Dividerfun HorizontalDivider(modifier: Modifier Modifier,thickness: Dp DividerDefaults.Thickness, //厚度color: Color DividerDefaults.color //颜色)横向分割线fun VerticalDivider(modifier: Modifier Modifier,thickness: Dp DividerDefaults.Thickness,color: Color DividerDefaults.color)纵向分割线HorizontalDivider( modifier Modifier color Color(0xFF77BAF7), thickness 3.dp )五、空白区域 Spacer一个空白区域使用 Modifier 的 width、height、size 来设置大小。Spacer( modifier Modifier .width(10.dp) //宽 .height(10.dp) //高 .size(10.dp) //同时设置宽高正方形 )六、圆形进度条 ProgressIndicatorCircularProgressIndicator( progress 0.6F, //控制进度不传参会一直转 modifier Modifier, color Color.Magenta, //圈圈颜色 strokeWidth 5.dp //圈圈厚度 )七、条形进度条 LinearProgressIndicatorLinearProgressIndicator( progress 0.8F, //控制进度不传参会一直流动 modifier Modifier, color Color.Red, //进度颜色 trackColor Color.Blue //剩余颜色 )八、列表条目 ListItemListItem( modifier Modifier, headlineText { Text(text headline) }, overlineText { Text(text overline) }, supportingText { Text(text supporting) }, leadingContent { Text(text leading) }, trailingContent { Text(text trailing) }, )