Compose 可组合项 - 一些展示类型

原创已于 2025-12-18 19:37:23 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android

于 2023-04-01 23:33:22 首次发布

Compose 专栏收录该内容

45 篇文章

订阅专栏

本文详细介绍了AndroidCompose中的UI组件，包括Text的文本格式化选项，如颜色、字号和样式；Image的图片加载、对齐和裁剪方式；Icon的使用方法，包括自定义图标和官方图标库；以及Divider、Spacer、ProgressIndicator和ListItem等其他组件的用法，展示了Android开发中Compose的强大和灵活性。

部署运行你感兴趣的模型镜像

也是组合函数，而不是以对象的形式提供。

一、文本 Text

查看官方介绍

Text(
    text = "Hello Word!", //显示的文本，从res中加载stringResource(R.string.str)
    color = Color.Red, //文字颜色
    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,   //文字溢出处理(默认裁剪掉溢出的，Ellipsis末尾省略号，StartEllipsis开头省略号，MiddleEllipsis文中省略号，Visible尽可能显示)
    softWrap = true, //是否软换行
    maxLines = 5,   //最大行数
//        onTextLayout = ?
    style = TextStyle(//文本样式（阴影、偏移、模糊）
        shadow = Shadow(color = Blue, offset = Offset(5.0F, 10.0F), blurRadius = 3F), textIndent = TextIndent(20.sp) //行首缩进
    ),
    onTextLayout = { }, //计算布局时回调（文本布局发生变化时的回调）
    modifier = Modifier
        .background(Color.Gray)//背景色
        .wrapContentSize()//包裹内容
        .fillMaxWidth()//横向填充最大（相当于match_parent）
        .clickable { }//点击事件
)

1.1 支持复制

默认情况下 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")
    }
)

1.2 富文本 AnnotatedString

类似于 View 中的 SpannedString，Compose 中支持的是 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

): R

LinkAnnotation.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 = """
            <h1>Jetpack Compose</h1>
            <p>
                Build <b>better apps</b> faster with <a href="https://www.android.com">Jetpack Compose</a>
            </p>
        """,
        linkStyles = TextLinkStyles(
            style = SpanStyle(Color.Red)
        )
    )
)

1.3 文字垂直居中

Modifier.wrapContentHeight (align = Alignment.CenterVertically)

二、图片 Image

缩放方式：详见

2.1 加载本地图片

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

四、分割线 Divider

fun 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)    //同时设置宽高（正方形）
)

六、圆形进度条 ProgressIndicator

CircularProgressIndicator(
    progress = 0.6F,    //控制进度，不传参会一直转
    modifier = Modifier,
    color = Color.Magenta,   //圈圈颜色
    strokeWidth = 5.dp  //圈圈厚度
)

七、条形进度条 LinearProgressIndicator

LinearProgressIndicator(
    progress = 0.8F,    //控制进度，不传参会一直流动
    modifier = Modifier,
    color = Color.Red,  //进度颜色
    trackColor = Color.Blue //剩余颜色
)

八、列表条目 ListItem

ListItem(
    modifier = Modifier,
    headlineText = { Text(text = "headline") },
    overlineText = { Text(text = "overline") },
    supportingText = { Text(text = "supporting") },
    leadingContent = { Text(text = "leading") },
    trailingContent = { Text(text = "trailing") },
)

您可能感兴趣的与本文相关的镜像