So I have the following composable function:
#Composable
fun SearchResult() {
if (searchInput.isNotEmpty()) {
Column() {
Text("Search Result!")
}
}
}
Then I called the function from here:
private fun updateContent() {
setContent {
ChemistryAssistantTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Column() {
Title(" Chemistry Assistant ", " Made by Saket Tamrakar ")
Column() {
SearchElements()
SearchResult() // Here
//Options()
}
}
}
}
}
}
The issue here is that the function gets correctly called in the beginning, when I invoke updateContent() here:
OutlinedTextField(value = input, placeholder = { Text("Search for any element!") }, onValueChange = {
input = it
searchInput = it.text
updateContent()
})
Control does reach the function (at least according to what the debugger tells me), but still fails to execute the function body.
Any ideas?
You should keep searchInput as a state like:
val searchInput by mutableStateOf("")
This ensures that whenever the value of searchInput changes, any composable whose structure depends on it will also recompose(i.e recall the function).
Hope this solves your issue.
Apparently moving the variable searchInput:
#Composable
fun SearchResult() {
if (/*this one*/searchInput.isNotEmpty()) {
Column() {
Text("Search Result!")
}
}
}
..inside the MainActivity class fixed the issue.
Related
I've been checking out the Performance best practices for Jetpack Compose Google I/O, in there it's stated that this code should only re-execute the Text() function, since only this function reads a value that changes.
private class NameHolder(var name: String)
#Composable
private fun LittleText(nameHolder: NameHolder) {
Box {
Text(text = "Nombre: ${nameHolder.name}")
println("compose 2")
}
println("compose 1")
}
however when I run it I can see that for every change both prints execute as well.
I also tested with something like this:
#Composable
private fun LittleText(name: String) {
Box {
Text(text = "Nombre: $name")
println("compose 2")
}
println("compose 1")
}
With the same result, I'm changing the text with a TextField, like this:
var name by remember { mutableStateOf("name") }
TextField(
value = name,
onValueChange = {
name = it
}
)
LittleText(name)
What I'm I doing wrong? How can I achieve this behaviour and have only the Text re-executing the composition?
I found an answer that cover this:
#Composable
fun TestingCompose() {
Column {
TestView()
println("compose 1")
}
}
#Composable
fun TestView() {
val textFieldValue = remember { mutableStateOf(TextFieldValue("")) }
TextField(textFieldValue)
println("compose 2")
}
#Composable
fun TextField(textFieldValue: MutableState<TextFieldValue>) {
TextField(
value = textFieldValue.value,
onValueChange = { textFieldValue.value = it }
)
println("compose 3")
}
I'm still trying to fully understand it, so any insight would be greatly appreciated, but checking the log while testing this shows that only the composable containing the TextField gets re-executed with every character.
There appear to be an infinite number of explanations for this error on stackoverflow, none of which address my issue.
I am building a compose alert dialog. I am trying to show a list of options that can change depending on the data.
Dialog
#Composable
fun OptionSelectComposeDialog(
vm: OptionSelectDialogViewModel
){
...
val optionList = vm.optionList
Column {
if (openDialog.value) {
AlertDialog(
...
text = {
OptionListDialogContent(optionList)
},
...
)
}
}
In the OptionListDialogContent composable function I'm trying to print out the list, but the Text composable is giving an error.
OptionListDialogContent
#Composable
fun OptionListDialogContent(optionList: OptionList?) {
val optionItemArray = optionList?.getOptionItemArray(null)
LazyColumn() {
if (optionItemArray != null) {
optionItemArray.forEach { optionItem ->
Text(text = optionItem.toString()) // Error "#Composable invocations can only happen from the context of a #Composable function"
}
}
}
}
I suspected that the toString call on the optionItem is throwing this error, so I tried mapping the array to convert the array values to strings and still received this error.
OptionListDialogContent After converting the array to strings:
#Composable
fun OptionListDialogContent(optionList: OptionList?) {
val optionItemArray = optionList?.getOptionItemArray(null)
val optionItemStringArray = optionItemArray?.map { it.toString()}?.toTypedArray()
LazyColumn() {
if (optionItemStringArray != null) {
optionItemStringArray.forEach { optionItem ->
Timber.d("This is working? - optionItemArray.size: %s", optionItemArray.size)
Text(text = optionItem) // Error "#Composable invocations can only happen from the context of a #Composable function"
}
}
}
}
Anyone see where the issue is? (I have verified that optionItemArray is not null)
Turns out it is an issue with how I was using LazyColumn. LazyColumn needs to receive an array size. There are different ways to do this, but this is how I did it:
LazyColumn() {
if (optionItemStringArray != null) {
items(optionItemStringArray.size) { i ->
Row() {
Text(text = optionItemStringArray[i])
}
}
}
}
You are trying to put a lazy list(which is in OptionListDialogContent) inside a text field
text = {
OptionListDialogContent(optionList)
},
The parameter needs to be compatible to take a composable function. In this case, the text does not do that.
I have a Composable in which a remembered value (an offset) needs to be updated both by the Composable itself and also from the calling side (using the Composable's arguments) -- how can I achieve this?
In particular, I have the following piece of code. The value I'm talking about is the offset in NavigableBox: I need to both be able to control it by dragging the box and by setting it manually using the value from OffsetInputField which is passed as an argument.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Surface {
Box {
var boxOffset by remember { mutableStateOf(Offset.Zero) }
NavigableBox(boxOffset)
OffsetInputField { offset ->
offset.toFloat().let { boxOffset = Offset(it, it) }
}
}
}
}
}
}
#Composable
fun OffsetInputField(onInput: (String) -> Unit) {
var value by remember { mutableStateOf("") }
TextField(
value = value,
onValueChange = { value = it },
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Go),
keyboardActions = KeyboardActions(onGo = { onInput(value) })
)
}
#Composable
fun NavigableBox(initOffset: Offset) {
var offset by remember(initOffset) { mutableStateOf(initOffset) }
Box(
modifier = Modifier
.fillMaxSize()
.pointerInput(Unit) { detectTransformGestures { _, pan, _, _ -> offset += pan } }
) {
Box(modifier = Modifier
.size(100.dp)
.offset { IntOffset(offset.x.roundToInt(), offset.y.roundToInt()) }
.background(Color.Blue)
)
}
}
In the current implementation the dragging works fine until a new value is passed as OffsetInputField's input -- then the box stops responding to dragging. I assume it is because the MutableState object containing the offset changes when gets recalculated and the box doesn't observe it anymore.
I already tried using unidirectional data flow in NavigableBox (passing offset value and onOffsetChange lambda to it, but then dragging doesn't work as expected: the box just jiggles around its initial position, returning back to it when the gesture stops.
In case anyone interested, I'm developing an app where the draggable box is a map, and the text field is used for searching objects on it: the map is moved to be centered on an object entered.
pointerInput captures all the state variables used inside. With new initOffset you're creating a new mutable state, but pointerInput keeps updating the old reference.
You need to restart it by passing the same value(s) to key:
pointerInput(initOffset) { /*...*/ }
In a Composable function, I can pass as parameter the State, or the value of the State. Any reason for preferring to pass the value of the State, instead of the State?
In both cases, the composable is stateless, so why should I distinguish both cases?
It's possible to pass state's value. For example:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val isLoading = mutableStateOf(false)
val onClickAtButton = {
lifecycleScope.launch(Dispatchers.Main) {
isLoading.value = true
withContext(Dispatchers.IO) {
//Do some heavy operation live REST call
}
isLoading.value = false
}
}
setContent {
MyComposable(isLoading.value, onClickAtButton)
}
}
}
#Composable
fun MyComposable(
isLoading: Boolean = false,
onClickAtButton: () -> Unit = {}
){
Box(modifier = Modifier.fillMaxSize(){
Button(onClick = onClickAtButton)
if(isLoading){
CircularProgressIndicator()
}
}
}
Hope it helps somebody.
There is a slight difference between passing State or just the value of a State regarding recomposition.
Let's start with passing State:
#Composable
fun Example1(text: State<String>) {
SideEffect { Log.d("Example", "Example1 recomposition") }
Example2(text)
}
#Composable
fun Example2(text: State<String>) {
SideEffect { Log.d("Example", "Example2 recomposition") }
Text(text.value)
}
#Composable
fun Screen() {
val text = remember { mutableStateOf("hello") } }
Example1(text)
Button(
onClick = { text.value = "world" }
) {
Text("Click me")
}
}
On first start you will see the log output
Example1 recomposition
Example2 recomposition
However when you click the button, you will only see an additional
Example2 recomposition
Because you're passing down State and only Example2 is reading the state, Example1 does not need to be recomposed.
Let's change the parameters to a plain type:
#Composable
fun Example1(text: String) {
SideEffect { Log.d("Example", "Example1 recomposition") }
Example2(text)
}
#Composable
fun Example2(text: String) {
SideEffect { Log.d("Example", "Example2 recomposition") }
Text(text)
}
#Composable
fun Screen() {
val text = remember { mutableStateOf("hello") } }
Example1(text.value)
Button(
onClick = { text.value = "world" }
) {
Text("Click me")
}
}
When you click the button now, you will see two additional lines in the log output
Example1 recomposition
Example2 recomposition
Since text is now a plain type of the function signatures of both composables, both need to be recomposed when the value changes.
However always passing down State can become quite cumbersome. Compose is quite good at detecting what needs to be recomposed so this should be considered a micro optimization. I just wanted to point out that there is a slight difference which every developer using Compose should know about.
I am currently trying to write an App for my thesis and currently, I am looking into different approaches. Since I really like Flutter and the Thesis requires me to use Java/Kotlin I would like to use Jetpack compose.
Currently, I am stuck trying to update ListElements.
I want to have a List that shows Experiments and their state/result. Once I hit the Button I want the experiments to run and after they are done update their state. Currently, the run Method does nothing besides setting the state to success.
The problem is I don't know how to trigger a recompose from the viewModel of the ExperimentRow once an experiment updates its state.
ExperimentsActivity:
class ExperimentsActivity : AppCompatActivity() {
val exViewModel by viewModels<ExperimentViewModel>()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
//For now this is just Dummy Data and will be replaced
exViewModel.experiments += listOf(
Experiment("Test1", exViewModel::experimentStateChanged),
Experiment("Strongbox", exViewModel::experimentStateChanged)
)
setContent {
TpmTheme {
// A surface container using the 'background' color from the theme
Surface {
ExperimentScreen(
exViewModel.experiments,
exViewModel::startTests
)
}
}
}
}
}
ExperimentViewModel:
class ExperimentViewModel : ViewModel() {
var experiments by mutableStateOf(listOf<Experiment>())
fun startTests() {
for (exp in experiments) {
exp.run()
}
}
fun experimentStateChanged(experiment: Experiment) {
Log.i("ViewModel", "Changed expState of ${experiment.name} to ${experiment.state}")
// HOW DO I TRIGGER A RECOMPOSE OF THE EXPERIMENTROW FOR THE experiment????
//experiments = experiments.toMutableList().also { it.plus(experiment) }
Log.i("Vi", "Size of Expirments: ${experiments.size}")
}
}
ExperimentScreen:
#Composable
fun ExperimentScreen(
experiments: List<Experiment>,
onStartExperiments: () -> Unit
) {
Column {
LazyColumnFor(
items = experiments,
modifier = Modifier.weight(1f),
contentPadding = PaddingValues(top = 8.dp),
) { ep ->
ExperimentRow(
experiment = ep,
modifier = Modifier.fillParentMaxWidth(),
)
}
Button(
onClick = { onStartExperiments() },
modifier = Modifier.padding(16.dp).fillMaxWidth(),
) {
Text("Run Tests")
}
}
}
#Composable
fun ExperimentRow(experiment: Experiment, modifier: Modifier = Modifier) {
Row(
modifier = modifier
.padding(horizontal = 16.dp, vertical = 8.dp),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(experiment.name)
Icon(
asset = experiment.state.vAsset,
)
}
Experiment:
class Experiment(val name: String, val onStateChanged: (Experiment) -> Unit) {
var state: ExperimentState = ExperimentState.DEFAULT
set(value) {
field = value
onStateChanged(this)
}
fun run() {
state = ExperimentState.SUCCESS;
}
}
enum class ExperimentState(val vAsset: VectorAsset) {
DEFAULT(Icons.Default.Info),
RUNNING(Icons.Default.Refresh),
SUCCESS(Icons.Default.Done),
FAILED(Icons.Default.Warning),
}
There's a few ways to address this but key thing is that you need to add a copy of element (with state changed) to experiments to trigger the recomposition.
One possible example would be
data class Experiment(val name: String, val state: ExperimentState, val onStateChanged: (Experiment) -> Unit) {
fun run() {
onStateChanged(this.copy(state = ExperimentState.SUCCESS))
}
}
and then
fun experimentStateChanged(experiment: Experiment) {
val index = experiments.toMutableList().indexOfFirst { it.name == experiment.name }
experiments = experiments.toMutableList().also {
it[index] = experiment
}
}
though I suspect there's probably cleaner way of doing this.