Compose记录之二：项目使用Compose的方式

编程 kotlin
1

一、 整个页面使用Compose (已封装好基类)

1. Activity

    package com.gtastart.ui.base

    import android.os.Bundle
    import android.view.LayoutInflater
    import android.view.View
    import android.view.ViewGroup
    import androidx.compose.runtime.Composable
    import androidx.compose.ui.platform.ComposeView
    import androidx.fragment.app.Fragment

    abstract class BaseComposeFragment : Fragment() {

        protected lateinit var composeView: ComposeView

        override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
        ): View? {
            composeView = ComposeView(requireContext())
            composeView.setContent {
                setContent()
            }
            return composeView
        }

        @Composable
        abstract fun setContent()
    }

2. Fragment

abstract class BaseComposeFragment : Fragment() {

    protected lateinit var composeView: ComposeView

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        composeView = ComposeView(requireContext())
        composeView.setContent {
            setContent()
        }
        return composeView
    }

    @Composable
    abstract fun setContent()
}

3. Adapter (一般不需要，仅用于从View到Compose过渡)

abstract class BaseComposeListAdapter<T: Any>(var list: List<T> = emptyList()) : BaseQuickAdapter<T, BaseComposeListAdapter.BaseViewHolder>(list) {

    class BaseViewHolder (
        val composeView: ComposeView
    ) : RecyclerView.ViewHolder(composeView.rootView)

    override fun onCreateViewHolder(
        context: Context,
        parent: ViewGroup,
        viewType: Int
    ): BaseViewHolder = BaseViewHolder(ComposeView(context))

    override fun onBindViewHolder(
        holder: BaseViewHolder,
        position: Int,
        item: T?
    ) {
        holder.composeView.setContent {
            setContent(item)
        }
    }

    @Composable
    abstract fun setContent(item: T?)

}

二、xml中嵌套使用Compose

1. 在xml中引入Compose

<androidx.compose.ui.platform.ComposeView
                android:id="@+id/compose_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

2. 在ComposeView中添加Compose控件

composeView.setContent {
    MaterialTheme {
        PlantName("Apple")
    }
}