|
| 1 | +# Jetpack Compose组件 |
| 2 | + |
| 3 | +### Text组件 |
| 4 | + |
| 5 | +```kotlin |
| 6 | +Text(text = "Hello World") |
| 7 | +Text( |
| 8 | + text = stringResource(id = R.string.next), |
| 9 | + style = TextStyle( |
| 10 | + fontSize = 25.sp, |
| 11 | + fontWeight = FontWeight.Bold, |
| 12 | + lineHeight = 35.sp, |
| 13 | + color = Color.Red, |
| 14 | + textDecoration = TextDecoration.LineThrough, |
| 15 | + fontStyle = FontStyle.Italic |
| 16 | + ) |
| 17 | +) |
| 18 | +``` |
| 19 | + |
| 20 | +#### AnnotatedString多样式文字 |
| 21 | + |
| 22 | +在很多应用场景中,我们需要在一段文字中对局部内容应用特别格式以示突出,比如一个超链接或者一个电话号码等,此时需要用到AnnotatedString。AnnotatedString是一个数据类,除了文本值,它还包含了一个SpanStyle和ParagraphStyle的Range列表。SpanStyle用于描述在文本中子串的文字样式,ParagraphStyle则用于描述文本中子串的段落样式,Range确定子串的范围。 |
| 23 | + |
| 24 | +```kotlin |
| 25 | +val annotedText = buildAnnotatedString { |
| 26 | + withStyle(style = SpanStyle(fontSize = 23.sp)) { |
| 27 | + pushStringAnnotation(tag = "url", annotation = "https://www.baidu.com") |
| 28 | + append("haha") |
| 29 | + } |
| 30 | + |
| 31 | + withStyle(SpanStyle(fontSize = 30.sp)) { |
| 32 | + append("A") |
| 33 | + } |
| 34 | +} |
| 35 | + |
| 36 | +ClickableText( |
| 37 | + text = annotedText, |
| 38 | + onClick = { offset -> |
| 39 | + annotedText.getStringAnnotations(tag = "url", start = offset, end = offset) |
| 40 | + .firstOrNull()?.let { |
| 41 | + Log.e("@@@", it.item) |
| 42 | + } |
| 43 | + } |
| 44 | +) |
| 45 | +``` |
| 46 | + |
| 47 | +Compose提供了一种可点击文本组件ClickedText,可以响应我们对文字的点击,并返回点击位置。可以让AnnotatdString子串在相应的ClickedText中点击后,做出不同的动作。 |
| 48 | + |
| 49 | + |
| 50 | + |
| 51 | + |
| 52 | + |
| 53 | +### SelectionContainer |
| 54 | + |
| 55 | +选中文字Text自身默认是不能被长按选择的,否则在Button中使用时,又会出现那种“可粘贴的Button”的例子。 |
| 56 | +Compose提供了专门的SelectionContainer组件,对包裹的Text进行选中。可见Compose在组件设计上,将关注点分离的原则发挥到了极致。 |
| 57 | + |
| 58 | + |
| 59 | +```kotlin |
| 60 | +SelectionContainer { |
| 61 | + Text("hahah") |
| 62 | +} |
| 63 | +``` |
| 64 | + |
| 65 | + |
| 66 | + |
| 67 | +### TextField输入框 |
| 68 | + |
| 69 | + |
| 70 | +TextField有两种风格,一种是默认的,也就是filled,另一种是OutlinedTextField。 |
| 71 | +```kotlin |
| 72 | +var text by remember { mutableStateOf("") } |
| 73 | + |
| 74 | +TextField(value = text, onValueChange = { |
| 75 | + text = it |
| 76 | +}, label = { Text("请输入用户名") }) |
| 77 | +``` |
| 78 | + |
| 79 | +这个text是一个可以变化的文本,用来显示TextField输入框中当前输入的文本内容。 在onValueChange回调中可以获取来自软键盘的最新输入,我们利用这个信息来更新可变状态text,驱动界面刷新显示最新的输入文本。 |
| 80 | + |
| 81 | + |
| 82 | +***来自软键盘的输入内容不会直接更新TextField, TextField需要通过观察额外的状态更新自身,这也体现了声明式UI中“状态驱动UI”的基本理念。*** |
| 83 | + |
| 84 | + |
| 85 | + |
| 86 | + |
| 87 | + |
| 88 | +### Column组件 |
| 89 | + |
| 90 | +很多产品中都有展示一组数据的需求场景,如果数据数量是可以枚举的,则仅需通过Column组件来枚举列出。 |
| 91 | + |
| 92 | + |
| 93 | +然而很多时候,列表中的项目会非常多,例如通讯录、短信、音乐列表等,我们需要滑动列表来查看所有的内容,可以通过Column的Modifier添加verticalScroll()方法来让列表实现滑动。 |
| 94 | + |
| 95 | + |
| 96 | +#### LazyComposables |
| 97 | + |
| 98 | +给Column的Modifier添加verticalScroll()方法可以让列表实现滑动。 |
| 99 | + |
| 100 | +但是如果列表过长,众多的内容会占用大量的内存。然而更多的内容对于用户其实都是不可见的,没必要记载到内存。 |
| 101 | + |
| 102 | +所以Compose提供了专门用于处理长列表的组件,这些组件指挥在我们能看到的列表部分进行重组和布局,它们分别是LazyColumn和LazyRow。其作用类似于传统视图中的ListView或者RecyclerView。 |
| 103 | + |
| 104 | + |
| 105 | + |
| 106 | + |
0 commit comments