Text(
    text = "Hello Compose",
    fontSize = 20.sp,
    fontWeight = FontWeight.Bold,
    color = Color.Blue,
    maxLines = 2,
    overflow = TextOverflow.Ellipsis
)

Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Blue
    )
) {
    Text("点击我")
}

TextButton(onClick = { }) {
    Text("取消")
}

OutlinedButton(onClick = { }) {
    Text("了解更多")
}

var text by remember { mutableStateOf("") }

TextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("用户名") },
    placeholder = { Text("请输入") },
    singleLine = true
)

Image(
    painter = painterResource(id = R.drawable.ic_launcher),
    contentDescription = "应用图标",
    modifier = Modifier.size(100.dp),
    contentScale = ContentScale.Crop
)

var checked by remember { mutableStateOf(false) }

Row(verticalAlignment = Alignment.CenterVertically) {
    Checkbox(checked = checked, onCheckedChange = { checked = it })
    Text("我同意用户协议")
}

var state by remember { mutableStateOf(ToggleableState.Off) }

TriStateCheckbox(state = state, onClick = {
    state = when (state) {
        ToggleableState.Off -> ToggleableState.Indeterminate
        ToggleableState.Indeterminate -> ToggleableState.On
        ToggleableState.On -> ToggleableState.Off
    }
})

var isOn by remember { mutableStateOf(true) }

Switch(checked = isOn, onCheckedChange = { isOn = it })

Switch(
    checked = isWiFi,
    onCheckedChange = { isWiFi = it },
    thumbContent = if (isWiFi) {
        { Icon(Icons.Default.Wifi, contentDescription = null, modifier = Modifier.size(16.dp)) }
    } else null
)

val options = listOf("男", "女", "保密")
var selected by remember { mutableStateOf(options[0]) }

options.forEach { option ->
    Row(verticalAlignment = Alignment.CenterVertically) {
        RadioButton(
            selected = (option == selected),
            onClick = { selected = option }
        )
        Text(option)
    }
}

var sliderValue by remember { mutableStateOf(0.5f) }

Slider(
    value = sliderValue,
    onValueChange = { sliderValue = it },
    valueRange = 0f..1f
)

Text("当前值：${"%.0f".format(sliderValue * 100)}%")

var volume by remember { mutableStateOf(5f) }

Slider(
    value = volume,
    onValueChange = { volume = it },
    valueRange = 0f..10f,
    steps = 9  // 10 个档位需要 9 个分段
)

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("第一行")
    Text("第二行")
    Text("第三行")
}

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text("左边")
    Text("右边")
}

Box(
    modifier = Modifier.size(200.dp),
    contentAlignment = Alignment.Center
) {
    Image(painter = painterResource(R.drawable.bg), contentDescription = null)
    Text("盖在图片上的文字", color = Color.White)
}

Box(modifier = Modifier.fillMaxSize()) {
    Text("左上角", modifier = Modifier.align(Alignment.TopStart))
    Text("正中间", modifier = Modifier.align(Alignment.Center))
    Text("右下角", modifier = Modifier.align(Alignment.BottomEnd))
}

val items = List(1000) { "第 ${it + 1} 项" }

LazyColumn {
    items(items) { item ->
        Text(
            text = item,
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            fontSize = 18.sp
        )
        Divider()
    }
}

LazyRow {
    items(20) { index ->
        Box(
            modifier = Modifier
                .size(100.dp)
                .padding(8.dp)
                .background(Color.Gray)
        ) {
            Text("$index")
        }
    }
}

LazyColumn {
    item { Text("头部", fontSize = 24.sp) }
    items(dataList) { item -> Text(item) }
    item { Text("底部", fontSize = 12.sp) }
}

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("我的应用") },
            colors = TopAppBarDefaults.topAppBarColors(
                containerColor = Color.Blue,
                titleContentColor = Color.White
            )
        )
    },
    bottomBar = {
        NavigationBar {
            NavigationBarItem(
                icon = { Icon(Icons.Default.Home, contentDescription = "首页") },
                label = { Text("首页") },
                selected = true,
                onClick = { }
            )
            NavigationBarItem(
                icon = { Icon(Icons.Default.Person, contentDescription = "我的") },
                label = { Text("我的") },
                selected = false,
                onClick = { }
            )
        }
    },
    floatingActionButton = {
        FloatingActionButton(onClick = { }) {
            Icon(Icons.Default.Add, contentDescription = "添加")
        }
    }
) { innerPadding ->
    Column(modifier = Modifier.padding(innerPadding)) {
        Text("页面内容在这里")
    }
}

Box(
    modifier = Modifier
        .size(100.dp)
        .clip(RoundedCornerShape(12.dp))
        .background(Color.Blue)
        .border(2.dp, Color.White, RoundedCornerShape(12.dp))
        .clickable { },
    contentAlignment = Alignment.Center
) {
    Text("点我", color = Color.White)
}

// 定义一个 Composable 控件
@Composable
fun MyTitle() {
    Text(text = "我是标题")
}

// 在别的地方直接调用函数名就能用
@Composable
fun MyPage() {
    MyTitle()
    MyTitle()
    MyTitle()  // 调三次就显示三个标题
}

@Composable
fun GreetingCard(name: String, isVip: Boolean = false) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .background(
                if (isVip) Color(0xFFFFD700) else Color.White,
                RoundedCornerShape(8.dp)
            )
            .padding(12.dp)
    ) {
        Text(
            text = "欢迎，$name",
            fontWeight = if (isVip) FontWeight.Bold else FontWeight.Normal
        )
        if (isVip) {
            Text("👑", modifier = Modifier.padding(start = 8.dp))
        }
    }
}

// 使用
@Composable
fun UserList() {
    Column {
        GreetingCard("张三")
        GreetingCard("李四", isVip = true)
        GreetingCard("王五")
    }
}

// 先 background 再 padding：背景色填满，然后内容区域向内缩
Modifier
    .background(Color.Red)
    .padding(16.dp)

// 先 padding 再 background：内边距也被背景色覆盖
Modifier
    .padding(16.dp)
    .background(Color.Red)

Box(
    modifier = Modifier
        .size(100.dp)
        .clip(RoundedCornerShape(12.dp))
        .background(Color.Blue)
        .border(2.dp, Color.White, RoundedCornerShape(12.dp))
        .clickable { },
    contentAlignment = Alignment.Center
) {
    Text("点我", color = Color.White)
}

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Column {
        Text(text = "当前计数：$count")
        Button(onClick = { count++ }) {
            Text("点我 +1")
        }
    }
}

// 方式 1：委托（推荐，最简洁）
var count by remember { mutableStateOf(0) }
count++  // 直接用

// 方式 2：直接使用 .value
val count = remember { mutableStateOf(0) }
count.value++  // 通过 .value 访问

// 方式 3：解构声明
val (value, setValue) = remember { mutableStateOf(0) }
setValue(value + 1)

@Composable
fun TodoList() {
    val todoList = remember { mutableStateListOf<String>() }
    var inputText by remember { mutableStateOf("") }

    Column {
        Row {
            TextField(
                value = inputText,
                onValueChange = { inputText = it },
                modifier = Modifier.weight(1f)
            )
            Button(onClick = {
                if (inputText.isNotBlank()) {
                    todoList.add(inputText)
                    inputText = ""
                }
            }) {
                Text("添加")
            }
        }
        LazyColumn {
            items(todoList.size) { index ->
                Text(
                    text = "${index + 1}. ${todoList[index]}",
                    modifier = Modifier.padding(8.dp)
                )
            }
            // 列表变化 → 自动刷新！
        }
    }
}

@Composable
fun UserProfile(userId: String) {
    // 当 userId 变化时，重新加载用户数据
    val userData = remember(userId) {
        loadUserData(userId)  // 仅 userId 变化时执行
    }
    Text("用户名：${userData.name}")
}

// remember：屏幕旋转后丢失
var temp by remember { mutableStateOf("") }

// rememberSaveable：屏幕旋转后保留（自动存到 Bundle）
var saved by rememberSaveable { mutableStateOf("") }

// ❌ 不稳定，每次重组都算新对象
data class User(var name: String, var age: Int)

// ✅ 稳定，值不变对象就不变
data class User(val name: String, val age: Int)

@Composable
fun FilteredList(items: List<String>, query: String) {
    // ❌ 每次重组都重新过滤（即使 query 没变）
    val filtered = items.filter { it.contains(query) }

    // ✅ 仅在 items 或 query 变化时重新过滤
    val filtered by remember { derivedStateOf { items.filter { it.contains(query) } } }

    LazyColumn {
        items(filtered) { item -> Text(item) }
    }
}

@Composable
fun HeavyItem(onClick: () -> Unit, isSelected: Boolean) {
    // ⚠️ isSelected 变化 → 整个 HeavyItem 重组
    // 包括 1000 行的复杂 UI
    Box(modifier = Modifier.clickable(onClick = onClick)) {
        // ... 1000 行复杂 UI
        if (isSelected) {
            Border()
        }
    }
}

@Composable
fun HeavyItem(onClick: () -> Unit, isSelected: Boolean) {
    // ✅ 把 isSelected 读解放到单独的 Composable 中
    Box(modifier = Modifier.clickable(onClick = onClick)) {
        // ... 1000 行复杂 UI（不重绘）
        SelectionBorder(isSelected)  // 仅这个函数被重绘
    }
}

@Composable
fun AnalyticsTracker(pageName: String) {
    // ❌ 不要在 Composable 直接做副作用（会在每次重组时执行）
    // FirebaseAnalytics.logEvent("page_view", ...)

    // ✅ 使用 LaunchedEffect，仅 pageName 变化时执行
    LaunchedEffect(pageName) {
        logPageView(pageName)
    }
}

package com.example.myfirstapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.myfirstapp.ui.theme.MyFirstAppTheme

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

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyFirstAppTheme {
        Greeting("Android")
    }
}

@Composable
fun MyScreen() {
    // 每次重组都会执行这里
    val name = remember { "World" } // 只在首次组合时计算

    // 首次进入组合时执行
    DisposableEffect(Unit) {
        println("📌 Entered composition")
        onDispose { println("📌 Left composition") }
    }

    Text("Hello $name")
}

@Composable
fun Counter() {
    var count by remember { mutableIntStateOf(0) }
    // ↑ count 变化会触发重组

    Text("Count: $count")            // 重新执行
    Button(onClick = { count++ }) {  // onClick lambda 不变
        Text("Increment")
    }
}

@Composable
fun Parent(showChild: Boolean) {
    if (showChild) {
        Child()  // showChild = false 时退出组合
    }
}

@Composable
fun LoadUserData(userId: String) {
    var user by remember { mutableStateOf<User?>(null) }

    LaunchedEffect(userId) {
        // userId 变化时：取消旧协程 → 启动新协程
        user = api.fetchUser(userId)
    }

    user?.let { Text(it.name) } ?: CircularProgressIndicator()
}

@Composable
fun ObserveUserStatus(userId: String) {
    DisposableEffect(userId) {
        val observer = object : Observer {
            override fun onChange(status: String) {
                // 更新状态
            }
        }
        api.registerObserver(userId, observer)

        onDispose {
            api.unregisterObserver(userId, observer) // ← 清理！
        }
    }

    // 这里不需要 LaunchedEffect，一次性注册 + 清理即可
}

@Composable
fun AnalyticsScreen(screenName: String) {
    val analytics = LocalAnalytics.current

    SideEffect {
        analytics.logScreenView(screenName)
        // 每次重组后都执行（无 key，无法跳过）
    }
}