AndroidCompose学习路线图

// 传统命令式UI
textView.text = "Hello"
textView.visibility = View.VISIBLE

// Compose声明式UI
@Composable
fun MyText(visible: Boolean) {
    if (visible) {
        Text("Hello")
    }
}

// 🔥 必须熟练掌握的组件
Text("Hello Compose")                    // 文本显示
Button(onClick = { }) { Text("Click") }  // 按钮交互
Image(painter = painterResource(id = R.drawable.image), contentDescription = null) // 图片显示
Box { /* 容器组件 */ }                   // 堆叠布局
Column { /* 垂直布局 */ }                // 垂直排列
Row { /* 水平布局 */ }                   // 水平排列

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    Text("Item 1")
    Text("Item 2")
}

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    Text("Centered Text")
}

// 🔥 最常用的修饰符
.padding(16.dp)           // 内边距
.size(100.dp)             // 固定尺寸
.fillMaxWidth()           // 填充宽度
.fillMaxHeight()          // 填充高度
.weight(1f)               // 权重分配

// 🔥 核心状态管理模式
var text by remember { mutableStateOf("") }
var count by remember { mutableStateOf(0) }

// 状态提升 - 重要概念
@Composable
fun ParentComponent() {
    var childState by remember { mutableStateOf("") }
    ChildComponent(
        state = childState,
        onStateChange = { childState = it }
    )
}

ConstraintLayout {
    val (text, button) = createRefs()
    
    Text(
        "Hello",
        modifier = Modifier.constrainAs(text) {
            top.linkTo(parent.top)
            start.linkTo(parent.start)
        }
    )
    
    Button(
        onClick = { },
        modifier = Modifier.constrainAs(button) {
            top.linkTo(text.bottom, margin = 16.dp)
            start.linkTo(parent.start)
        }
    ) {
        Text("Click")
    }
}

// 🔥 列表性能优化 - 必须掌握
LazyColumn {
    items(items) { item ->
        ListItem(item = item)
    }
}

// 🔥 主题配置 - 重要
@Composable
fun MyApp() {
    MaterialTheme(
        colors = lightColors(
            primary = Color.Blue,
            secondary = Color.Green,
            surface = Color.White
        ),
        typography = Typography(
            h1 = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Bold),
            body1 = TextStyle(fontSize = 16.sp)
        )
    ) {
        // 应用内容
    }
}

// 🔥 基础动画 - 必须掌握
var expanded by remember { mutableStateOf(false) }
val animatedSize by animateDpAsState(
    targetValue = if (expanded) 200.dp else 100.dp
)

// 高级动画
val transition = updateTransition(expanded)
val backgroundColor by transition.animateColor { isExpanded ->
    if (isExpanded) Color.Green else Color.Red
}

// 🔥 手势处理 - 重要
var offset by remember { mutableStateOf(Offset.Zero) }
val state = rememberDraggableState { delta ->
    offset += Offset(delta, 0f)
}

Box(
    modifier = Modifier
        .offset { IntOffset(offset.x.roundToInt(), offset.y.roundToInt()) }
        .draggable(state = state, orientation = Orientation.Horizontal)
) {
    Text("Draggable Text")
}

// 🔥 状态提升模式 - 必须深入理解
@Composable
fun ParentComponent() {
    var sharedState by remember { mutableStateOf("") }
    
    Column {
        ChildComponent1(
            state = sharedState,
            onStateChange = { sharedState = it }
        )
        ChildComponent2(
            state = sharedState,
            onStateChange = { sharedState = it }
        )
    }
}

// 🔥 组合模式 - 重要
@Composable
fun MyScreen(
    viewModel: MyViewModel = hiltViewModel()
) {
    val uiState by viewModel.uiState.collectAsState()
    
    when (uiState) {
        is Loading -> LoadingScreen()
        is Success -> SuccessScreen(uiState.data)
        is Error -> ErrorScreen(uiState.message)
    }
}

// 🔥 Hilt集成 - 重要
@HiltViewModel
class MyViewModel @Inject constructor(
    private val repository: MyRepository
) : ViewModel() {
    // ViewModel实现
}

@Composable
fun MyScreen(
    viewModel: MyViewModel = hiltViewModel()
) {
    // UI实现
}

// 🔥 Compose导航 - 重要
val navController = rememberNavController()
NavHost(navController, startDestination = "home") {
    composable("home") { HomeScreen() }
    composable("detail/{id}") { backStackEntry ->
        DetailScreen(id = backStackEntry.arguments?.getString("id"))
    }
}

// 🔥 重组优化 - 核心技能
// 使用remember避免不必要的重组
val expensiveValue = remember(key1, key2) {
    // 昂贵的计算
}

// 使用derivedStateOf优化派生状态
val derivedState by remember {
    derivedStateOf {
        // 基于其他状态的计算
    }
}

// 使用LaunchedEffect处理副作用
LaunchedEffect(key1, key2) {
    // 副作用处理
}

// 🔥 自定义组件 - 重要
@Composable
fun CustomButton(
    text: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true
) {
    Button(
        onClick = onClick,
        modifier = modifier,
        enabled = enabled
    ) {
        Text(text)
    }
}

// 🔥 UI测试 - 重要
@ComposeTest
fun testMyComponent() {
    composeTestRule.setContent {
        MyComponent()
    }
    
    composeTestRule.onNodeWithText("Hello").assertIsDisplayed()
    composeTestRule.onNodeWithText("Click").performClick()
}