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

 

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

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


Image 隸屬在 androidx.compose.foundation 沒有在 androidx.compose.material

顯示本機圖片

//val image: Painter = painterResource(id = R.drawable.hktlogo)

Image(
    painter = painterResource(R.drawable.hktlogo),
    contentDescription = ""
)

顯示網路圖片

模擬器要開網路

<uses-permission android:name="android.permission.INTERNET"/>

implementation "io.coil-kt:coil-compose:2.0.0-rc03"
AsyncImage(
    model = "https://i.imgur.com/hWMGvED.jpg",
    contentDescription = null
)

圖片大小,延展

Image(
        painter = painterResource(R.drawable.hktlogo),
        contentDescription = "",
        modifier = Modifier
            .size(100.dp, 400.dp)
            .background(Color.Red)
            .clip(CircleShape),
        contentScale = ContentScale.FillHeight
    )

作業

val diceImages = arrayOf(
    R.drawable.dice_one, R.drawable.dice_two, R.drawable.dice_three,
    R.drawable.dice_four, R.drawable.dice_five, R.drawable.dice_six
)

@Composable
fun Demo() {
    var resultVal by rememberSaveable { mutableStateOf(0) }

    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {

        val (
            imgDice,
            btnRandom,
        ) = createRefs()

        val topGuideline = createGuidelineFromTop(0.1f)

        Image(
            painter = painterResource(diceImages[resultVal]),
            contentDescription = "",
            contentScale = ContentScale.Fit,
            modifier = Modifier
                .size(300.dp)
                .constrainAs(imgDice) {
                    top.linkTo(topGuideline)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
        )

        Button(onClick = {
            resultVal = Random().nextInt(6)
            Log.d("QQQ", "resultVal:$resultVal");
        },
            modifier = Modifier
                .constrainAs(btnRandom) {
                    bottom.linkTo(parent.bottom, 10.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }) {
            Text(
                "隨機", fontSize = 50.sp
            )
        }

    }
}

這個網誌中的熱門文章

最新入門零基礎 Java 教學【從零開始學 Java 程式設計】Java教學課程目錄 (IntelliJ IDEA 開發教學)

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

nano 文字編輯器

Android Studio 歷代版本下載點

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)