使用自定义视图与Jetpack Compose

Question

假设我正在使用一个旨在提供一些UI小部件的库。假设这个库提供了一个名为“FancyButton”的按钮小部件。

另一方面，我使用的是Android Studio 4创建的新项目，它允许我创建一个带有“Empty Compose Activity”（空Compose活动）的新项目。

问题是：我应该如何将这个“FancyButton”添加到视图堆栈中？这可能吗？还是在Jetpack Compose中，我只能使用专门为Jetpack Compose开发的组件。在这种情况下，“据我所知”，我只能使用Android标准组件（Text、MaterialTheme等）。

如果我尝试使用以下内容：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        MaterialTheme {
            Greeting("Android")
            FancyButton(context, "Some text")
        }
    }
}

然后我遇到了这个错误：

e: 以下类的超类型无法解析。请确保您在类路径中具有所需的依赖项。

- Joaquin Iurchuk

---

我假设FancyButton是一个Android的View而不是Compose组件？ - Ryan M

Answer 1

目前（截至0.1.0-dev04），还没有一个好的解决方案。将来，您可以简单地调用它：FancyButton("一些文本")（不需要context）。

您可以在Compose代码这里看到演示效果。

- Ryan M

---

不错，Ryan！谢谢。你知道一些预计的日期吗？看起来很棒。在我们公司，我们开发了一个用于UI的开源库，我们期待着能够与Jetpack Compose一起使用 :) - Joaquin Iurchuk

很高兴你期待它的到来！不幸的是，没有预计的日期，但考虑到它已经合并了，我希望在下一个版本中发布，除非需要将其撤回（也就是说：不能保证，但很可能）。 - Ryan M

Answer 2

alpha 06更新

现在可以在组合中导入Android View实例。

使用ContextAmbient.current作为View的context参数。

Column(modifier = Modifier.padding(16.dp)) {

    // CustomView using Object
    MyCustomView(context = ContextAmbient.current)

    // If the state updates
    AndroidView(viewBlock = ::CustomView, modifier = modifier) { customView ->
        // Modify the custom view
    }

    // Using xml resource
    AndroidView(resId = R.layout.view_demo)
}

- Mahdi-Malv

Answer 3

您可以将自定义视图包装在AndroidView composable中：

@Composable
fun RegularTextView() {
    AndroidView(
        factory = { context ->
            TextView(context).apply {
                text = "RegularTextView"
                textSize = 34.dp.value
            }
        },
    )
}

以下是如何在重新组合期间使用更新参数来更新自定义视图的方法：

@Composable
fun RegularTextView() {
    var string by remember {
        mutableStateOf("RegularTextView")
    }
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        AndroidView(
            factory = { context ->
                TextView(context).apply {
                    textSize = 34.dp.value
                }
            },
            update = { textView ->
                textView.text = string
            }
        )
        Spacer(modifier = Modifier.height(8.dp))
        Button(
            onClick = {
                string = "Button clicked"
            },
        ) {
            Text(text = "Update text")
        }
    }
}

- Raed Mughaus

Answer 4

@Composable

fun ButtonType1(text: String,  onClick: () -> Unit) 

{

   Button (
    modifier=Modifier.fillMaxWidth().height(50.dp),
    onClick = onClick,
    shape = RoundedCornerShape(5.dp),
    border = BorderStroke(3.dp, colorResource(id = R.color.colorPrimaryDark)),
    colors = ButtonDefaults.buttonColors(contentColor = Color.White, backgroundColor = colorResource(id = R.color.colorPrimaryDark))
    )
    {
        Text(text = text , color = colorResource(id = R.color.white),
        fontFamily = montserrat,
        fontWeight = FontWeight.Normal,
        fontSize = 15.sp
    )
    }
}

- ishant sharma