android compose混合开发 fragment中使用compose

环境:将项目升级为7.0+gradle插件也需要升级为7.0+在对应的app模块中开启compose添加一些compose常用依赖在fragment中使用compose另外一种写法 dialog如何使用:

system: macOSandroid studio: 4.2gradle:7.0.3distributionUrl:7.1.1-binjdk:11kotlin_version:1.4.23

注意:compose是基于kotlin的,所以kotlin的环境就不过多介绍了…

buildscript {
	dependencies {
        classpath 'com.android.tools.build:gradle:7.0.3'
        // classpath 'com.android.tools.build:gradle:4.1.3'
	}
}

distributionbase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStorebase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
# distributionUrl=https://services.gradle.org/distributions/gradle-6.5-bin.zip
distributionUrl=https://services.gradle.org/distributions/gradle-7.1.1-bin.zip

android {
	defaultConfig{...}

	// 启用 JetPack Compose
    buildFeatures {
        compose = true
    }
	// 设置kotlin和java虚拟机保持一致
	// java
	compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    // kotlin
    kotlinOptions {
        jvmTarget = "1.8"
    }
}

implementation 'androidx.activity:activity-compose:1.3.1'
implementation 'androidx.compose.material:material:1.0.1'
implementation 'androidx.compose.animation:animation:1.0.1'
implementation 'androidx.compose.ui:ui-tooling:1.0.1'
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'

注意,appcompat版本必须>1.3 否则会提示:

Jetpack Compose: java.lang.IllegalStateException: ViewTreeLifecycleOwner not found from DecorView

原因:工程的 appcompat 版本太低，找不到ViewTreeLifecycleOwner扩展方法

implementation 'androidx.appcompat:appcompat:1.3.0'

详情参考地址

这样基本配置信息就完成啦

class MyFragment : Fragment() {

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

    @Composable
    fun MyTest() {
        Text(text = "hello compose")
    }
}

ok,大功告成!

class MyDialogFragment : DialogFragment() {

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

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val container: ComposeView = view.findViewById(R.id.compose_in_android_view)
        container.setContent {
            DemoDialogCompose()
        }
    }
}

@Composable
@Preview
fun DemoDialogCompose() {
    val context = LocalContext.current
    Column(
        modifier = Modifier
            .background(color = Color.White)
            .padding(start = 16.dp, end = 16.dp),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.Start
    ) {
        Text(
            text = "这是一个弹框",
            fontSize = 20.sp,
            color = Color(
                ContextCompat.getColor(context, android.R.color.holo_blue_light)
            )
        )
        Text(
            text = "这是compose的一个弹框",
            fontSize = 16.sp,
            color = Color(
                ContextCompat.getColor(context, android.R.color.darker_gray)
            )
        )
    }
}

dialog_demo_compose.xml

class MyFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
//                MyTest()
                MyDialogFragment().show(childFragmentManager,"tag")
            }
        }
    }
    @Composable
    fun MyTest() {
        Text(text = "hello compose")
    }
}

来看看效果: