compose Text簡單使用

Text

任何前端架構對文字的處理都是最重要的，Compose中文字的展示和文字的編輯分别使用的Text控件和TextField控件實作。

Text使用

簡單使用

1. 代碼

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

1. 效果

修改文字樣式

1. 代碼

Text(
        text = "Hello $name!",
        color = Color.Green,//文字顔色
        fontSize = 40.sp,//文字字型大小
        fontStyle = FontStyle.Italic,//斜體
        fontWeight = FontWeight.Bold,//文字加粗
        modifier = Modifier.fillMaxSize(1f)
    )
           

1. 效果

實作一段文字中添加多樣式

Compose中使用AnnotatedString可以在同一段文字中添加多種樣式。

1. 代碼

fun Greeting2(name: String) {
    Text(text = buildAnnotatedString {
        withStyle(style = SpanStyle(color = Color.Red, fontSize = 20.sp)) {// SpanStyle類似于Span标簽，是行内元素
            append("公衆号：")
        }
        withStyle(style = SpanStyle(color = Color.Green, fontSize = 20.sp)) {
            append("安安安安卓")
        }

        withStyle(style = ParagraphStyle()) {//類似p标簽獨占一行
            withStyle(style = SpanStyle(color = Color.Cyan, fontSize = 20.sp)) {//ParagraphStyle不能設定顔色，是以這裡要再套一層Style
                append("重要的事另起一行說：因為說實話，我隻是個菜鳥")
            }
        }
      

    })
}

           

1. 效果

本例中做了這樣一個事情：

第一行顯示兩種樣式的文字，這需要兩個SpanStyle，因為SpanStyle是行内元素，是以兩者會水準排列。

後面的文字我們認為比較重要，是以我們需要獨占一行，因為ParagraphStyle是塊元素，是以輕松實作獨占一行的效果。

選擇文字

要啟用文字選擇，需要使用 SelectionContainer

這屬于比較偏僻的知識了，不展開講，有個印象就行。

TextField

TextField(
            value = text.value,
            onValueChange = {
                text.value = it
                Log.e("tag", it)
            },
            modifier = Modifier
                .fillMaxWidth(0.8f),
            label = { Text(text = "哈哈") },
            colors = TextFieldDefaults.textFieldColors(
                textColor = Color.Red,//文字顔色
                backgroundColor = Color.Green,//背景顔色
                cursorColor = Color.Cyan,//光标顔色
            )
        )
           

效果：

OutLineTextField

OutlinedTextField(
            value = text.value, onValueChange = {
                text.value = it
            },
            label = { Text(text = "哈哈") },
            colors = TextFieldDefaults.textFieldColors(
                textColor = Color.Red,
                backgroundColor = Color.Green,
                cursorColor = Color.Cyan,
                focusedIndicatorColor = Color.Transparent//擷取焦點時候邊框的顔色

                )
        )
           

效果：

關注公衆号學習更多知識