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

【问题标题】：How to use EditText or TextInput widget in Jetpack compose?如何在 Jetpack compose 中使用 EditText 或 TextInput 小部件？
【发布时间】：2019-06-27 11:01:31
【问题描述】：

我通过尝试 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)
                        )
                    )
                )
            }
        }
    }
}

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

【问题讨论】：

标签： android androidx android-jetpack-compose android-compose-textfield

【解决方案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

【讨论】：

【解决方案2】：

使用1.0.x，您可以使用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

【讨论】：

类型 'TypeVariable(T)' 没有方法 'getValue(MainActivity, KProperty)' 因此它不能用作委托
已修复：here
关于如何删除“文本”开头的填充的任何想法？

【解决方案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)
            )
        )
    )
}

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

【讨论】：

EditorModel 是 compose 的 dev05 中的 MIA，在发行说明中没有提及。
警告旧答案，现在无效

【解决方案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
)

【讨论】：

【解决方案5】：

 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
                )

试试这个。

【讨论】：

您好！虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。