Android Jetpack Compose - 动态布局

Question

背景

我目前正在研究创建布局的选项，在项目开发期间，我希望可能将 UI 迁移到 Jetpack Compose 或发布后，具体取决于库的稳定性/灵活性。

项目的一部分将使用服务器驱动的 UI。然而，用户界面的变化并不能提前知道，并且将是动态的（服务器和数据驱动的）。

我在处理业务逻辑和表示层方面没有问题，但是当涉及到 UI 时，我需要根据表示数据和视图模型动态构建 UI。

TL;DR

考虑到这一点，是否可以使用 Jetpack Compose 创建动态布局（不要与动态布局数据混淆）？

作为一个最小的例子，使用传统的View 和ViewGroup 这很容易实现：

class DynamicViewActivity : AppCompatActivity() {
    
    private lateinit var root : LinearLayout

    override fun onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) {
        super.onCreate(savedInstanceState, persistentState)

        // setup view group container
        root = LinearLayout(this)
        root.orientation = LinearLayout.VERTICAL
        root.layoutParams = LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.MATCH_PARENT, 
            LinearLayout.LayoutParams.MATCH_PARENT)
        
        setContentView(root, LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.MATCH_PARENT))
        
        // some lookup to create a dynamic layout
        val children : List<Pair<View, LinearLayout.LayoutParams>> = getChildren(someArgs)
        
        // add child views
        children.forEach { (view, params) -> root.addView(view, params) }
    }
    
    fun <T : View> addViewToRoot(view: T, params: LinearLayout.LayoutParams) {
        root.addView(view, params)
    }

    fun  removeFromRoot(viewTag : String) {
        root.findViewWithTag<View>(viewTag)?.let(root::removeView)
    }
}

您如何使用 Jetpack Compose 做同样的事情？

更新

根据@CommonsWare 的回答，我在 Compose 中实现了 UI。由于我的实际代码有一个非常薄的 UI 层，所有侦听器和事件都使用单向和双向数据绑定，并且我的项目中已经解决了答案中的“未知数”，因此只需交换 UI 就非常容易。

话虽如此，我很快意识到像 ScrollView 和 View::tooltipText 这样简单的东西在 Compose 中还不存在。与 xml 布局/资源相比，基于运行时配置（屏幕方向/屏幕桶大小等）的布局也没有简单的方法。这对我来说意味着，将数据绑定与所有丰富的 View 框架和库一起使用仍然是更好的解决方案。

期待 Compose 库的更新，也许在未来的某个时间点。

Answer 1

考虑到这一点，是否可以使用 Jetpack Compose 创建动态布局（不要与动态布局数据混淆）？

当然。 Compose 是所有功能。您可以解析数据并根据该数据调用函数，无论该数据是“填充此预定义的 UI 结构”还是该数据是“定义 UI 结构”。

例如，假设您的服务器有一个返回以下 JSON 的端点：

[
  {
    "element": "label",
    "attributes": {
      // values omitted for brevity
    }
  },
  {
    "element": "field",
    "attributes": {
      // values omitted for brevity
    }
  },
  // additional elements omitted for brevity
]

您的工作是根据该 JSON 组装一个 UI。 label 元素应该是固定文本，field 元素应该是文本输入字段，等等各种类型。 attributes 对象包含因元素而异的详细信息。

所以，你解析它。假设您最终得到List<UiElement>，其中UiElement 是一个接口或抽象类或其他东西，其子类型基于支持的元素（例如，LabelElement、FieldElement）。现在你的工作是基于 List<UiElement> 构建一个 UI。

---

在View-space 中，您可以有一个函数根据提供的UiElement 创建View：

fun buildView(element: UiElement) = when (element) {
    is LabelElement -> buildTextView(element)
    is FieldElement -> buildEditText(element)
    else -> TODO("add other element cases here")
}

buildTextView() 将组装一个TextView，无论是从布局膨胀还是调用构造函数。 buildEditText() 将组装一个 EditText，无论是从布局膨胀还是调用构造函数。等等。这些函数中的每一个都负责从attributes 中获取值并对它们做一些有用的事情，例如将文本设置在TextView 中或将提示设置在EditText 中。

在您问题中的代码 sn-p 中，而不是您的 getChildren()-and-loop 方法，您将遍历 List<UiElement> 并为列表中的每个 UiElement 调用 buildView()，并添加结果到你的LinearLayout。

---

Compose 等效项是这样的：

@Composable
fun buildNode(element: UiElement) {
    when (element) {
        is LabelElement -> buildTextNode(element)
        is FieldElement -> buildTextFieldNode(element)
        else -> TODO("add other element cases here")
    }
}

IOW，它几乎是一样的。主要区别在于：

• @Composable 注释（buildTextNode() 和 buildTextFieldNode() 也需要）
• 无需返回任何内容，因为可组合项会自动添加到父项中
• buildTextNode() 和 buildTextFieldNode() 中的详细信息会让人想起 buildTextView() 和 buildEditText()，但基于可组合项

你的活动应该是这样的：

Column {
    uiElements.forEach { buildNode(it) }
}

...代替您的LinearLayout。

（实际上，这两个示例都需要一个滚动容器，但我们在这里也将忽略它）

---

服务器定义的 UI 的所有复杂性都超出了您的代码示例的范围：

• 如何解析服务器响应？
• 如何将该服务器响应映射到表示所需 UI 的对象模型中？
• 如何让每个元素的 UI 位发挥作用？
• 如何处理事件监听器？
• 更一般地说，我们在做什么来响应用户在此 UI 上的输入？
• 我们将如何根据需要重新生成此 UI（对于视图，基于配置更改；对于可组合，基于重组）？
• 等等

在基于 View 的 UI 和基于 Compose 的 UI（例如 JSON 解析）之间，其中一些是相同的。其中一些将大不相同，例如处理用户输入。

但是“解析服务器响应并基于该响应创建 UI 元素”的一般方法、视图和可组合组件同样可以应对挑战。特别是，在您的问题中的代码示例级别，视图和可组合项都可以处理您的高级场景。魔鬼在细节中。