Jetpack?Compose?Text的基本使用
Text
文字是任何界面必須的元素,Compose Text 可組合項(xiàng),通過設(shè)置文字、大小、顏色可以實(shí)現(xiàn)各種文字效果。
Text的基本用法如下:
@Composable fun Text( ????//要顯示的文字 text: String, ????//修飾符 modifier: Modifier = Modifier, ????//文字顏色 color: Color = Color.Unspecified, ????//文字大小 fontSize: TextUnit = TextUnit.Unspecified, ????//文字樣式,正?;蛘咝斌w fontStyle: FontStyle? = null, ????//字重,范圍:1~1000之間 fontWeight: FontWeight? = null, ????//字體 fontFamily: FontFamily? = null, ????//字幕之間間距 letterSpacing: TextUnit = TextUnit.Unspecified, ????//文字裝飾,下劃線、中劃線或者None textDecoration: TextDecoration? = null, ????//文字對(duì)齊方式 textAlign: TextAlign? = null, ????//行高 lineHeight: TextUnit = TextUnit.Unspecified, ????//溢出處理方式,裁剪、省略號(hào)或者正常顯示 overflow: TextOverflow = TextOverflow.Clip, ????//是否處理?yè)Q行符 softWrap: Boolean = true, ????//最大行數(shù) maxLines: Int = Int.MAX_VALUE, ????//計(jì)算文本布局時(shí)的回調(diào) onTextLayout: (TextLayoutResult) -> Unit = {}, ????//文本樣式,顏色、字體等 style: TextStyle = LocalTextStyle.current )
基本使用
@Composable fun TextCommon() { Text( "Hello World", color = Color.Blue, fontSize = 30.sp, fontWeight = FontWeight.Bold, textAlign = TextAlign.Center, modifier = Modifier .width(150.dp) .background(Color(0xff44D1FD)), fontFamily = FontFamily.SansSerif, fontStyle = FontStyle.Italic, textDecoration = TextDecoration.LineThrough, style = TextStyle.Default ) }
通過簡(jiǎn)單設(shè)置字體、顏色、文字大小 等就能滿足我們的基本要求。
效果如下:
富文本顯示
如果需要顯示不同的文字樣式,就必須用到 AnnotatedString
,通過 buildAnnotatedString()可以實(shí)現(xiàn)各種富文本的顯示。
@Composable fun RichText() { Text( buildAnnotatedString { withStyle(style = SpanStyle(color = Color.Blue)) { append("H") } append("ello ") withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) { append("W") } append("orld") 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") } }, modifier = Modifier.padding(start = 10.dp).background(Color(0xff44D1FD)) ) }
通過buildAnnotatedString() + withStyle() 設(shè)置不同位置的,顯示不同效果。
效果如下:
文字部分可選
@Composable fun PartiallySelectableText() { SelectionContainer { Column(modifier = Modifier.padding(start = 10.dp).background(Color(0xff44D1FD))) { 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") } } }
默認(rèn)情況下,Compose可組合項(xiàng)不可以選擇,要啟用選擇,需要使用SelectionContainer包裹文字組合。你也可以選擇在部分區(qū)域禁止選擇,DisableSelection包裹文字部分就可以實(shí)現(xiàn)部分不可選。效果如下:
可點(diǎn)擊文字
@Composable fun AnnotatedClickableText() { val context = LocalContext.current val annotatedText = buildAnnotatedString { append("Click ") pushStringAnnotation(tag = "URL", annotation = "https://developer.android.com") withStyle(style = SpanStyle(color = Color.Blue, fontWeight = FontWeight.Bold)) { append("here") } pop() } ClickableText( modifier = Modifier.padding(start = 10.dp).background(Color(0xff44D1FD)), text = annotatedText, onClick = { offset -> annotatedText.getStringAnnotations(tag = "URL", start = offset, end = offset) .firstOrNull()?.let { annotation -> // If yes, we log its value Log.d("Clicked URL", annotation.item) val uri = Uri.parse(annotation.item) val intent = Intent(Intent.ACTION_VIEW, uri) context.startActivity(intent) } } ) }
通過pushStringAnnotation() 設(shè)置tag,然后在ClickableText 的onClick 回調(diào)處理點(diǎn)擊事件。效果如下:
TextField
TextField 允許用戶輸入文字,TextField 是 BasicTextField 的簡(jiǎn)單封裝,包含了各種裝飾。
@Composable fun SimpleFilledTextField() { var text by remember { mutableStateOf("Hello") } TextField( value = text, onValueChange = { text = it }, label = { Text("Label") }, placeholder = { Text("placeholder") }, leadingIcon = { Text("leadingIcon") }, trailingIcon = { Text("trailingIcon") }, isError = true, modifier = Modifier .padding(start = 10.dp, end = 10.dp) .fillMaxWidth(), maxLines = 10, singleLine = false, keyboardActions = KeyboardActions( onDone = { }, onNext = { }, onPrevious = { }, onSearch = { }, onSend = { }, onGo = { } ), keyboardOptions = KeyboardOptions( capitalization = KeyboardCapitalization.Characters, autoCorrect = true, keyboardType = KeyboardType.Number, imeAction = ImeAction.Search ), readOnly = false ) }
BasicTextField
@Composable fun Search() { var key by remember { mutableStateOf("") } Box(modifier = Modifier.padding(end = 35.dp)) { Row( modifier = Modifier .padding(top = 10.dp, bottom = 10.dp) .fillMaxSize() .clip(CircleShape) .background(Color.White), verticalAlignment = Alignment.CenterVertically ) { Icon( painter = painterResource(id = com.zjp.common.R.drawable.search), contentDescription = "search", tint = Color.Gray, modifier = Modifier.padding(start = 10.dp) ) BasicTextField( value = key, onValueChange = { key = it }, modifier = Modifier .fillMaxWidth() .padding(start = 10.dp, end = 30.dp) .align(Alignment.CenterVertically), textStyle = TextStyle( textAlign = TextAlign.Justify, fontSize = 20.sp, color = Color.Black.copy(alpha = 0.8f) ), singleLine = true, cursorBrush = SolidColor(Color.Red), keyboardActions = KeyboardActions( onSearch = { } ), keyboardOptions = KeyboardOptions( imeAction = ImeAction.Search ), decorationBox = { innerTextField -> Box() { if (key.isEmpty()) { Text("搜點(diǎn)啥", color = Color.Gray, fontSize = 20.sp) } innerTextField() //<-- Add this } } ) } if (key.isNotEmpty()) { Icon( painter = painterResource(id = android.R.drawable.ic_menu_close_clear_cancel), contentDescription = "close", modifier = Modifier .align(Alignment.CenterEnd) .padding(end = 10.dp) .clickable { key = "" }, tint = Color.Gray ) } } }
與TextField 相比,BasicTextField 沒有 leadingIcon、placeholder、trailingIcon 等裝飾,你可以通過配合其他科組合項(xiàng),實(shí)現(xiàn)不同的效果。
簡(jiǎn)單搜索框效果如下:
到此這篇關(guān)于Jetpack Compose Text的基本使用的文章就介紹到這了,更多相關(guān)Jetpack Compose Text 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android編程中沉浸式狀態(tài)欄的三種實(shí)現(xiàn)方式詳解
這篇文章主要介紹了Android編程中沉浸式狀態(tài)欄的三種實(shí)現(xiàn)方式,簡(jiǎn)單描述了沉浸式狀態(tài)欄的概念、功能并結(jié)合實(shí)例形式詳細(xì)分析了Android實(shí)現(xiàn)沉浸式狀態(tài)欄的三種操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-02-02python gstreamer實(shí)現(xiàn)視頻快進(jìn)/快退/循環(huán)播放功能
這篇文章主要介紹了python gstreamer 實(shí)現(xiàn)視頻快進(jìn)/快退/循環(huán)播放功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03Android實(shí)現(xiàn)TextView顯示HTML加圖片的方法
這篇文章主要介紹了Android實(shí)現(xiàn)TextView顯示HTML加圖片的方法,結(jié)合實(shí)例形式分析了TextView控件顯示網(wǎng)絡(luò)圖片的相關(guān)操作技巧,需要的朋友可以參考下2016-07-07Android中RecyclerView布局代替GridView實(shí)現(xiàn)類似支付寶的界面
RecyclerView比GridView來得更加強(qiáng)大,不僅是在分割線的繪制方面,在條目的編輯上也做得同樣出色,下面就來看一下Android中RecyclerView布局代替GridView實(shí)現(xiàn)類似支付寶的界面的實(shí)例2016-06-06Android 自定義標(biāo)題欄 顯示網(wǎng)頁(yè)加載進(jìn)度的方法實(shí)例
Android 自定義標(biāo)題欄 顯示網(wǎng)頁(yè)加載進(jìn)度的方法實(shí)例,需要的朋友可以參考一下2013-06-06Android自定義收音機(jī)搜臺(tái)控件RadioRulerView
這篇文章主要為大家詳細(xì)介紹了Android自定義收音機(jī)搜臺(tái)控件RadioRulerView的相關(guān)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04Android中Java instanceof關(guān)鍵字全面解析
instanceof關(guān)鍵字用于判斷一個(gè)引用類型變量所指向的對(duì)象是否是一個(gè)類(或接口、抽象類、父類)的實(shí)例.這篇文章主要介紹了Android中Java instanceof關(guān)鍵字全面解析的相關(guān)資料,需要的朋友可以參考下2016-07-07