Compose Multiplatform vs SwiftUI 对比

// Compose Multiplatform - commonMain:共享的个人资料卡片
// (build.gradle.kts: kotlin { androidTarget(); iosArm64(); iosSimulatorArm64() })
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage

@Composable
fun ProfileCard(user: User, modifier: Modifier = Modifier) {
    var isFollowing by remember { mutableStateOf(false) }

    Row(
        modifier = modifier.fillMaxWidth().padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        AsyncImage(
            model = user.avatarUrl,
            contentDescription = user.name,
            modifier = Modifier.size(64.dp).clip(CircleShape)
        )
        Spacer(Modifier.width(12.dp))
        Column(modifier = Modifier.weight(1f)) {
            Text(user.name, style = MaterialTheme.typography.titleMedium)
            Text(user.title, style = MaterialTheme.typography.bodySmall)
        }
        OutlinedButton(onClick = { isFollowing = !isFollowing }) {
            Text(if (isFollowing) "取消关注" else "关注")
        }
    }
}

// iosMain:将 CMP 视图导出为 UIViewController
fun MainViewController() = ComposeUIViewController { ProfileCard(user = sampleUser) }

// SwiftUI - 个人资料卡片
import SwiftUI

struct ProfileCard: View {
    let user: User
    @State private var isFollowing = false

    var body: some View {
        HStack(spacing: 12) {
            AsyncImage(url: user.avatarURL) { image in
                image.resizable().scaledToFill()
            } placeholder: {
                ProgressView()
            }
            .frame(width: 64, height: 64)
            .clipShape(Circle())

            VStack(alignment: .leading) {
                Text(user.name)
                    .font(.headline)
                Text(user.title)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }

            Spacer()

            Button(isFollowing ? "取消关注" : "关注") {
                withAnimation(.spring(response: 0.3)) {
                    isFollowing.toggle()
                }
            }
            .buttonStyle(.bordered)
        }
        .padding()
    }
}

#Preview {
    ProfileCard(user: .sample)
}