Jetpack Compose 教學上課講義【從零開始學 Jetpack Compose 程式設計】文字元件

 

【從零開始學 Jetpack Compose 程式設計】

線上教學課程目錄: https://bit.ly/3JF4SFA
Youtube 課程播放清單：https://bit.ly/3tFjRbx
Udemy 線上課程：https://bit.ly/3MbVnhO

Text in Compose
https://developer.android.com/jetpack/compose/text

改變文字內容

//預設文字參數
Text("HKT線上教室")

//指定文字參數
Text(text = "HKT線上教室")

改變字體顏色

// 預設顏色
   Text("HKT線上教室",
        color = Color.Red)
   
// RGB 自定義顏色
    Text("HKT線上教室",
        color = Color(0, 100, 100))
    
// 16位進制，Hex 自定義顏色
//https://www.color-hex.com
 Text("HKT線上教室",
        color = Color(0xFF9856C8))

改變字體大小

Column{
    Text(
        "11111111",
        fontSize = 20.sp
    )

    Text(
        "11111111",
        fontSize = dpToSp(dp = 20.dp)
    )
}

//支援 dp
//目前 fontSize 不支援 dp ，需要自己寫方法再轉
@Composable
fun DpToSp(dp: Dp) = with(LocalDensity.current) { dp.toSp() }

字體樣式

//粗體
Text(
    "HKT線上教室",
    fontWeight = FontWeight.Bold
    )

//斜體
Text(
    "HKT線上教室",
    fontStyle = FontStyle.Italic
)

刪除線、底線樣式

Text(
    text = "HKT線上教室",
    textDecoration = TextDecoration.Underline
)

Text(
    text = "HKT線上教室",
    textDecoration = TextDecoration.LineThrough
)

內部間距

Text(
    "HKT線上教室",
    modifier = Modifier
        .background(Color.Red)
        .padding(all = 20.dp)
)

多國語言

開啟專案面板，切換到 Project 檢視，在 res 新增一個 「values-zh-rTW」資料夾。

Text(
    text = stringResource(R.string.weather)
)

英文（預設）：res/values
繁體中文：res/values-zh-rTW
簡體中文：res/values-zh-rCN
日文：res/values-jp