Is there a way to dynamically change the string in Text() of compose?

user_1693203 0
Viewed 5135

For example, after some modification to the sample code snippet given in android developer's site

@Composable
fun ClickCounter(clicks: Int, onClick: () -> Unit) {
    Button(onClick = onClick) {
        Text("I've been clicked $clicks times")
    }
}

it is possible to count the number of times a button is pressed and display this count by changing the string in the Text component in the UI. However this needs the user to physically press the button to get Text to change. Is there a way to do this programmatically? I would like to perform some calculation and somewhere else and when the result is ready, display it by updating Text (doing something like Text.setText("...") had I been using xml to generate the UI). How do I change the value of Text programmatically? Do any of the jetpack compose sample programs from google have a simple example of this?

android-jetpack-compose kotlin android
2 Answers

composable functions need to have a MutableState in order to be programmatically updated. It can be created from an observable (like LiveData or Flow) or by calling mutableStateOf().

val text = mutableStateOf("text")
// or
val text = MutableStateFlow("text")

@Composable
fun MyText() {
    val myText by text
    // or
    val myText by text.collectAsState()
    Text(myText)
}

then you can update the value programmatically by updating the observable:

text.value = "other text"

Example

class MainActivity : AppCompatActivity() {
    private val a = 10000L
    private val b = 1000L
    private val c = mutableStateOf(a)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val timer = object : CountDownTimer(a, b) {
            override fun onTick(millisUntilFinished: Long) {
                Log.d("MYLOG", "text updated programmatically")
                c.value = millisUntilFinished
            }

            override fun onFinish() {
                c.value = 0
            }
        }
        timer.start()
        setContent { CountDown() }
    }

    @Composable
    fun CountDown() {
        val milliseconds by c
        val text = (milliseconds / 1000).toString()
        Text(text)
    }
}

Read more here

user_144873700

In Compose the UI is immutable and there's no way to update it after it's been drawn but you can control the state of your UI.

In other word you haven't a method like Text.setText("...") but you can build composables functions that work on state and events.

enter image description here

For example you can use mutableStateOf(value).
It creates a MutableState, which is an observable type in Compose. Any changes to its value will schedule recomposition of any composable functions that read that value.

You can use something like:

    var count by remember { mutableStateOf(0) }                        
    Button(onClick = { count++ }){
                Text("Add")
    }
    Text(text = "count: ${count}")

More info here.

user_20165620
Related