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
            )
        }

    }
}