Android Jetpack Compose 之 Text

官方教程html

下載Android Studio Canary版本android

環境

添加依賴:bash

def compose_version = "0.1.0-dev03"

    kapt("androidx.compose:compose-compiler:$compose_version")
    implementation("androidx.compose:compose-runtime:$compose_version")
    implementation("androidx.ui:ui-core:$compose_version")
    implementation "androidx.ui:ui-tooling:$compose_version"
    implementation("androidx.ui:ui-layout:$compose_version")
    implementation("androidx.ui:ui-framework:$compose_version")
    implementation("androidx.ui:ui-material:$compose_version")
    implementation("androidx.ui:ui-foundation:$compose_version")
    implementation("androidx.ui:ui-text:$compose_version")
複製代碼

androidx.ui.core中的Composable Text組件爲咱們提供了一系列的屬性來控制文本的外觀。markdown

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier.None,
    style: TextStyle? = null,
    paragraphStyle: ParagraphStyle? = null,
    softWrap: Boolean = DefaultSoftWrap,
    overflow: TextOverflow = DefaultOverflow,
    maxLines: Int? = DefaultMaxLines
) {
    Text(
        text = AnnotatedString(text),
        modifier = modifier,
        style = style,
        paragraphStyle = paragraphStyle,
        softWrap = softWrap,
        overflow = overflow,
        maxLines = maxLines
    )
}
複製代碼

基本屬性

softWrapapp

聲明是否應在換行符處斷開文本oop

overflow字體

組件中溢出文本ui

省略號 spa

淡入淡出 code

@Preview
@Composable
fun initLayout() {
    // 定義一個有寬度的容器
    Container (
        width = Dp(80f)
    ){
        Text(
            text = "1234567890asdfgh",
            softWrap = false,
            maxLines = 1,
            overflow = TextOverflow.Fade
        )
    }
}
複製代碼

文本樣式

在定義文本組件的樣式屬性時,咱們須要使用TextStyle類的實例

@Immutable
data class TextStyle(
    // 文本顏色
    val color: Color? = null,
    // Sp 字體大小
    val fontSize: TextUnit = TextUnit.Inherit,
    // 文本粗細
    val fontWeight: FontWeight? = null,
    // 文本樣式 Normal或Italic
    val fontStyle: FontStyle? = null,
    // 文本字體手動合成粗體/斜體樣式
    val fontSynthesis: FontSynthesis? = null,
    // 文本字體
    val fontFamily: FontFamily? = null,
    // 字體的高級排版設置
    val fontFeatureSettings: String? = null,
    //  字符之間的間距
    val letterSpacing: TextUnit = TextUnit.Inherit,
    // 從文本基線開始使用的垂直移位
    val baselineShift: BaselineShift? = null,
    // 文本幾何變換  
    val textGeometricTransform: TextGeometricTransform? = null,
    // 特定語言環境的文本
    val localeList: LocaleList? = null,
    //  文本背景色
    val background: Color? = null,
    // 在文本的某處繪製水平線 None Underline LineThrough
    val decoration: TextDecoration? = null,
    // 要在文本上繪製的陰影
    val shadow: Shadow? = null
)
複製代碼

段落樣式

ParagraphStyle類

data class ParagraphStyle constructor(
    // 文本對齊方式 LEFT、START、RIGHT、END、CENTER、JUSTIFY
    val textAlign: TextAlign? = null,
    // 枚舉類設置文本顯示方向
    val textDirectionAlgorithm: TextDirectionAlgorithm? = null,
    // 文本行高
    val lineHeight: Sp? = null,
    // 文本縮進
    val textIndent: TextIndent? = null
)
複製代碼

多樣化文本

/**
 * The basic data structure of text with multiple styles. To construct an [AnnotatedString] you
 * can use [Builder].
 */
data class AnnotatedString(
    val text: String,
    val textStyles: List<Item<TextStyle>> = listOf(),
    val paragraphStyles: List<Item<ParagraphStyle>> = listOf()
)
複製代碼

例如:

@Composable
fun initLayout() {
    // 定義一個有寬度的容器
    Container (
        width = Dp(80f)
    ){
        val annotatedString = AnnotatedString.Builder("1234567890asdfgh")
            .apply {
                addStyle(TextStyle(color = Color.Red), 0, 3)
            }

        Text(
            text = annotatedString.toAnnotatedString(),
            softWrap = false,
            maxLines = 1,
            overflow = TextOverflow.Fade
        )
    }
}

複製代碼

添加和刪除樣式

  • pushStyle:將TextStyle添加到AnnotatedText中,該樣式將應用於推入樣式後附加的任何文本返回樣式的索引。
  • pushStyle: 將ParagraphStyle添加到AnnotatedText中
  • popStyle: 從AnnotatedText中刪除之前添加的樣式
  • popStyle: 從AnnotatedText中刪除指定索引處的樣式
@Preview
@Composable
fun initLayout() {
    // 定義一個有寬度的容器
    Container (
        width = Dp(150f),
        alignment =  Alignment.CenterLeft

    ){
        val style = TextStyle(color = Color.Red,background = Color.White)
        val annotatedString = AnnotatedString.Builder("123456")
        annotatedString.pushStyle(style)
        annotatedString.append(", aaaaaa")
        // 去掉樣式
        annotatedString.popStyle()
        annotatedString.append("cccccc.")
        Text(text = annotatedString.toAnnotatedString(), maxLines = 1)
    }

}

複製代碼

相關文章
相關標籤/搜索