Kotlin Multiplatform ハイブリッドモード：Compose Multiplatform が SwiftUI や Jetpack Compose と融合

// Api
interface Api {
    suspend fun getUserProfile():User
}

class ApiImpl(private val client:HttpClient) :Api {
    override suspend fun getUserProfile():User {
        return client.get {
            url {
                protocol = URLProtocol.HTTPS
                host = "yourdomain.com"
                path("yourpath")
            }
        }.safeBody()
    }
}

// Repository 
interface UserRepository {
    suspend fun getUserProfile():Flow<User>
}

class UserRepositoryImpl(private val api:Api) :UserRepository {
    override suspend fun getUserProfile():Flow<User> {
        return flowOf(api.getUserProfile())
    }
}

// ViewModel
class ProfileViewModel(
    private val repository:UserRepository,
) :ViewModel() {

    private val _uiState = MutableStateFlow(ProfileUiState())
    val uiState:StateFlow<ProfileUiState> = _uiState.asStateFlow()

    @OptIn(ExperimentalCoroutinesApi::class)
    fun onAction(action:ProfileScreenAction) {
        when (action) {
            is ProfileScreenAction.OnInit -> {
                viewModelScope.launch {
                    // Set loading state to true
                    _uiState.update { it.copy(isLoading = true) }
                    
                    // Retrieve authorization info and then fetch user profile data
                    repository.getAuthorizationInfo()
                        .flatMapLatest { authInfo ->
                            // If authInfo exists, call getUserProfile() to get user data; otherwise, emit null
                            if (authInfo != null) {
                                repository.getUserProfile()
                            } else {
                                flowOf(null)
                            }
                        }
                        // Catch any exceptions in the Flow chain
                        .catch { e ->
                            e.printStackTrace()
                        }
                        // Collect the user profile data and update the UI state
                        .collect { userProfile ->
                            _uiState.update { state ->
                                state.copy(
                                    isLoading = false,
                                    data = userProfile,
                                    errorMessage = if (userProfile == null) "User profile data is null" else null
                                )
                            }
                        }
                }
            }
        }
    }
}

@Composable
fun ProfileScreen(
    viewModel:ProfileViewModel = koinViewModel()
) {
    val uiState = viewModel.uiState.collectAsState().value

    LaunchedEffect(Unit) { viewModel.onAction(ProfileScreenAction.OnInit) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .background(White)
            .padding(16.dp)
    ) {
        // Profile header with image and user details
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .background(White, shape = RoundedCornerShape(16.dp))
                .padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            AsyncImage(
                model = uiState.data.profileImage,
                contentDescription = "Profile Image",
                modifier = Modifier
                    .size(64.dp)
                    .clip(CircleShape)
            )
            Spacer(modifier = Modifier.width(16.dp))
            Column {
                Text(
                    text = uiState.data.userName,
                    fontSize = 16.sp,
                    color = Color.Black
                )
                Text(
                    text = uiState.data.email,
                    fontSize = 14.sp,
                    color = Color.Blue.copy(alpha = 0.6f)
                )
            }
        }
        Spacer(modifier = Modifier.height(16.dp))
        MenuLabel(label = "Account Settings")
        ....
    }
}

@Composable
expect fun PlatformButton(
    modifier:Modifier = Modifier,
    label:String,
    onClick: () -> Unit
)

@Composable
actual fun PlatformButton(
    modifier:Modifier,
    label:String,
    onClick: () -> Unit
) {
    Button(
        onClick = onClick,
        modifier = modifier
    ) {
        Text(text = label)
    }
}

@Composable
actual fun PlatformButton(
    modifier:Modifier,
    label:String,
    onClick: () -> Unit
) {
    UIKitView(
        modifier = modifier,
        factory = {
            // Create a native UIButton instance.
            val button = UIButton.buttonWithType(buttonType = 0)
            button.setTitle(label, forState = UIControlStateNormal)
            // Style the button
            ...
            
            // Create a target object to handle button clicks.
            val target = object :NSObject() {
                @ObjCAction
                fun onButtonClicked() {
                    onClick()
                }
            }
            // Add the target with an action selector.
            button.addTarget(
                target = target,
                action = NSSelectorFromString("onButtonClicked"),
                forControlEvents = UIControlEventTouchUpInside
            )
            button
        }
    )
}

import SwiftUI
import shared  // Import the shared KMP framework

struct ComposeContainerView:UIViewControllerRepresentable {
    let user:User

    func makeUIViewController(context:Context) -> UIViewController {
        // Use the Compose wrapper to create the UIViewController
        return AppComposeUI().createProfileVC(user)
    }

    func updateUIViewController(_ uiViewController:UIViewController, context:Context) { }
}

struct ContentView:View {
    let user:User
    
    var body: some View {
        VStack {
            Text("Native SwiftUI Header")
                .font(.headline)
                .padding()
            // Embed the Compose UI inside SwiftUI.
            ComposeContainerView(user: user)
                .frame(height:250)
            List {
                Text("Native SwiftUI Item 1")
                Text("Native SwiftUI Item 2")
            }
        }
    }
}

import SwiftUI
struct MySwiftUIView:View {
    let user:User
    var body: some View {
        VStack {
            Text("Native SwiftUI Content")
                .font(.body)
            Text("Welcome, \(user.firstName)")
        }
        .padding()
        .background(Color.gray.opacity(0.2))
        .cornerRadius(8)
    }
}

@Composable
fun ComposeWithNativeUI(user:User) {
    Column {
        // Shared Compose UI header.
        ProfileHeader(user = user)
        Spacer(modifier = Modifier.height(16.dp))
        // Embed a native iOS view using UIKitView.
        UIKitView(factory = {
            // Create a UIHostingController with a SwiftUI view.
            val hostingController = UIHostingController(rootView = MySwiftUIView(user = user))
            hostingController.view
        }, modifier = Modifier.fillMaxWidth().height(100.dp))
    }
}