Android Compose：点击按钮遍历范围循环切换图片

要实现点击「Next」按钮按1→2→3→4→1的顺序循环切换图片，只需替换原有随机逻辑为顺序递增循环逻辑即可，同时可顺便完善「Previous」按钮的反向切换功能，具体修改如下：

核心修改点 #

1. 调整Next按钮的点击逻辑 #

把原来的随机赋值代码替换为顺序递增+边界重置的逻辑：

onClick = { 
    range = if (range == 4) 1 else range + 1 
}

2. （可选）实现Previous按钮的反向循环 #

如果需要支持反向切换，给Previous按钮添加如下逻辑：

onClick = { 
    range = if (range == 1) 4 else range - 1 
}

3. （可选）同步更新图片描述文字 #

当前代码中图片下方的文字是固定值，建议让它和当前显示的图片对应，新增文字匹配逻辑并替换原有固定文本：

val imageName = when(range) {
    1 -> stringResource(R.string.image_name1)
    2 -> stringResource(R.string.image_name2)
    3 -> stringResource(R.string.image_name3)
    else -> stringResource(R.string.image_name4)
}

// 替换原有Text组件的内容
Text(
    imageName,
    modifier = Modifier
        .padding(16.dp)
        .border(3.dp, Color.Black, RectangleShape)
        .padding(16.dp)
        .padding(horizontal = 100.dp)
)

修改后的完整代码 #

package com.example.artspace

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
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.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.layout.ContentScale
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.artspace.ui.theme.ArtSpaceTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ArtSpaceTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    ArtSpace()
                }
            }
        }
    }
}

@Composable
fun ArtSpace(modifier: Modifier = Modifier) {
    var range by remember { mutableStateOf(1) }
    val imageResource = when(range) {
        1 -> R.drawable.bairen
        2 -> R.drawable.scenic_cliff
        3 -> R.drawable.the_stair_tree
        else -> R.drawable.abandoned
    }
    // 新增：匹配当前图片的描述文字
    val imageName = when(range) {
        1 -> stringResource(R.string.image_name1)
        2 -> stringResource(R.string.image_name2)
        3 -> stringResource(R.string.image_name3)
        else -> stringResource(R.string.image_name4)
    }

    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(10.dp),
        horizontalAlignment = Alignment.Start
    ) {
        Row(
            modifier.padding(10.dp),
            verticalAlignment = Alignment.Top,
            horizontalArrangement = Arrangement.spacedBy(150.dp)
        ) {
            Button(
                // 修改：Previous按钮反向循环逻辑
                onClick = { 
                    range = if (range == 1) 4 else range - 1 
                },
                modifier
                    .align(Alignment.Top)
                    .size(width = 110.dp, height = 50.dp)
            ) {
                Text(stringResource(R.string.previous))
            }

            Button(
                // 修改：Next按钮顺序循环逻辑
                onClick = { 
                    range = if (range == 4) 1 else range + 1 
                },
                modifier
                    .align(Alignment.Bottom)
                    .size(width = 110.dp, height = 50.dp),
            ) {
                Text(stringResource(R.string.next))
            }
        }

        Image(
            painter = painterResource(imageResource),
            contentDescription = when(range) {
                1 -> "bairen"
                2 -> "scenic cliff"
                3 -> "the stair tree"
                else -> "abandoned"
            },
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .size(600.dp)
                .clip(RoundedCornerShape(16.dp))
                .border(3.dp, Color.Black, RoundedCornerShape(16.dp))
        )
        Spacer(modifier = Modifier.size(50.dp))
        Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
            // 修改：使用动态匹配的图片描述文字
            Text(
                imageName,
                modifier = Modifier
                    .padding(16.dp)
                    .border(3.dp, Color.Black, RectangleShape)
                    .padding(16.dp)
                    .padding(horizontal = 100.dp)
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun ArtSpacePreview() {
    ArtSpaceTheme {
        ArtSpace()
    }
}

内容的提问来源于stack exchange，提问作者vukica