原文: Jetpack Compose學習(2)——文本(Text)的使用 | Stars-One的雜貨小窩
對于開發來說,文字最為基礎的元件,我們先從這兩個使用開始吧
本篇涉及到Kotlin和DSL特性的使用 若不了解的話可能會造成代碼閱讀困難,閱讀前確定你有上述基礎知識!!!
本系列以往文章請檢視此分類連結jetpackcompose學習
上述代碼的效果如下圖所示:
屬性
說明
text
文字
color
文字顔色
fontSize
字型大小
fontStyle
字型樣式, 可設定為斜體Italic
fontWeight
字型權重,可設定字型加粗
overflow
文字溢出效果,與maxLines結合使用可實作文字溢出顯示省略号效果
maxLines
最大行數 ,與overflow結合使用實作文字溢出顯示省略号效果
PS:這裡提下,還有個重要的屬性<code>modifier</code>,這個準備在和布局使用一起講解,其作用很強大,可以設定控件寬高,背景,點選效果,間距,滾動等效果,所有的元件都是存在有這個屬性,友善我們對元件進行調整
上述列出的屬性并不是全部,還有些不是太常用的就沒列出來了
補充: 一般我們是将常用的文本放在<code>string.xml</code>檔案中,如果想要擷取這裡的數值,compose也是提供有相應的方法,當然,除了文本之外,顔色等資源也有對應的方法 文本 -> <code>stringResource(R.string.app_name)</code> 顔色 -> <code>colorResource(R.color.black)</code> 尺寸 -> <code>dimensionResource(R.dimen.padding_small)</code> 圖檔 -> <code>painterResource(R.drawable.ic_logo)</code>
我們可能遇到這樣的情況,在一行文本中,其中某個位址可以點選,或者某個詞語需要加粗,按照以往的操作,我們就得用多個TextView來實作或借助他人封裝的View來實作
但在Compose中,我們可以很友善的實作上述這樣的效果,<code>text</code>屬性除了接收字元串,還可以接收一個參數<code>AnnotatedString</code>,如下圖所示
提示:如果你快捷鍵是預設的話,在方法括号裡按下<code>ctrl+p</code>可以看到參數提示 :good:
官方文檔的解釋:
The basic data structure of text with multiple styles.
翻譯過來就是說<code>AnnotatedString</code>是一種具有多種樣式的文本的基本資料結構
文檔上也是說明了,推薦可以使用建構器來生成對象,其實也就是一個方法<code>buildAnnotatedString()</code>
此方法裡面我們可以使用Kotlin的語言特性DSL,更友善的建立一個<code>AnnotatedString</code>
來段簡單的代碼:
buildAnnotatedString方法裡存在有<code>withStyle</code>和<code>append</code>方法,這兩個方法其實是<code>AnnotatedString.Builder</code>類裡的方法
這裡是采用了lambda寫法,buildAnnotatedString花括号裡的對象即為<code>AnnotatedString.Builder</code>
withStyle可以接收<code>ParagraphStyle</code>或<code>SpanStyle</code>
從字面上很容易了解,<code>ParagraphStyle</code>是段落樣式,<code>SpanStyle</code>是單行樣式
從構造方法來看,<code>SpanStyle</code>其實和Text的構造方法差不多,而且比Text類中的屬性都要豐富,如設定背景色,陰影等(而Text類中這些功能都被封裝在Modified類裡)
前面列出的屬性表格它都有,但除了text屬性(當然,也能了解,這隻是個Style,要text屬性做什麼 ) 😅
而<code>ParagraphStyle</code>稍微比較少一點,主要以排版的屬性為主,如對齊,行高,文本方向等,從下圖可以看得出來
<code>append</code>方法也容易了解,就是你想要把樣式指派給哪個文本
然後我們就可以無限套娃,組合出我們想要的樣式 😀
效果如下圖:
PS:換行的話也可以輸入<code>\n</code>轉義符号
預設情況下,Text是無法選擇的,compose中提供了一個容器<code>SelectionContainer</code>,友善我們實作Text的選擇效果
設定文本的點選事件我們可以使用Modifier提供的方法,點選會有有水波漣漪的效果
如果你有存在是判斷點選的位置需求,官方則是推薦使用<code>ClickableText</code>這個控件,此控件隻接受<code>AnnotatedString</code>文本,不接受正常字元串文本參數
我們常見的文本,會在一段文字中間有個連結文本,點選會跳轉浏覽器進而打開到具體的頁面H5
輸入使用上面的效果也是能完成效果,但是每次還得算下下标的範圍才符合條件,這樣過于繁瑣
對此情況,官方也是有對應的解決方法,在<code>AnnotatedString</code>構造的時候,使用<code>pushStringAnnotation()</code>和<code>pop()</code>方法即可達到效果,如下面給出的代碼
在構造的時候,使用<code>pushStringAnnotation()</code>存下相應的資料,之後在點選事件中通過<code>AnnotatedString</code>的<code>getStringAnnotations()</code>方法重新擷取内容,之後進行相應的邏輯操作(如跳轉位址)
可以看到,<code>pushStringAnnotation()</code>方法中存在有兩個參數,<code>tag</code>代表标簽,資料可以随意定義,但要與之後調用<code>getStringAnnotations()</code>傳參需要對應上,<code>annotation</code>則是存放的資料(隻支援String)
記得在後面需要調用<code>pop()</code>方法,這兩個方法是需要結合使用的,上述代碼就是把here這個詞設定了一個額外資料内容
我們還是使用<code>ClickableText</code>這個類,在點選事件中擷取參數即可
需要注意的是,<code>getStringAnnotations()</code>傳了之前設定的tags參數的内容及開始和結束的下标,傳回的是一個List對象
這裡傳回List也不難了解,<code>getStringAnnotations()</code>方法作用就是搜尋文本的指定下标範圍内,存在有tags的内容資料,指定下标範圍内,若tags相同,應該也是會被收集到
但是我覺得應該不會用這種情況的發生,但是為了確定使用,<code>tags</code>參數的數值我們最好設定一個唯一的數值
Compose 中的文字 | Jetpack Compose | Android Developers
Compose 中的資源 | Jetpack Compose | Android Developers
提問之前，請先看提問須知
點選右側圖示發起提問
或者加入QQ群一起學習
TornadoFx學習交流群:1071184701