只能在 Android Jetpack Compose 的 @Composable 函数上下文中删除 @Composable 调用。

huangapple go评论65阅读模式
英文:

How to remove the @Composable invocations can only happen from the context of a @Composable function in android jetpack compose?

问题

I am trying to use remember from jetpack compose in order to change the background colour of the Elevated button when it's clicked. So, when I set a variable with a value of MaterialTheme.colorScheme.primary, it's showing error at colorScheme similarly it's showing the same error for MaterialTheme.colorScheme.secondary. So, I don't quite understand where am I going wrong. I am relatively new to the Jetpack compose. Below is my code.

MainActivity.kt

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.compose.ui.theme.ComposeTheme

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeTheme {
// A surface container using the 'background' color from the theme
MyApp(modifier = Modifier.fillMaxSize())
}
}
}
}

@Composable
fun MyApp(modifier: Modifier=Modifier,
names:List = listOf("World","Compose")
){
Column(modifier = modifier.padding(vertical = 4.dp)) {
for (name in names) {
Greeting(name = name)
}
}
}

@Composable
fun Greeting(name: String) {

// Define a state to hold the button color
var buttonColor by remember {
    mutableStateOf(MaterialTheme.colorScheme.primary)  //colorScheme is giving error
}

Surface(
    color = buttonColor,
    modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)) {
    Row(modifier = Modifier.padding(24.dp)) {
        Column(modifier = Modifier.weight(1f)){
            Text(text = "Hello")
            Text(text = name)
    }
        ElevatedButton(onClick = {
            buttonColor = MaterialTheme.colorScheme.secondary //colorScheme is giving error
       }) {

            Text(text = "Show more")
        }

    }

}

}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ComposeTheme {
MyApp()
}
}

英文:

I am trying to use remember from jetpack compose in order to change the background colour of the Elevated button when it's clicked . So, when I set a variable with a value of MaterialTheme.colorScheme.primary, it's showing error at colorScheme similarly its showing the same error for MaterialTheme.colorScheme.secondary . So, I don't quite understand where am I going wrong. I am relatively new to the Jetpack compose. Below is my code.

MainActivity.kt

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.compose.ui.theme.ComposeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTheme {
                // A surface container using the 'background' color from the theme
                MyApp(modifier = Modifier.fillMaxSize())
            }
        }
    }
}

@Composable
fun MyApp(modifier: Modifier=Modifier,
          names:List<String> = listOf("World","Compose")
){
   Column(modifier = modifier.padding(vertical = 4.dp)) {
       for (name in names) {
           Greeting(name = name)
       }
   }
}

@Composable
fun Greeting(name: String) {

    // Define a state to hold the button color
    var buttonColor by remember {
        mutableStateOf(MaterialTheme.colorScheme.primary)  //colorScheme is giving error
    }

    Surface(
        color = buttonColor,
    modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier.weight(1f)){
                Text(text = "Hello")
                Text(text = name)
        }
            ElevatedButton(onClick = {
                buttonColor = MaterialTheme.colorScheme.secondary //colorScheme is giving error
           }) {

                Text(text = "Show more")
            }

        }

    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeTheme {
        MyApp()
    }
}

答案1

得分: 1

以下是代码的翻译部分:

你可以这样解决这个问题

@Composable
fun Greeting(name: String) {

    val primaryColor = MaterialTheme.colorScheme.primary
    val secondaryColor = MaterialTheme.colorScheme.secondary

    var isSelected by remember { mutableStateOf(false) }

    Surface(
        color = if (isSelected) primaryColor else secondaryColor,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = "Hello")
                Text(text = name)
            }
            ElevatedButton(colors = ButtonDefaults.buttonColors(
                if (isSelected) secondaryColor else primaryColor
            ), onClick = {
                isSelected = !isSelected
            }
            ) {
                Text(text = "Show more")
            }
        }
    }
}

这段代码会在按钮被点击时改变 Surface 的颜色和按钮的颜色。

英文:

You can solve this problem this way:

@Composable
fun Greeting(name: String) {

    val primaryColor = MaterialTheme.colorScheme.primary
    val secondaryColor = MaterialTheme.colorScheme.secondary

    var isSelected by remember { mutableStateOf(false) }

    Surface(
        color = if (isSelected) primaryColor else secondaryColor,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = "Hello")
                Text(text = name)
            }
            ElevatedButton(colors = ButtonDefaults.buttonColors(
                if (isSelected) secondaryColor else primaryColor
            ), onClick = {
                isSelected = !isSelected
            }
            ) {
                Text(text = "Show more")
            }
        }
    }
}

This changes the color of the Surface and the color of the Button every time the button is clicked.

huangapple
  • 本文由 发表于 2023年4月10日 21:31:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/75977575.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定