Android Studio Jetpack Composable -在点击后更改图像

i34xakig 于 2023-10-23 发布在 Android

关注(0)|答案(2)|浏览(101)

目前，我正在Android Studio中开发一个简单的应用程序，该应用程序可以在线使用Kotlin。一般的想法是使中心的图像可点击，并在满足一定数量的点击时更改图像。在第一张图片上，我必须点击一次。在第二张图片上，我必须点击2到4次，这是随机的。在第三张图片上，我必须点击一次。第四张图片也是如此，重新启动整个过程。
我能够把所有的元素在屏幕上，图像是可点击的。我可以看到currentPosition变量正在递增，但应用程序中使用的图像没有变化。我确实意识到这可能是一些新手问题，但我正处于Kotlin和Android Studio之路的起点。
有没有人能在这个案子上帮助我？我将不胜感激。整个代码放在下面：

package com.example.lemonade

import android.os.Bundle
import android.text.style.BackgroundColorSpan
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.AbsoluteCutCornerShape
import androidx.compose.foundation.shape.AbsoluteRoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.modifier.modifierLocalConsumer
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.lemonade.ui.theme.LemonadeTheme

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LemonadeTheme {
                LemonadeWithTextAndImage()
            }
        }
    }
}

@Preview
@Composable
fun LemonadeApp() {
    LemonadeWithTextAndImage()
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LemonadeWithTextAndImage(
    modifier: Modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center)
        .background(color = Color.White)
) {
    var currentPosition = 1
    var numberOfClicks = (2..4).random()
    var beforeLast = 1 + numberOfClicks + 1
    var imageSource = when (currentPosition) {
        1 -> R.drawable.lemon_tree
        numberOfClicks -> R.drawable.lemon_squeeze
        beforeLast -> R.drawable.lemon_drink
        else -> R.drawable.lemon_restart
    }
    var totalNumberOfClicks = beforeLast++;

    Column(
        modifier = modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        CenterAlignedTopAppBar(
            title = {
                Text("Lemonade")
            },
            colors = TopAppBarDefaults.smallTopAppBarColors(
                containerColor = Color.Yellow,
                titleContentColor = Color.Black
            )
        )
        Spacer(modifier = Modifier.height(200.dp))
        Image(
            painter = painterResource(id = imageSource),
            contentDescription = imageSource.toString(),
            Modifier
                .clickable {
                    println("The current position is $currentPosition")
                    currentPosition++
                    painterResource(id = currentPosition)
                }
                .background(
                    color = Color(R.color.icons_background),
                    shape = AbsoluteRoundedCornerShape(10)
                )
        )
        Spacer(modifier = Modifier.height(16.dp))
        Text(text = stringResource(id = R.string.tap_the_lemon_tree))

    }
}

android-studio

来源：https://stackoverflow.com/questions/77210701/jetpack-composable-make-the-image-change-after-it-has-been-clicked-on

2条答案

按热度按时间

roqulrg31#

如果你不使用observables，要使你的vars可观察和可变，你应该使用mutableStateOf（），尝试以下方法：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LemonadeWithTextAndImage(
    modifier: Modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center)
        .background(color = Color.White)
) {
    var currentPosition by remember { mutableStateOf(1) }
    var numberOfClicks by remember { mutableStateOf((2..4).random()) }
    var beforeLast by remember { mutableStateOf(1 + numberOfClicks + 1) }

    val imageSource = when (currentPosition.value) {
        1 -> R.drawable.lemon_tree
        numberOfClicks.value -> R.drawable.lemon_squeeze
        beforeLast.value -> R.drawable.lemon_drink
        else -> R.drawable.lemon_restart
    }
    
    // ... rest of your code ...

    Image(
        painter = painterResource(id = imageSource),
        contentDescription = imageSource.toString(),
        Modifier
            .clickable {
                println("The current position is ${currentPosition.value}")
                currentPosition.value++
            }
            .background(
                color = Color(R.color.icons_background),
                shape = AbsoluteRoundedCornerShape(10)
            )
    )

    // ... rest of your code ...
}

赞(0）回复(0）举报 2023-10-23

8zzbczxx2#

这是一个实践Jetpack Codelab：点击行为
您的答案可以在以下网址找到：https://developer.android.com/codelabs/basic-android-kotlin-compose-button-click-practice-problem#1

赞(0）回复(0）举报 2023-10-23