Compose 设置文字样式

Styling text in Compose

了解如何使用 Material API 配置排版,包括使用可下载字体和可变字体。

1. Text Typograph block and Text parameters

可以使用 TextStyle.copy() 方法自定义 TextStyle。

直接在组合函数中提供参数会覆盖 TextStyle 中定义的样式,比如 Text() 中的 color 参数。

2. Material implementation

为什么 Button 里面的 Text 会自己设置成 Button 的样式展示?

kotlin 复制代码
Button(onClick = {
    ...
}) {
    Text(text = "Send")
}

因为在 Button() 组合函数中,在 ProvideContentColorTextStyle() 组合函数中设置了 textStyle = MaterialTheme.typography.labelLarge

kotlin 复制代码
@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
) {
        ...
        ProvideContentColorTextStyle(
            contentColor = contentColor,
            textStyle = MaterialTheme.typography.labelLarge
        ) {
            ...
        }
    }
}

ProvideContentColorTextStyle() 组合函数的实现中,将 LocalTextStyle 设置成 MaterialTheme.typography.labelLarge

kotlin 复制代码
@Composable
internal fun ProvideContentColorTextStyle(
    contentColor: Color,
    textStyle: TextStyle,
    content: @Composable () -> Unit
) {
    val mergedStyle = LocalTextStyle.current.merge(textStyle)
    CompositionLocalProvider(
        LocalContentColor provides contentColor,
        LocalTextStyle provides mergedStyle,
        content = content
    )
}

Text() 组合函数中的 style 参数默认就是 LocalTextStyle.current。类似的,Text 的颜色有 LocalContentColor.current 决定。

kotlin 复制代码
@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,
    minLines: Int = 1,
    onTextLayout: ((TextLayoutResult) -> Unit)? = null,
    style: TextStyle = LocalTextStyle.current
) {
    val textColor = color.takeOrElse { style.color.takeOrElse { LocalContentColor.current } }
    ...
}

3. onTextLayout() API

如何为 Text 设置最大行数,超出部分显示省略号?

点击 More 按钮,隐藏 More 按钮,展示所有 Text 的内容。

可以使用 onTextLayout lambda。onTextLayout lambda 内部不允许存在 UI,因为此调用不是组合的一部分。可以改变触发重组的状态变量达到更新的目的。

4. Downloadable fonts

如何下载并使用字体?

  1. 导入 ui-text-google-fonts 库
gradle 复制代码
implementation 'androidx.compose.ui:ui-text-google-fonts:1.9.0'
  1. 配置 Google 字体提供商
kotlin 复制代码
val provider = GoogleFont.Provider(...)
  1. 选择 Google 字体
kotlin 复制代码
val fontFamily = FontFamily(
    Font(
        googleFont = LobsterTwo,
        fontProvider = provider
    )
)
  1. 在排版中添加这个字体
kotlin 复制代码
val typography = Typography(
    displayLarge = TextStyle(
        fontFamily = fontFamily
    )
)
  1. 当使用到这个字体的时候它会自动下载并应用,不需要任何回调

预加载字体

如何预加载字体?

5. Variable fonts

如何配置可变字体?

  1. 下载字体

  2. 使用 FontVariation API 改变字体

6. AnnotatedString

如何对 Text 中的部分文字进行样式设置?

AnnotatedString 允许我们设置文本或段落的部分样式,使用 buildAnnotatedString{}SpanStyle()withStyle()

7. Styling TextField

如何自定义 TextField

自定义 TextField 组件的颜色

kotlin 复制代码
TextField(
    colors = TextFieldDefaults.colors(
        focusedIndicatorColor = Color.Green,
        unfocusedIndicatorColor = Color.Yellow
    )
)

自定义 TextField 边框的颜色

kotlin 复制代码
TextField(
    colors = OutlinedTextFieldDefaults.colors(
        focusedBorderColor = Color.Green,
        unfocusedBorderColor = Color.Yellow
    )
)

如果希望进一步自定义边框,可以使用 Modifier 进行设置。

8. Styling BasicTextField

如何完全自定义 TextField

使用 BasicTextField

随着输入字数越来越接近字符限制,光标的颜色渐变。

设置自定义背景和前导图标。

相关推荐
vistaup17 分钟前
android studio 无法运行java main()
android·java·android studio
sxczst2 小时前
Launcher3 如何实现长按后可拖动?
android
诺诺Okami3 小时前
Android Framework-WMS-Window移除
android
小趴菜82276 小时前
Android TabLayout使用记录
android
梦终剧6 小时前
【Android之路】 Kotlin 的 data class、enum class、sealed interface
android·开发语言·kotlin
折翅鵬14 小时前
Android 程序员如何系统学习 MQTT
android·学习
搬砖的小码农_Sky15 小时前
如何将安卓应用迁移到鸿蒙?
android·华为·harmonyos
搬砖的小码农_Sky15 小时前
鸿蒙应用开发和安卓应用开发的区别
android·华为·harmonyos
2501_9160074715 小时前
iOS 混淆与团队协作,研发、安全、运维、测试如何在加固流程中高效配合(iOS 混淆、ipa 加固、协作治理)
android·ios·小程序·https·uni-app·iphone·webview
飞猿_SIR17 小时前
基于海思Hi3798MV200Android7.0聊聊HDMI色深模式和电视HDR
android·嵌入式硬件·音视频