Jetpack Compose 声明式 UI 开发

// app/build.gradle.kts
plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.android")
    id("org.jetbrains.kotlin.plugin.compose") version "2.0.21"
}

android { buildFeatures { compose = true } }

dependencies {
    val composeBom = platform("androidx.compose:compose-bom:2024.09.00")
    implementation(composeBom)
    implementation("androidx.compose.material3:material3")
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")
    implementation("androidx.activity:activity-compose:1.9.3")
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    Greeting(name = "Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello, $name!",
        modifier = modifier.padding(16.dp),
        style = MaterialTheme.typography.headlineSmall
    )
}

val composeView = ComposeView(requireContext()).apply {
    // 必须设置策略，否则视图销毁时组合不会释放
    setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
    setContent { AppTheme { ProfileScreen() } }
}

@Composable
fun ProfileCard(name: String, bio: String) {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        Box(
            modifier = Modifier
                .size(56.dp)
                .clip(CircleShape)
                .background(MaterialTheme.colorScheme.primaryContainer),
            contentAlignment = Alignment.Center
        ) {
            Text(text = name.take(1), style = MaterialTheme.typography.titleLarge)
        }
        Column(modifier = Modifier.weight(1f)) {
            Text(text = name, style = MaterialTheme.typography.titleMedium)
            Text(text = bio, maxLines = 2, overflow = TextOverflow.Ellipsis)
        }
    }
}

// 先 padding 再 background：背景只覆盖内容区域
Text(text = "A", modifier = Modifier.padding(16.dp).background(Color.Yellow))

// 先 background 再 padding：背景覆盖包含 padding 的整块区域
Text(text = "B", modifier = Modifier.background(Color.Yellow).padding(16.dp))

@Composable
fun MessageList(messages: List<Message>, onItemClick: (Message) -> Unit) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        item(key = "header") { Text(text = "共 ${messages.size} 条") }
        items(items = messages, key = { it.id }) { message ->
            MessageRow(message = message, onClick = { onItemClick(message) })
        }
    }
}

@Composable
fun AppTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val colorScheme = if (darkTheme) darkColorScheme() else lightColorScheme(
        primary = Color(0xFF6750A4), surface = Color(0xFFFFFBFE)
    )
    MaterialTheme(colorScheme = colorScheme, typography = Typography(), content = content)
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HomeScreen(onAdd: () -> Unit) {
    Scaffold(
        topBar = { TopAppBar(title = { Text("消息") }) },
        floatingActionButton = {
            FloatingActionButton(onClick = onAdd) {
                Icon(Icons.Default.Add, contentDescription = "新增")
            }
        }
    ) { innerPadding ->
        // 必须消费 innerPadding，否则内容会被系统栏或顶栏遮挡
        MessageList(emptyList(), {}, Modifier.padding(innerPadding))
    }
}

@Composable
fun LoginForm(onSubmit: (String, String) -> Unit) {
    var email by rememberSaveable { mutableStateOf("") }
    var password by rememberSaveable { mutableStateOf("") }
    val canSubmit by remember {
        derivedStateOf { email.contains("@") && password.length >= 8 }
    }

    Column(
        modifier = Modifier.fillMaxWidth().padding(24.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text("邮箱") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
            modifier = Modifier.fillMaxWidth()
        )
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("密码") },
            visualTransformation = PasswordVisualTransformation(),
            modifier = Modifier.fillMaxWidth()
        )
        Button(onClick = { onSubmit(email, password) }, enabled = canSubmit) {
            Text("登录")
        }
    }
}

private val FilterSaver = listSaver<Filter, Any>(
    save = { listOf(it.keyword, it.onlyUnread) },
    restore = { Filter(it[0] as String, it[1] as Boolean) }
)
var filter by rememberSaveable(stateSaver = FilterSaver) { mutableStateOf(Filter("", false)) }

val LocalSnackbarHost = compositionLocalOf<SnackbarHostState> { error("未提供") }
CompositionLocalProvider(LocalSnackbarHost provides hostState) {
    HomeScreen()   // 子树任意深度都能通过 LocalSnackbarHost.current 访问
}

@Preview(name = "浅色", showBackground = true, locale = "zh-rCN")
@Preview(name = "深色", showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun ProfileCardPreview() {
    AppTheme { ProfileCard(name = "Leeting", bio = "Android 开发工程师") }
}

@Composable
fun MapView(location: LatLng) = AndroidView(
    factory = { context -> MapLibreView(context) },        // 只调用一次，负责创建
    update = { view -> view.setCameraPosition(location) }, // 重组时同步状态
    modifier = Modifier.fillMaxSize()
)