SwiftUI vs Jetpack Compose 全面对比

# SwiftUI vs Jetpack Compose 全面对比 ## 声明式语法对比 ### SwiftUI ```swift struct ProfileView: View { @StateObject private var viewModel = ProfileViewModel() @State private var isEditing = false var body: some View { NavigationStack { ScrollView { VStack(spacing: 16) { AsyncImage(url: URL(string: viewModel.avatarURL)) { image in image.resizable().scaledToFill() } placeholder: { ProgressView() } .frame(width: 100, height: 100) .clipShape(Circle()) Text(viewModel.name) .font(.title2) .fontWeight(.bold) Text(viewModel.bio) .foregroundStyle(.secondary) .multilineTextAlignment(.center) LazyVGrid(columns: [GridItem(.adaptive(minimum: 150))]) { ForEach(viewModel.stats) { stat in StatCard(stat: stat) } } } .padding() } .navigationTitle("Profile") .toolbar { Button(isEditing ? "Done" : "Edit") { isEditing.toggle() } } } } } ``` ### Jetpack Compose ```kotlin @Composable fun ProfileScreen(viewModel: ProfileViewModel = viewModel()) { val uiState by viewModel.uiState.collectAsStateWithLifecycle() var isEditing by remember { mutableStateOf(false) } Scaffold( topBar = { TopAppBar( title = { Text("Profile") }, actions = { TextButton(onClick = { isEditing = !isEditing }) { Text(if (isEditing) "Done" else "Edit") } } ) } ) { padding -> LazyColumn( modifier = Modifier.padding(padding).fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(16.dp) ) { item { AsyncImage( model = uiState.avatarURL, contentDescription = "Avatar", modifier = Modifier.size(100.dp).clip(CircleShape), contentScale = ContentScale.Crop ) } item { Text(uiState.name, style = MaterialTheme.typography.titleLarge) Text(uiState.bio, color = MaterialTheme.colorScheme.onSurfaceVariant) } } } } ``` ## 状态管理对比 | 特性 | SwiftUI | Jetpack Compose | |------|---------|----------------| | 局部状态 | @State | remember / mutableStateOf | | 观察对象 | @StateObject / @ObservedObject | collectAsState | | 全局状态 | @EnvironmentObject | CompositionLocal | | 持久化 | @AppStorage | DataStore | ## 动画系统 SwiftUI 的 `withAnimation` 和 `.animation()` 修饰符语法更简洁；Compose 的 `AnimatedVisibility` 和 `animateXxxAsState` 则更灵活可控。 两个框架都已相当成熟，选择取决于目标平台。如需跨平台，Kotlin Multiplatform + Compose Multiplatform 是目前最有潜力的方案。