iT邦幫忙

2024 iThome 鐵人賽

DAY 5
0
Mobile Development

從零開始學習 Jetpack Compose系列 第 5

從零開始學習 Jetpack Compose Day4 - Text

  • 分享至 

  • xImage
  •  

Text

負責顯示文字。根據官方說明他是繼承於BasicText,兩者的差別在於說BasicText並沒有主題,而Text是有使用Material 的主題。

基本功能

text設定文字

size設定文字大小(PS:只吃sp所以要用dp的話要另外轉)

textAlign設定文字位置

onclick透過上一章提到的修飾符(modifier)可以達成onClickListener

https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day4/%E6%88%AA%E5%9C%96%202024-09-19%20%E6%99%9A%E4%B8%8A10.47.40.png

其他功能

超過長度overflow
TextOverflow.Ellipsis:文字超出指定的行數或容器寬度時,超出的部分不會顯示,並且用省略號 (...) 表示文字被截斷
TextOverflow.Visible:文字超出容器也會繼續顯示(底下範例中紅字直接跑版)
TextOverflow.Clip:超出容器部分會被裁剪掉
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day4/%E6%88%AA%E5%9C%96%202024-09-19%20%E6%99%9A%E4%B8%8A11.09.03.png

部分文字Style調整
buildAnnotatedString
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day4/%E6%88%AA%E5%9C%96%202024-09-19%20%E6%99%9A%E4%B8%8A10.51.22.png

部分文字可點擊
ClickableText:已被捨棄
新版使用withLink
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day4/%E6%88%AA%E5%9C%96%202024-09-19%20%E6%99%9A%E4%B8%8A10.52.09.png


上一篇
從零開始學習 Jetpack Compose Day3 - Modifier
下一篇
從零開始學習 Jetpack Compose Day5 - TextField
系列文
從零開始學習 Jetpack Compose30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言