3
3
.
.
1
1
.
.
8
8
S
S
t
t
a
a
t
t
e
e
V
V
a
a
r
r
i
i
a
a
b
b
l
l
e
e
I
I
n
n
f
f
o
o
[
[
R
R
]
]
This tutorial shows how to use State variables.
Every time value of State variable changes, every View that uses it gets redrawn.
Unfortunately you can't access its value as if it were a normal variable (by simply using its name like you can in SwitftUI).
Instead to get the value of State variable you have to use variableName.value.
Syntax for declaring State Variable is very confusing because it effectively makes Function behave like Instance of a Class.
It gives Function a Property that holds its value between Function calls (just like Class Property does for Instance).
Content
Declare State Variable (Declare it in the View which displays it and modifies it)
Forward State Variable (Declare it in caller View. Display it in called View.)
Change forwarded State Variable (Declare it in caller View. Change it in called View.)
D
D
e
e
c
c
l
l
a
a
r
r
e
e
S
S
t
t
a
a
t
t
e
e
V
V
a
a
r
r
i
i
a
a
b
b
l
l
e
e
In this example count is a State variable with a value defined by a parameter to mutableStateOf(0) Function.
To access the value of this State Variable you have to use count.value.
MainActivity.kt
package com.example.testcompose
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Text
import androidx.compose.material.Button
import androidx.compose.runtime.*
import androidx.compose.ui.platform.setContent
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
val count = remember { mutableStateOf(0) }
Button( { count.value++ } ) {
Text("I was clicked ${count.value} times")
}
}
}
}
Output
F
F
o
o
r
r
w
w
a
a
r
r
d
d
S
S
t
t
a
a
t
t
e
e
V
V
a
a
r
r
i
i
a
a
b
b
l
l
e
e
This example show how to declare State Variable in one View and then use it to call another View.
State Variable will be changed only in the caller View, but changing it will also redraw called View.
MainActivity.kt
package com.example.testcompose
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.Column
import androidx.compose.material.Button
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.setContent
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
val count = remember { mutableStateOf(0) }
Column {
Button( { count.value++ } ) { Text("Click me") }
DisplayCounter(count.value)
}
}
}
}
@Composable
fun DisplayCounter(count: Int) {
Text("Button was clicked $count times")
}
Output
C
C
h
h
a
a
n
n
g
g
e
e
f
f
o
o
r
r
w
w
a
a
r
r
d
d
e
e
d
d
S
S
t
t
a
a
t
t
e
e
V
V
a
a
r
r
i
i
a
a
b
b
l
l
e
e
This example show how to declare State Variable in one View and then use it to call another View which should change it.
View needs to be called with additional Lambda expression which is used to make the change to State Variable.
This is because Kotlin doesn't support in-out parameters (like SwiftU does, so we need this workaround).
MainActivity.kt
package com.example.testcompose
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.Column
import androidx.compose.material.Button
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.setContent
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
val count = remember { mutableStateOf(0) }
Column {
Text("Button was clicked ${count.value} times")
Counter(count.value) { newCount -> count.value = newCount }
}
}
}
}
@Composable
fun Counter(count: Int, updateCounter: (Int) -> Unit) {
Button({ updateCounter(count+1) }) { Text("Click me") }
}
Output
