如何在 Jetpack compose 中使用 EditText 或 TextInput 小部件？

Question

我通过尝试一些像 Image 和 EditText 这样的小部件来探索 Jetpack compose。

对于文本输入，它有EditableText. 我试过下面的代码，但它没有在 UI 中显示任何内容

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            loadUi()
        }
    }

    @Composable
    fun loadUi() {
        CraneWrapper {
            MaterialTheme {
                val state = +state { EditorState("") }
                EditableText(
                    value = state.value,
                    onValueChange = { state.value = it },
                    editorStyle = EditorStyle(
                        textStyle = TextStyle(
                            fontSize = (50f)
                        )
                    )
                )
            }
        }
    }
}

我在这里缺少什么？任何帮助，将不胜感激！

Answer 1

正如Gabriele Mariotti的回答所述，这是正确的方法：

var text by rememberSaveable { mutableStateOf("Text") }

TextField(
    value = text,
    onValueChange = {
        text = it
    },
    label = { Text("Label") }
)

但是，如果您遇到错误，指出：

类型“TypeVariable(T)”没有方法“getValue(MainActivity, KProperty<*>)”，因此它不能充当委托

只需将这两个导入添加到您的文件中即可：

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

Answer 2

有了1.0.x你就可以了TextField。

就像是：

var text by rememberSaveable { mutableStateOf("Text") }

TextField(
    value = text,
    onValueChange = {
        text = it
    },
    label = { Text("Label") }
)

Answer 3

抱歉回复晚了。API 发生了一些变化，因此您的代码现在应如下所示：

@Composable
fun loadUi() {
    val state = +state { EditorModel("smth") }
    TextField(
        value = state.value,
        onValueChange = { state.value = it },
        editorStyle = EditorStyle(
            textStyle = TextStyle(
                fontSize = (50.sp)
            )
        )
    )
}

另外，您可能会错过小部件，因为它没有默认背景，并且如果您有空字符串，默认情况下几乎不可见