當創建它的參數更改時，如何使 Android Jetpack Compose AndroidView 被替換？

Question

我有一個應用程序，它顯示了封裝在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 包裝器，但通過使用另一個狀態變量以某種方式觸發了更改。

為什么中間文本不更新？

帶有 hack 修復的復制 kt 文件的完整要點：https ://gist.github.com/okhobb/ba7791af4562ea672d0c52769a7cd8ba

Answer 1

索引必須是可變狀態，例如： textRingPosition = remember{ mutableStateOf<Int>(0) } 。

作為一般提示，如果您的 Compose 代碼包含var可能是錯誤的並且應該是狀態。

說明：如果您運行此代碼段，您按下按鈕，但可組合項並未更新，但在控制台中您會看到值已更改。

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

作為日志狀態，組件每次都按原樣重新組合，並且狀態不會因為記住而重置。

Answer 2

默認情況下，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
        )
}