Как использовать Jetpack Compose внутри Fragment в Android-приложении на Kotlin?

Правильный способ интеграции Compose во Fragment

Ваша ошибка возникает, потому что ComposeView не может найти LifecycleOwner в момент инициализации. Это типичная проблема при использовании Compose внутри Fragment. Решение — использовать ComposeView программно в методе onCreateView() или правильно настроить жизненный цикл. Вот два проверенных способа.

Способ 1: Программное создание ComposeView (рекомендуется)

Лучший подход — создать ComposeView прямо в коде фрагмента, без XML-разметки. Это гарантирует, что жизненный цикл будет настроен корректно.

class ExampleFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                // Ваш Compose-код
                MaterialTheme {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!", fontSize = 24.sp)
}

Способ 2: Использование ComposeView в XML с правильной инициализацией

Если вам обязательно нужно использовать XML, то нужно убедиться, что ComposeView получает LifecycleOwner из фрагмента. Для этого используйте метод setViewCompositionStrategy().

class ExampleFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_example, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        
        val composeView = view.findViewById<ComposeView>(R.id.compose_view)
        composeView.apply {
            // Указываем стратегию жизненного цикла
            setViewCompositionStrategy(
                ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
            )
            setContent {
                Text("Hello from Compose!")
            }
        }
    }
}

Важные моменты:

• Зависимости: Убедитесь, что в build.gradle (app) подключены все необходимые зависимости Compose. Минимальный набор:

  dependencies {
      implementation "androidx.compose.ui:ui:1.5.4"
      implementation "androidx.compose.material:material:1.5.4"
      implementation "androidx.compose.ui:ui-tooling-preview:1.5.4"
      implementation "androidx.activity:activity-compose:1.8.2"
      implementation "androidx.fragment:fragment-ktx:1.6.2"
  }

• MaterialTheme: Всегда оборачивайте Compose-контент в MaterialTheme или другую тему, чтобы избежать ошибок отрисовки.
• DisposeOnViewTreeLifecycleDestroyed: Эта стратегия автоматически очищает Compose-контент, когда жизненный цикл фрагмента заканчивается. Это предотвращает утечки памяти.
• Миграция: Если вы планируете полностью перейти на Compose, рассмотрите использование FragmentContainerView с Compose-навигацией.

Полный пример с использованием ViewModel

Часто нужно передавать данные из ViewModel в Compose. Вот правильный паттерн:

class ExampleFragment : Fragment() {
    private val viewModel: ExampleViewModel by viewModels()

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                val state by viewModel.uiState.collectAsState()
                MyComposableScreen(state = state, onEvent = viewModel::onEvent)
            }
        }
    }
}

@Composable
fun MyComposableScreen(state: UiState, onEvent: (UiEvent) -> Unit) {
    // Ваш интерфейс
}

Этот подход позволяет постепенно мигрировать старое приложение с Fragments на Compose без полного переписывания кода.

class ExampleFragment : Fragment() {
    private var _binding: FragmentExampleBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentExampleBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        
        // Заменяем обычный TextView на Compose
        binding.composeView.setContent {
            MaterialTheme {
                Surface(modifier = Modifier.fillMaxWidth()) {
                    Column(modifier = Modifier.padding(16.dp)) {
                        Text(
                            text = "Compose внутри Fragment",
                            style = MaterialTheme.typography.h5
                        )
                        Spacer(modifier = Modifier.height(8.dp))
                        Button(onClick = { /* действие */ }) {
                            Text("Нажми меня")
                        }
                    }
                }
            }
        }
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}