Compose 可组合项 - 展示类

Jomurphys

已于 2024-06-17 14:43:57 修改

阅读量875

点赞数

分类专栏： Compose 文章标签： android

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

本文链接：https://blog.csdn.net/HugMua/article/details/129904812

版权

Compose 专栏收录该内容

33 篇文章 3 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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

一、文本 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,   //字重（粗细）
    letterSpacing = 15.sp,  //字间距
    textDecoration = TextDecoration.None,   //文字装饰（Underline下划线，LineThrough删除线）
    textAlign = TextAlign.Center,   //对齐方式（需要有固定宽度才有效果）
    lineHeight = 15.sp, //行高
    overflow = TextOverflow.Clip,   //文字溢出(默认裁剪，Ellipsis末尾省略号，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 来包装。 
SelectionContainer(
    Text(text = "")
)

1.2 设置不同样式

Text(
    text = buildAnnotatedString {
        withStyle(style = SpanStyle(Color.Red)) { append("红色的字") }
        withStyle(style = SpanStyle(Color.Blue)) { append("蓝色的字") }
    }
)

1.3 文字垂直居中

Modifier.wrapContentHeight (align = Alignment.CenterVertically)

二、图片 Image

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.1 加载网络图片

//使用coil加载网络图片
AsyncImage(
    model = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
    contentDescription = null
)

三、图标 Icon

使用官方图标库需要引入依赖。

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