Jetpack Compose 数字输入

Posted 2023-04-18

【中文标题】Jetpack Compose 数字输入

【英文标题】：Jetpack Compose Numeric Input

【发布时间】：2022-01-07 03:52:12

【问题描述】：

我正在尝试创建一个数字输入字段，当输入有效数字时更新支持字段。当支持字段更新时，UI 应该反映这一点，因为它也可以被其他东西更新。

我有一个实现，我有一个正在编辑的本地字符串，并显示出来，每次值更改时，都会检查该字符串是否可以从中解析出整数，在这种情况下，支持字段已更新。问题是光标会重置到字段的开头 - 因此，如果您输入的是多位数字，则数字会乱序。

似乎没有任何东西可以用来知道用户何时离开控件并且编辑已完成。虽然我使用的是TextFieldValue，但我无法更新该对象中的文本，也无法保留编辑状态，而不是重新创建整个对象。

这不是一个新问题，但在线讨论很少。我是不是在做一些愚蠢的事情并且使事情变得过于复杂？

代码：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
import com.example.numericinputtest.ui.theme.NumericInputTestTheme
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.TextFieldValue


class State : ViewModel()

    private val _numCycles = MutableLiveData<Int>(0)
    val numCycles: LiveData<Int> = _numCycles

    fun onNewNumCycles(cycles: Int) 
        _numCycles.value = cycles
    


class StringToInt 
    companion object 
        fun tryParse(s: String): Int? 
            try 
                return s.toInt()
             catch (e: java.lang.NumberFormatException) 
                return null
            
        
    


class MainActivity : ComponentActivity() 
    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)

        val state = State()

        setContent 
            NumericInputTestTheme 
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) 
                    TestNumeric(state = state)
                
            
        
    


@Composable
fun TestNumeric(state: State) 
    val numCycles: Int by state.numCycles.observeAsState(0)

    //To be able to edit the text normally, we need a local string and the backing field
    //only gets updated when there's a valid number
    val numCyclesString = remember  mutableStateOf(TextFieldValue(numCycles.toString())) 

    //Since we're now displaying a local string, it doesn't get changed when the backing state
    //changes. So we need to catch this occurrence and update manually.
    state.numCycles.observeAsState()
        .run  numCyclesString.value = TextFieldValue(numCycles.toString()) 

    Surface()
    
        TextField(
            value = numCyclesString.value,
            onValueChange = 
                numCyclesString.value = it
                val i = StringToInt.tryParse(it.text)
                if (i != null) 
                    state.onNewNumCycles(i)
                
            ,
            singleLine = true,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
        )
    




@Preview(showBackground = true)
@Composable
fun DefaultPreview() 
    val state = State()
    TestNumeric(state)

【参考方案1】：

TextFieldValue 包含有关光标位置的信息。您正在使用以下行清除此信息：

.run  numCyclesString.value = TextFieldValue(numCycles.toString()) 

您可以使用copy 方法修复它以仅更新文本：

numCyclesString.value = numCyclesString.value.copy(text = numCycles.toString())

但大多数时候，当您不需要访问应用程序中的选择信息时，您可以使用Text 的其他重载，它接受并更新String 值：它会在内部执行copy 逻辑你的代码会更干净。

还有一些小技巧：

如果您有一些依赖项正在使用它，请仅在 Compose 中使用 LiveData。在其他情况下，直接使用可变状态会更干净：

var numCycles by mutableStateOf<Int?>(null)
    private set

fun onNewNumCycles(cycles: Int?) 
    numCycles = cycles

您可以使用toIntOrNull 代替您的StringToInt.tryParse 助手

您无需在 Activity 中创建视图模型并将其传递给您的视图。您可以使用viewModel 以任何可组合方式检索它：它将在第一次调用时创建一个对象并在文本时间重用。

最终的可组合代码：

val state = viewModel<State>()

TextField(
    value = state.numCycles?.toString() ?: "",
    onValueChange = 
        if (it.isEmpty()) 
            state.onNewNumCycles(null)
         else 
            val i = it.toIntOrNull()
            if (i != null) 
                state.onNewNumCycles(i)
            
        
    ,
    singleLine = true,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
)

【讨论】：

谢谢。这可以清理很多东西并保留光标位置。但是，当退格时，您不能一直到空白字段 - 即使光标回到开头，第一个数字仍然存在。因此，当您开始键入时，新数字将插入到保留的初始数字之前。如果您想将初始值 0 更改为 5，这一点非常明显。我认为这就是为什么我首先选择了一个单独的字段进行编辑，但保留单独的编辑字段并仅更新你建议的文字不能解决这个问题。

@CraigGraham 您可以将numCycles 设为可选，并在传入字符串为空时将其设置为null，请参阅更新后的答案。

已排序，谢谢 :)