如何在 1.0.0-beta01 的 Compose 块中添加自定义视图（从 View 扩展）

Question

我试图通过函数将自定义视图组件包含到 Compose 部分中AndroidView(viewBlock = { customView})，这适用于以前的版本，但现在版本1.0.0-beta01不起作用，我找不到新的方法来做到这一点。

代码如下所示：

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View {
    val view = inflater.inflate(R.layout.fragment_recipe_lis, container, false)
    view.findViewById<ComposeView>(R.id.compose_view).setContent {
        Text("This is a compose view inside a layout")
        Spacer(modifier = Modifier.padding(10.dp))
        CircularProgressIndicator()
        Spacer(modifier = Modifier.padding(10.dp))
        Text(text = "Neat")
        Spacer(modifier = Modifier.padding(10.dp))

        val customView = HorizontalDottedProgress(LocalContext.current)
        AndroidView(viewBlock = { customView}) // Error here with the function definition
    }
    return view
}

也许你们当中有人知道。谢谢。

Answer 1

你必须传递一个工厂而不是视图的实例

AndroidView(factory = { HorizontalDottedProgress(it) })

或者

AndroidView(::HorizontalDottedProgress)

如果您需要配置视图，请在尾随 lambda 中进行

AndroidView(::HorizontalDottedProgress) { customView ->
    customView.doSomething()
}

阅读文档中的更多内容

Answer 2

构造1.0.0-beta02函数AndroidView需要一个factory参数：

组成一个从 获得的 Android 视图factory。该factory块将被调用一次以获得要View组合的，并且也保证在 UI 线程上被调用。

例子：

    //option 1
    val customView = TextView(LocalContext.current).apply { text = "New Text View" }
    AndroidView(factory = { customView })

    //option 2
    AndroidView({ context -> TextView(context).apply { text = "This is a TextView" } })

    //Option 3
    var size by remember { mutableStateOf(100) }
    AndroidView(::TextView,
        Modifier
            .background(Color.Blue)) { view ->
        view.layoutParams = ViewGroup.LayoutParams(size, size)
        view.apply { text = "This is the 3rd TextView" }  }
    }

在您的情况下，您可以只使用其中之一：

    val customView = HorizontalDottedProgress(LocalContext.current)
    AndroidView(factory = { customView }) 

    AndroidView({ context -> HorizontalDottedProgress(context).apply { /* ... */ } })

    AndroidView(::HorizontalDottedProgress) { view ->
        view.apply { /*..*/ }
    }