当创建Android Jetpack Compose AndroidView的参数发生变化时,我如何才能将其替换



我有一个应用程序,它显示了封装在AndroidView中的几个不同视图。在下面要重现的简单示例中,这些只是TextView实例。问题是,更改文本(在这种情况下,通过三个不同的值循环(似乎不会更新应用程序显示的内容。

sealed class AppView
data class ShowSomeText(val text: String) : AppView()
data class SomeOtherState(val data: Any?) : AppView()
data class ShowSomeText2(val text: String) : AppView()
class AppViewModel : ViewModel() {
var currentView = MutableLiveData<AppView>(ShowSomeText("original text"))
var currentViewWorkaround = MutableLiveData<AppView>(ShowSomeText("original text"))

private val textRing = arrayOf("one", "two", "three")
private var textRingPosition = 0
fun incrementTextState() {
val nextState = ShowSomeText(textRing[textRingPosition])
currentView.postValue(nextState)
val nextStateWorkaround = when(currentViewWorkaround.value) {
is ShowSomeText -> ShowSomeText2(textRing[textRingPosition])
else -> ShowSomeText(textRing[textRingPosition])
}
currentViewWorkaround.postValue(nextStateWorkaround)
textRingPosition = (textRingPosition + 1) % textRing.size
}
}
class MainActivity : AppCompatActivity() {
private val viewModel = AppViewModel()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ViewContainer(viewModel)
}
}
}
@Composable
fun ViewContainer(viewModel: AppViewModel) {
// Add this to gradle.build for the observeAsState function:
//     implementation "androidx.compose.runtime:runtime-livedata:$compose_version"
val currentView: AppView by viewModel.currentView.observeAsState(ShowSomeText("starting text"))
val currentViewWorkaround: AppView by viewModel.currentViewWorkaround.observeAsState(ShowSomeText("starting text"))
Column {
Button(onClick = viewModel::incrementTextState) {
Text(
text = "tap to change",
style = TextStyle(fontSize = 12.em)
)
}
Text("Compose Text")
when (currentView) {
is ShowSomeText -> createComposeTextView((currentView as ShowSomeText).text)
is SomeOtherState -> Text("the other state")
}
Text("AndroidView wrapping TextView")
when (currentView) {
is ShowSomeText -> createAndroidViewForTextView((currentView as ShowSomeText).text)
is SomeOtherState -> Text("the other state")
}
Text("AndroidView wrapping TextView with 2-state workaround")
when (currentViewWorkaround) {
is ShowSomeText -> createAndroidViewForTextView((currentViewWorkaround as ShowSomeText).text)
is ShowSomeText2 -> createAndroidViewForTextView((currentViewWorkaround as ShowSomeText2).text)
is SomeOtherState -> Text("the other state")
}
}
}
@Composable
fun createAndroidViewForTextView(text: String) {
val context = ContextAmbient.current
val tv = remember(text, context) {
val x = TextView(context)
x.text = text
x.textSize = 48.0f
x
}
AndroidView({ tv })
}
@Composable
fun createComposeTextView(text: String) {
Text(text, style = TextStyle(fontSize = 12.em))
}

第一个文本通过Compose text函数显示并工作,第二个文本使用TextView包装了AndroidView Compose函数但不工作,第三个文本也使用相同的AndroidView包装,但通过使用另一个状态变量以某种方式触发更改。

为什么中间的文本不更新?

使用破解修复程序复制kt文件的全部要点:https://gist.github.com/okhobb/ba7791af4562ea672d0c52769a7cd8ba

====================

更新:基于已接受答案的工作代码:

@Composable
fun TraditionalViewAsComposable(text: String){
var updatableString by remember{mutableStateOf("")}
updatableString = text
AndroidView(
factory={ TextView(it).apply {
this.text = text
this.textSize = 48.0f
} },
update={ it.text = updatableString }
)
}

AndroidView((可组合文件在状态更改时默认不会重新组合。你必须";"选择加入";通过显式定义更新参数来侦听状态。

所以语法应该是这样的:

@Composable
fun TraditionalViewAsComposable(initialString:String){
var updatableString by remember{mutableStateOf("")}
AndroidView(factory={it:Context->
TraditionalView(it).apply{this:TraditionalView->
this.property=initialString
},
update={it:TraditionalView->
it.property=updatableString
},
modifier=Modifier
)
}

索引必须是可变状态,如:textRingPosition = remember{ mutableStateOf<Int>(0) }

作为一般提示,如果您的Compose代码包含var,则可能出现错误,并且应该是一个状态。

解释:如果您运行这个片段,您可以按下按钮,但compositable不会更新,但在控制台中您可以看到值发生了更改。

Surface(modifier = Modifier.padding(all = 16.dp).fillMaxSize()) {
val textRing = arrayOf("one", "two", "three")
var textRingPosition = 0
val liveData = MutableLiveData<String>()
val observeAsState: String by liveData.observeAsState(initial = textRing[textRingPosition])
Column() {
println("Composed with " + observeAsState + " and pos: " + textRingPosition)
Text("Text: " + observeAsState)
Button(onClick = {
textRingPosition = textRingPosition.inc().rem(textRing.size)
println("OnClick: " + textRingPosition)
liveData.postValue(textRing[textRingPosition])
}) {
Text("change")
}
}
}

控制台输出:

1 | I/System.out: Composed with one and pos: 0
2 | I/System.out: OnClick: 1
3 | I/System.out: Composed with two and pos: 0
4 | I/System.out: OnClick: 1
5 | I/System.out: OnClick: 2
6 | I/System.out: Composed with three and pos: 0
7 | I/System.out: OnClick: 1
8 | I/System.out: Composed with two and pos: 0
9 | I/System.out: OnClick: 1

在第4行中,您可以看到索引已更改为1,但它应该已经位于2,这是因为视图在第3行中重新组合并重置了索引。Compose不会在此处重新组合,因为视图不需要更新,因为当前值与状态中的新值相同。在第5行中,索引为2,它将状态值更改为另一个字符串,从而触发重新组合。

有了索引的记忆和可变状态,组件将重新组合每次更改:

Surface(modifier = Modifier.padding(all = 16.dp).fillMaxSize()) {
val textRing = arrayOf("one", "two", "three")
var textRingPosition = 0
val liveData = MutableLiveData<String>()
val observeAsState: String by liveData.observeAsState(initial = textRing[textRingPosition])
val rememberTextRingPosition = remember { mutableStateOf(0) }
Column() {
println("Composed with $observeAsState and pos: ${textRingPosition}expected value: ${rememberTextRingPosition.value}")
Text("Text: $observeAsState")
Button(onClick = {
textRingPosition = textRingPosition.inc().rem(textRing.size)
rememberTextRingPosition.value = rememberTextRingPosition.value.inc().rem(textRing.size)
println("OnClick: var:$textRingPosition remember: ${rememberTextRingPosition.value}")
liveData.postValue(textRing[textRingPosition])
}) {
Text("change")
}
}
}

输出:

1 | I/System.out: Composed with one and pos: 0expected value: 0
2 | I/System.out: OnClick: var:1 remember: 1
3 | I/System.out: Composed with two and pos: 0expected value: 1
4 | I/System.out: OnClick: var:1 remember: 2
5 | I/System.out: Composed with two and pos: 0expected value: 2
6 | I/System.out: OnClick: var:1 remember: 0
7 | I/System.out: Composed with two and pos: 0expected value: 0
8 | I/System.out: OnClick: var:1 remember: 1

随着日志的状态,组件每次都会按照应该的方式重新组合,并且由于记住,状态不会重置。

相关内容

  • 没有找到相关文章

最新更新