基础属性
文本
@Composable
fun TextList(){
Column {
Text(text = "这是一个文本")
// 从value 读取
Text(stringResource(id = R.string.string_test))
}
}
字体颜色 color
@Composable
fun TextList() {
Column {
Text(text = "字体颜色", color = Color.Red)
Text(text = "字体颜色2", color = Color(0xFF000080))
}
}
字体大小 fontSize
@Composable
fun TextList() {
Column {
Text(text = "字体颜色", fontSize = 13.sp)
Text(text = "字体大小", fontSize = 30.sp)
}
}
字间距 letterSpacing
Text(text = "字体之间间距", letterSpacing = 20.sp)//
Text(text = "字体之间间距", letterSpacing = 2.em)//em 是字体的倍数大小
样式（style）
Text(
text = "文字Style", style = TextStyle(
//颜色
color = Color.Red,
//字体
fontSize = 13.sp,
//粗体
fontWeight = FontWeight.Bold,
//字体库
fontFamily = FontFamily.Serif,
//斜体
fontStyle = FontStyle.Italic
))
字体粗细（ 其实就是canvas 画笔的宽度）
Text("字体粗细 Light", fontWeight = FontWeight.Light)
Text("字体粗细 Bold", fontWeight = FontWeight.Bold)
Text("字体粗细 Medium", fontWeight = FontWeight.Medium)
Text("字体粗细 自定义 宽度", fontWeight = FontWeight(1000))
投影(Shadow)
Text(text = " 阴影 elevation", modifier = Modifier.shadow(elevation = 10.dp))
Text(
text = "阴影偏移",
style = TextStyle(
shadow = Shadow(
blurRadius = 3f,
color = Color.Red,
offset = Offset(10f, 10f)
)
)
)
行高
Text(text = "行高\n", lineHeight = 30.sp)
Text(text = "行高2\n", lineHeight = 30.sp)
Text( text = "行高2 LineHeightStyle\n", style = LocalTextStyle.current.merge(
TextStyle(
lineHeight = 2.5.em,
platformStyle = PlatformTextStyle(
includeFontPadding = false
),
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None))))
段落样式
一旦用 ParagraphStyle 标记了一部分文本，该部分就会与其余文本分开，就像在开头和末尾有换行一样
Text(
buildAnnotatedString {
withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
withStyle(style = SpanStyle(color = Color.Blue)) {
append("段落1\n")
}
withStyle(
style = SpanStyle(
fontWeight = FontWeight.Bold, color = Color.Red
)
) {
append("段落2\n")
}
append("段落3")
}
}
)
对齐方式
//无法实现真正的居中，如果需要外面嵌套一层父布局比如Box 等
Text(text = "文本居中测试", textAlign = TextAlign.Center, modifier = Modifier
.width(100.dp)
.height(40.dp).background(Color.Red))
modifier相关
- shadow
- clickable 点击事件
- size 大小
- background
- border 描边
- shadow
- clip(常用CircleShape) 前后的区别
/**
* size Modifier.fillMaxWidth() 全占满
* fillMaxWidth() 全部宽度
* fillMaxHeight() 全部高度
* size(xx.dp) 宽高都是xx.dp
*
*
* clickable(enabled = true||false)
*/
Text(text = "modifier 属性相关", modifier = Modifier
.height(40.dp)
.width(100.dp)
.clickable(enabled = true) {
//点击事件
}
//背景色
.background(Color.Red)
//描边
.border(width = 3.dp, color = Color.Green, shape = CircleShape)
//裁剪
.clip(shape = CircleShape)
//投影
.shadow(elevation = 10.dp)
)
最大行数
Text(text = "行数设置", maxLines = 1,)
文本溢出
Text(
text = "overflow -----overflow -----overflow -----overflow -----",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
modifier = Modifier.size(100.dp)
)
复制和禁止复制
SelectionContainer {
Text(text = "文本复制", maxLines = 1, overflow = TextOverflow.Ellipsis)
}
DisableSelection {
Text(text = "文本禁止复制", maxLines = 1, overflow = TextOverflow.Ellipsis)
}
官方字体
implementation "androidx.compose.ui:ui-text-google-fonts:1.6.1"
点击效果取消水波纹
Text(
text = "点击事件不显示水波纹",
modifier = Modifier.clickable(
onClick = {
Toast.makeText(context, "点击", Toast.LENGTH_SHORT).show()
},
indication = null,
interactionSource = MutableInteractionSource()
)
)
特殊文本显示
Text(
buildAnnotatedString {
append("特殊文本显示")
//字体颜色等处理
withStyle(style = SpanStyle(fontWeight = FontWeight.W900, color = Color.Red)) {
append("红色字体")
}
withStyle(style = SpanStyle(fontWeight = FontWeight.W900, color = Color.Green)) {
append("绿色字体")
}
}
)
文本部分可点击和参数传递（超链接）
ClickableText(
text = buildAnnotatedString {
append("前面的文本 ")
withStyle(style = SpanStyle(fontWeight = FontWeight.W900, color = Color.Green)) {
append("可点击部分")
}
},
onClick = { pos ->
Toast.makeText(context, "点击 第$pos 文字", Toast.LENGTH_SHORT).show()
}
)
//参数传递
val paramsContent = buildAnnotatedString {
append("点击传参 ")
pushStringAnnotation(
tag = "url",
annotation = "www.baidu.com"
)
withStyle(style = SpanStyle(fontWeight = FontWeight.W900, color = Color.Green)) {
append("可点击部分")
}
}
ClickableText(
text = paramsContent,
onClick = { pos ->
paramsContent.getStringAnnotations(tag = "url", start = pos, end = pos)
.firstOrNull()?.let {
Toast.makeText(
context,
" 点击位置 ${pos} 获取传递的文本 ${it.item} ",
Toast.LENGTH_SHORT
).show()
}
}
)
文本的透明度
//两种 1 设置的文本添加透明度 2 给控件本身加透明度
// brush 是必须的
val alpha = buildAnnotatedString {
withStyle(
SpanStyle(
alpha = .5f, brush = Brush.horizontalGradient(colors = listOf(Color.Black,Color.Black))
)
) {
append("透明度0.5 \n")
}
withStyle(
SpanStyle(
brush = Brush.horizontalGradient(colors = listOf(Color.Black,Color.Black)), alpha = 1f
)
) {
append("透明度正常 1f")
}
}
Text(text = alpha)
//简单方案 给控件加透明度
Text(text = "alpha 0.5", modifier = Modifier.alpha(0.5f))
Text(text = "alpha 1.0", modifier = Modifier.alpha(1f))
// 还有一种我在网上看的方案，可能是我个人导入问题
// 需要导入 androidx.wear.compose:compose-material:1.3.0 minSdkVersion 必须在25以上
// CompositionLocalProvider 测试无效
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
Text("这里是high强调效果")
}
// 将内部 Text 组件的 alpha 强调程度设置为中
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Text("这里是medium强调效果")
}
// 将内部 Text 组件的 alpha 强调程度设置为禁用
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
Text("这里是禁用后的效果")
}
brush
val gradientColors = listOf(Cyan, Color.LightGray,Color.Yellow )
Text(
text = "Brush 全文本颜色显示",
style = TextStyle(
brush = Brush.linearGradient(
colors = gradientColors
)
)
)
Spacer(
modifier = Modifier
.fillMaxWidth()
.height(40.dp)
)
Text(
text = buildAnnotatedString {
append("部分文本颜色\n")
withStyle(
SpanStyle(
brush = Brush.linearGradient(
colors = gradientColors
)
)
) {
append("显示颜色的文本.")
}
append("\nttttt")
}
)
