如何在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)
                        )
                    )
                )
            }
        }
    }
}

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

- Maddy

Answer 1

如Gabriele Mariotti所述，以下是正确的做法：

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

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

如果你遇到以下错误：

Type 'TypeVariable(T)' has no method 'getValue(MainActivity, KProperty<*>)' and thus it cannot serve as a delegate

只需在文件中添加这两个导入即可解决问题：

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

- Taslim Oseni

Answer 2

你可以使用TextField。

类似于：

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

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

更多细节:

https://developer.android.com/jetpack/compose/text#enter-modify-text

- Gabriele Mariotti

---

“TypeVariable(T)”类型没有“getValue(MainActivity, KProperty<*>)”方法，因此无法作为委托。 - Taslim Oseni

已修复：这里 - Taslim Oseni

我们如何去掉“文本”开头的填充？ - Kinjal Rathod

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)
            )
        )
    )
}

你可能会错过小部件，因为它没有默认背景色，并且如果你在小部件中输入了空字符串，它几乎是看不见的。

- Andrey Danilov

---

在Compose的dev05版本中，EditorModel不见了，并且在发布说明中也没有提到它。 - Rob

警告：旧答案已过期，现在不再有效。 - AndroidEngineX

Answer 4

TextField(
    value = state.value,
    onValueChange = { new ->
        state.value = if (new.text.any { it == '\n' }) {
            state.value
        } else {
            new
        }
    },
    keyboardType = KeyboardType.Text,
    imeAction = ImeAction.Search,
    textStyle = TextStyle(color = Color.DarkGray),
    onImeActionPerformed = onImeActionPerformed
)

- Ranjeet

Answer 5

以下是一些可组合的文本字段。请选择您要查找的内容：

@Composable
fun SimpleFilledTextFieldSample() {
    var text by remember { mutableStateOf("Hello") }
    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}


@Composable
fun SimpleOutlinedTextFieldSample() {
    var text by remember { mutableStateOf("") }
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}


@Composable
fun StyledTextField() {
    var value by remember { mutableStateOf("Hello\nWorld\nInvisible") }

    TextField(
        value = value,
        onValueChange = { value = it },
        label = { Text("Enter text") },
        maxLines = 2,
        textStyle = TextStyle(color = Color.Blue, fontWeight = FontWeight.Bold),
        modifier = Modifier.padding(20.dp)
    )
}


@Composable
fun PasswordTextField() {
    var password by rememberSaveable { mutableStateOf("") }
    TextField(
        value = password,
        onValueChange = { password = it },
        label = { Text("Enter password") },
        visualTransformation = PasswordVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
    )
}

阅读更多：

撰写文本 >> https://developer.android.com/jetpack/compose/text

视频 >> https://www.youtube.com/watch?v=_qls2CEAbxI&ab_channel=AndroidDevelopers

输出:

祝你有个愉快的一天！

- Yogendra

Answer 6

 val state = +state {
                    EditorModel("Edit Text")
                }
                TextField(
                    value = state.value,
                    onValueChange = {
                        state.value = it
                    },
                    textStyle = TextStyle(
                        fontSize = (30.sp),
                        color = Color.DarkGray
                    ),
                    keyboardType = KeyboardType.Text
                )

试一下这个。

- Mr. Tayyab MuGhal

---

你好！虽然这段代码可能解决了问题，但是加上一个解释说明它是如何解决问题的以及为什么可以解决问题，会有助于提高你的帖子质量，并可能获得更多的赞。请记住，你正在回答未来的读者，而不仅仅是目前提问的人。请编辑你的答案并添加解释，指出适用的限制和假设。 - Brian61354270