如何在 Jetpack Compose 中用 Data Class 中的字段填充 TextView？

Question

所以我参与的这个项目让我第一次使用 Jetpack Compose 创建我的布局。所以我对此很陌生。我有数据类，其中存储了来自 API 的数据。 ViewModel/LiveData 也在使用中。我的问题是如何让 TextView 显示存储在数据模型中的数据？欢迎任何和所有答案。谢谢。

Answer 1

首先，通过viewModel()为您的屏幕创建一个ViewModel。例如

val myViewModel: MyViewModel = viewModel()

或

val myViewModel: MyViewModel = hiltViewModel()

对于 DaggerHilt。（如果您无法访问这些功能，请尝试为 viewModel() 添加 androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1 并为 hiltViewModel() 添加 androidx.hilt:hilt-navigation-compose:1.0.0 — 请注意这些版本可能已过时）。

接下来，将您的存储库或用例传递或注入到 ViewModel 的构造函数中，并创建一个状态变量来保存和更新您的文本。

@HiltViewModel
class MyViewModel @Inject constructor(
  private val myRepository: MyRepository
): ViewModel() {

  var text by mutableStateOf("")
    private set

  fun setNewText(newText: String) {
    text = newText
  }

  init {
    viewModelScope.launch { // in case it's a suspend function
      setNewText(myRepository.getDataClass().getText())
    }
  }
}

（对于mutableStateOf getter和setter委托，需要导入androidx.compose.runtime.getValue和androidx.compose.runtime.setValue）。

最后，在您的 Composable 函数中创建 Text，调用 ViewModel 并使用它来更新您新创建的文本。

@Composable
fun MyScreen(myViewModel: MyViewModel = hiltViewModel()) {
  Text(
    text = myViewModel.text,
    modifier = Modifier.fillMaxWidth() // modify it as you wish
  )
}

如果这不符合您的需要，请提供有关您的情况的更多详细信息。此外，如果您对我向您展示的内容有任何疑问，我建议您查看 the documentation。

Answer 2

我不知道你是从哪里找到你描述的方法的，但你需要的是 state-hoisting。

可以找到基本原则 here。这就是它的工作原理。

假设您将变量存储在视图模型中，

var text by mutableStateOf("Initial Value Here") // Use 'by' to avoid writing '.value' every time

现在，您需要在您的 viewModel 中创建一个方法来更新此变量——任何希望修改此变量的代码都可以调用该方法。

var text by mutableStateOf("Initial Value Here")
fun updateText(newText: String){
  text = newText
}

现在，在您的可组合项中，创建两个参数——一个用于获取值，另一个用于设置它。

@Composable
fun MyTextView(
 text: Int,
 onTextUpdate: (String) -> Unit // It accepts 'String' and returns 'Unit', like 'void' in java
){

 TextField(
    value = text, //Use the Value Here as a normal value,
    onValueChange = onTextUpdate // Pass this as the updating function
 )

}

在调用站点，传递 viewModel 的参数以连接 state-hoisting 节点，就像这样。

setContent{
  val viewmodel = ... //Initialize ViewModel Here
  MyTextField(viewmodel.text, viewmodel::updateText)
}

差不多就是这样。您只需要一个变量并进行修改即可为您完成所有繁重的工作——无需像上面提到的那样处理多个变量。

考虑参加 the codelabs

如何在 Jetpack Compose 中用 Data Class 中的字段填充 TextView？

How to fill in the TextViews with a field in a Data Class in Jetpack Compose?

android

kotlin

android-jetpack-compose

android-navigation