Compose 练习 - 选择 Yes

运行效果：

可以看到，点击 No 的时候，Yes 和 No 按钮会交换位置。点击 Yes 时，会弹出一个 Toast。

代码：

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
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.ButtonDefaults
import androidx.compose.material3.Scaffold
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.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.kevintest.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyApplicationTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    var order by remember { mutableStateOf(true) }
                    Choose(Modifier.padding(innerPadding), order = order, onYesClick = {
                        Toast.makeText(
                            this,
                            "Correct!",
                            Toast.LENGTH_SHORT
                        ).show()
                    }, onNoClick = {
                        order = !order
                    })
                }
            }
        }
    }
}

@Composable
private fun Choose(modifier: Modifier = Modifier, order: Boolean = true, onYesClick: () -> Unit = {}, onNoClick: () -> Unit = {}) {
    // Center alignment
    Column(
        modifier = modifier.fillMaxSize(),
        horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally,
        verticalArrangement = androidx.compose.foundation.layout.Arrangement.Center,
    ) {
        Text(modifier = Modifier.padding(22.dp), text = "6?", fontSize = 24.sp, color = Color.Black)
        Row {
            if (order) {
                YesButton(onYesClick)
                NoButton(onNoClick)
            } else {
                NoButton(onNoClick)
                YesButton(onYesClick)
            }
        }
    }
}

@Composable
private fun YesButton(onYesClick: () -> Unit) {
    Button(
        onClick = {
            onYesClick()
        },
        shape = RoundedCornerShape(22.dp),
        colors = ButtonDefaults.buttonColors(containerColor = Color.Unspecified),
        modifier = Modifier
            .size(160.dp, 80.dp)
            .padding(8.dp),
    ) {
        Text(modifier = Modifier, text = "Yes", fontSize = 18.sp, color = Color.White)
    }
}

@Composable
private fun NoButton(onNoClick: () -> Unit = {}) {
    Button(
        onClick = {
            onNoClick()
        },
        shape = RoundedCornerShape(22.dp),
        colors = ButtonDefaults.buttonColors(containerColor = Color.White),
        border = BorderStroke(2.dp, Color.Black),
        modifier = Modifier
            .size(160.dp, 80.dp)
            .padding(8.dp),
    ) {
        Text(modifier = Modifier, text = "No", fontSize = 18.sp, color = Color.Black)
    }
}

这里使用 Compose 设置了 UI 的样式。并且通过状态提升，将点击事件的回调，以及 order 变量都提到了上层。以保持 Composable 是无状态的。