iT邦幫忙

2024 iThome 鐵人賽
DAY 5
0
Mobile Development

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

從零開始學習 Jetpack Compose Day4 - Text

16th鐵人賽
90 瀏覽

  • 分享至 

  • 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 Compose 共 30 篇
  1. 26
    從零開始學習 Jetpack Compose Day25 - 專案實作（3）主畫面 ViewModel 建立
  2. 27
    從零開始學習 Jetpack Compose Day26 - 詳細頁ViewModel建立
  3. 28
    從零開始學習 Jetpack Compose Day27 - 專案實作（5）Room建立
  4. 29
    從零開始學習 Jetpack Compose Day28 - Compose UI Test
  5. 30
    從零開始學習 Jetpack Compose Day29 - 參賽感想
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙