Android Jetpack Compose中Text的使用

• Text的介紹（翻譯）
• • 基本使用
  • 使用字元串資源
  • Text設定樣式
  • • 設定顔色
    • 設定字号
    • 設定斜體
    • 設定粗體
    • 設定文字内容居中
    • 設定字型
    • 設定組合樣式
    • 設定最大行數
    • 設定最大長度後，尾部的處理（溢出）
    • 設定文字可選區域（不可選區域）
  • 可輸入的Text(EditText)
  • • TextField
    • OutlinedTextField
    • BasicTextField
  • 官方文檔
  • 缺陷
  • 補充

Text的介紹（翻譯）

文本是任何UI的核心部分，Jetpack Compose使顯示或編寫文本變得更容易。Compose利用其建構塊的組合，這意味着您不需要覆寫屬性和方法，也不需要擴充大型類，就可以按照您想要的方式使用特定的可組合設計和邏輯。

作為基礎，Compose提供了BasicText和BasicTextField，它們是顯示文本和處理使用者輸入的基本架構。在更高的層次上，Compose提供了Text和TextField，它們是遵循材料設計準則的可組合的。建議使用它們，因為它們在Android上對使用者具有正确的外觀和感覺，并包括其他選項，以簡化其定制，而無需編寫大量代碼。

基本使用

@Preview
@Composable
fun SimpleText() {
  Text("Hello World")
}
           

使用字元串資源

這也是官方推薦的使用方式，而不是寫死。

@Preview
    @Composable
    fun StringResourceText() {
        Text(stringResource(R.string.hello_world))
    }
           

Text設定樣式

設定顔色

@Preview
    @Composable
    fun BlueText() {
        Text("Hello World", color = Color.Blue)
    }
           

設定字号

@Preview
    @Composable
    fun BigText() {
        Text("Hello World", fontSize = 30.sp)
    }
           

設定斜體

@Preview
    @Composable
    fun ItalicText() {
        Text("Hello World", fontStyle = FontStyle.Italic)
    }
           

設定粗體

@Preview
    @Composable
    fun BoldText() {
        Text("Hello World", fontWeight = FontWeight.Bold)
    }
           

設定文字内容居中

@Preview(showBackground = true)
    @Composable
    fun CenterText() {
        Text("Hello World", textAlign = TextAlign.Center,
            modifier = Modifier.width(150.dp))
    }
           

設定字型

@Preview
    @Composable
    fun DifferentFonts() {
        Column {
            Text("Hello World", fontFamily = FontFamily.Serif)
            Text("Hello World", fontFamily = FontFamily.SansSerif)
        }
    }
           

當然你依然可以使用自己的字型檔案，他依舊放在老地方

然後你需要定義一個字型簇，這是Compose推薦的用法，因為這樣可以包含不同的字重

val firaSansFamily = FontFamily(
        Font(R.font.firasans_light, FontWeight.Light),
        Font(R.font.firasans_regular, FontWeight.Normal),
        Font(R.font.firasans_italic, FontWeight.Normal, FontStyle.Italic),
        Font(R.font.firasans_medium, FontWeight.Medium),
        Font(R.font.firasans_bold, FontWeight.Bold)
)
           

然後就可以在Text中使用了

Column {
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Light)
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Normal)
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Normal,
                    fontStyle = FontStyle.Italic)
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Medium)
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Bold)
}
           

設定組合樣式

Text的組合樣式的寫法也很Compose ，就像下面的代碼一樣，這将生成一個段落

@Composable
fun ParagraphStyle() {
    Text(buildAnnotatedString {
        withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("Hello\n")
            }
            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold,
                                        color = Color.Red)) {
                append("World\n")
            }
            append("Compose")
        }
    })
}
           

設定最大行數

@Composable
fun LongText() {
    Text("hello ".repeat(50), maxLines = 2)
}
           

設定最大長度後，尾部的處理（溢出）

@Composable
fun OverflowedText() {
    Text("Hello Compose ".repeat(50), maxLines = 2, overflow = TextOverflow.Ellipsis)
}
           

設定文字可選區域（不可選區域）

在Compose中，Text預設是不可以進行選取的，我們需要在外層使用SelectionContainer進行包裹，順帶，可以在内層使用DisableSelection 包裹不可以選中的區域。還是很有意思的。因為這之中隔着一層Column 方法，不得不說Compose設計的很巧妙。

@Composable
fun PartiallySelectableText() {
    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")
        }
    }
}
           

可輸入的Text(EditText)

TextField

TextField 實際上是MD風格的EditText就是我們之前用過（基本不用）的TextInputEditText

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/label">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
    />

</com.google.android.material.textfield.TextInputLayout>
           

@Composable
fun SimpleFilledTextFieldSample() {
    var text by remember { mutableStateOf("Hello") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}
           

OutlinedTextField

還有一個MD風格的是OutlinedTextField

@Composable
fun SimpleOutlinedTextFieldSample() {
    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}
           

BasicTextField

實際上我們最想要的是毫無特色的輸入框=>BasicTextField

@Preview(showBackground = true)
@Composable
fun SimpleBasicTextFieldSample() {
    var text by remember { mutableStateOf("Hello") }
    BasicTextField(
        value = text,
        onValueChange = { text = it }
    )
}
           

還有一些api的組合使用在這裡暫不贅述

官方文檔

當然啦，當你看完這的時候可以去官方文檔再看看，或許有新的補充和收獲。

Text的官方文檔

缺陷

目前為止Text是不支援富文本的使用的，因為他隻能使用AnnotatedString（String在它的内部會進行包裝，最後還是AnnotatedString）作為文本内容的，而傳統的富文本是轉化為Spanned來進行使用的。 這裡我不得不使用AndroidView導入TextView進行相容使用。如果有知道Compose渲染富文本的可以告訴筆者。

AndroidView({ TextView(it) }, modifier = Modifier.padding(15.dp)) {
        it.setTextColor(
            ContextCompat.getColor(
                it.context,
                R.color.color_FFFFFF
            )
        )
        it.text = "Your RichText"
    }
           

補充

var text by remember { mutableStateOf("Hello") }
           

如果這句在使用是報錯:

Type ‘TypeVariable(T)‘ has no method ‘getValue(Nothing?, KProperty＜＞)‘ and thus it cannot serve…

導包加入：import androidx.compose.runtime.