官方教程html
下載Android Studio Canary版本android
添加依賴:bash
def compose_version = "0.1.0-dev03" kapt("androidx.compose:compose-compiler:$compose_version") implementation("androidx.compose:compose-runtime:$compose_version") implementation("androidx.ui:ui-core:$compose_version") implementation "androidx.ui:ui-tooling:$compose_version" implementation("androidx.ui:ui-layout:$compose_version") implementation("androidx.ui:ui-framework:$compose_version") implementation("androidx.ui:ui-material:$compose_version") implementation("androidx.ui:ui-foundation:$compose_version") implementation("androidx.ui:ui-text:$compose_version") 複製代碼
androidx.ui.core中的Composable Text組件爲咱們提供了一系列的屬性來控制文本的外觀。markdown
@Composable
fun Text(
text: String,
modifier: Modifier = Modifier.None,
style: TextStyle? = null,
paragraphStyle: ParagraphStyle? = null,
softWrap: Boolean = DefaultSoftWrap,
overflow: TextOverflow = DefaultOverflow,
maxLines: Int? = DefaultMaxLines
) {
Text(
text = AnnotatedString(text),
modifier = modifier,
style = style,
paragraphStyle = paragraphStyle,
softWrap = softWrap,
overflow = overflow,
maxLines = maxLines
)
}
複製代碼
softWrapapp
聲明是否應在換行符處斷開文本oop
overflow字體
組件中溢出文本ui
省略號 spa
淡入淡出 code
@Preview @Composable fun initLayout() { // 定義一個有寬度的容器 Container ( width = Dp(80f) ){ Text( text = "1234567890asdfgh", softWrap = false, maxLines = 1, overflow = TextOverflow.Fade ) } } 複製代碼
在定義文本組件的樣式屬性時,咱們須要使用TextStyle類的實例
@Immutable
data class TextStyle(
// 文本顏色
val color: Color? = null,
// Sp 字體大小
val fontSize: TextUnit = TextUnit.Inherit,
// 文本粗細
val fontWeight: FontWeight? = null,
// 文本樣式 Normal或Italic
val fontStyle: FontStyle? = null,
// 文本字體手動合成粗體/斜體樣式
val fontSynthesis: FontSynthesis? = null,
// 文本字體
val fontFamily: FontFamily? = null,
// 字體的高級排版設置
val fontFeatureSettings: String? = null,
// 字符之間的間距
val letterSpacing: TextUnit = TextUnit.Inherit,
// 從文本基線開始使用的垂直移位
val baselineShift: BaselineShift? = null,
// 文本幾何變換
val textGeometricTransform: TextGeometricTransform? = null,
// 特定語言環境的文本
val localeList: LocaleList? = null,
// 文本背景色
val background: Color? = null,
// 在文本的某處繪製水平線 None Underline LineThrough
val decoration: TextDecoration? = null,
// 要在文本上繪製的陰影
val shadow: Shadow? = null
)
複製代碼
ParagraphStyle類
data class ParagraphStyle constructor(
// 文本對齊方式 LEFT、START、RIGHT、END、CENTER、JUSTIFY
val textAlign: TextAlign? = null,
// 枚舉類設置文本顯示方向
val textDirectionAlgorithm: TextDirectionAlgorithm? = null,
// 文本行高
val lineHeight: Sp? = null,
// 文本縮進
val textIndent: TextIndent? = null
)
複製代碼
/**
* The basic data structure of text with multiple styles. To construct an [AnnotatedString] you
* can use [Builder].
*/
data class AnnotatedString(
val text: String,
val textStyles: List<Item<TextStyle>> = listOf(),
val paragraphStyles: List<Item<ParagraphStyle>> = listOf()
)
複製代碼
例如:
@Composable fun initLayout() { // 定義一個有寬度的容器 Container ( width = Dp(80f) ){ val annotatedString = AnnotatedString.Builder("1234567890asdfgh") .apply { addStyle(TextStyle(color = Color.Red), 0, 3) } Text( text = annotatedString.toAnnotatedString(), softWrap = false, maxLines = 1, overflow = TextOverflow.Fade ) } } 複製代碼
@Preview @Composable fun initLayout() { // 定義一個有寬度的容器 Container ( width = Dp(150f), alignment = Alignment.CenterLeft ){ val style = TextStyle(color = Color.Red,background = Color.White) val annotatedString = AnnotatedString.Builder("123456") annotatedString.pushStyle(style) annotatedString.append(", aaaaaa") // 去掉樣式 annotatedString.popStyle() annotatedString.append("cccccc.") Text(text = annotatedString.toAnnotatedString(), maxLines = 1) } } 複製代碼