Jetpack Compose中的软键盘与焦点控制

news2024/10/5 20:25:05

FocusRequester 与 FocusManager

在 Compose 中，可以通过 FocusRequester 与 FocusManager 这两个对象可以主动在代码中控制焦点获取和取消焦点，其中FocusRequester可以用来获取焦点，通过调用它的requestFocus()方法来实现，而 FocusManager可以用来取消焦点（以及移动焦点），通过调用它的clearFocus() 方法来实现。（不知道 Compose 官方的设计初衷是什么，这里为什么要搞两个对象。。）

@Composable
fun FocusControlExample() {
    var text by remember { mutableStateOf("") }
    var hasFocus by remember { mutableStateOf(false) }
    val focusRequester = remember { FocusRequester() }
    val focusManager = LocalFocusManager.current
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TextField(
            value = text,
            onValueChange = { text = it },
            Modifier
                .focusRequester(focusRequester) // 如果要代码中requestFocus()这句必须加，否则会报错
                .onFocusChanged { hasFocus = it.isFocused },
            placeholder = { Text("请输入...") },
            textStyle = TextStyle(fontSize = 20.sp),
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent // 修改输入框背景色
            ),
        )
        Button(
            onClick = {
                if (!hasFocus) {
                    // 必须先调用Modifier.focusRequester()绑定FocusRequester，否则报错
                    focusRequester.requestFocus() // 主动获取焦点
                } else{
                    focusManager.clearFocus() // 主动清空焦点
                }
            }
        ) {
            Text(if (!hasFocus) "Focus" else "UnFocus")
        }
    }
}

在这里插入图片描述

这里有一个非常重要的点需要注意：在调用 focusRequester.requestFocus() 之前必须保证已经调用Modifier.focusRequester()为组件绑定过了FocusRequester，否则将会导致应用崩溃。

另外这里使用了 Modifier.onFocusChanged修饰符来获取焦点状态，它的lambda中可以获取到一个FocusState参数，FocusState.isFocused可以判断当前组件是否获取焦点，而FocusState.hasFocus则可以判断是否包含获取焦点的child组件。

进入页面后输入框自动弹出软键盘

既然 focusRequester 可以主动获取焦点，对于TextField组件，那么我们理所当然地可以在进入其Composable重组作用域时，就通过一个副作用Api来启动协程进行焦点获取，那么软键盘自然也就自动弹出了。

@Composable
fun AutoFocusExample() {
    var text by remember { mutableStateOf("") }
    var hasFocus by remember { mutableStateOf(false) }
    val focusRequester = remember { FocusRequester() }
    LaunchedEffect(Unit) {
        if (!hasFocus) focusRequester.requestFocus()
    }
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TextField(
            value = text,
            onValueChange = { text = it },
            modifier = Modifier
                .focusRequester(focusRequester)
                .onFocusChanged { hasFocus = it.isFocused },
            textStyle = TextStyle(fontSize = 20.sp),
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent
            ),
        )
    }
}

在这里插入图片描述

捕获焦点

研究了一下，在Compose中捕获焦点跟获取到焦点是两个概念，使用还是通过 focusRequester 的两个方法 captureFocus() 和 freeFocus() ，具体区别可以看下面代码与运行效果：

@Composable
fun CaptureFocusExample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        val focusRequester = remember { FocusRequester() }
        var text by remember { mutableStateOf("") }
        TextField(
            value = text,
            onValueChange = { text = it },
            placeholder = { Text(text = "TextField1")},
            modifier = Modifier.focusRequester(focusRequester),
            textStyle = TextStyle(fontSize = 20.sp),
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent
            ),
        )
        val focusRequester2 = remember { FocusRequester() }
        var value by remember { mutableStateOf("") }
        var borderColor by remember { mutableStateOf(Color.Transparent) }
        TextField(
            value = value,
            onValueChange = {
                value = it.apply {
                    if (length > 5) 
                        focusRequester2.captureFocus() //捕获焦点
                    else
                        focusRequester2.freeFocus() // 释放焦点
                }
            },
            placeholder = { Text(text = "TextField2")},
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent
            ),
            modifier = Modifier
                .border(2.dp, borderColor)
                .focusRequester(focusRequester2)
                .onFocusChanged {
                    borderColor = if (it.isCaptured) Color.Red else Color.Transparent
                }
        )
        val focusManager = LocalFocusManager.current
        Button(onClick = { focusManager.clearFocus() }) { Text("clearFocus") }
        Button(onClick = { focusRequester.requestFocus() }) { Text("TextField1 requestFocus") }
    }
}

在这里插入图片描述

可以看到在捕获焦点以后，任何其他组件均不能获取焦点（包括clearFocus()也不会起作用），直到当前组件调用freeFocus()释放焦点。 相当于当前组件锁定了焦点模式。

这里为每个TextField组件都绑定了一个 FocusRequester 对象，每个 FocusRequester 对象控制各自绑定的组件的焦点获取。而 FocusManager 使用一个就可以了，因此 FocusManager的获取是通过 LocalFocusManager.current 它获取到的是一个范围内的单例。

通过 SoftwareKeyboardController 控制软键盘显示与隐藏

前面通过 FocusManager.clearFocus() 方法可以取消组件的焦点，对于TextField组件，如果失去焦点，那么软键盘也会自动隐藏。这里 Compose 中还有另一种方式来专门控制键盘的显示与隐藏，就是通过SoftwareKeyboardController 来实现。

@OptIn(ExperimentalComposeUiApi::class, ExperimentalLayoutApi::class)
@Composable
fun KeyboardControllerExample() {
    var text by remember { mutableStateOf("") }
    var hasFocus by remember { mutableStateOf(false) }
    val focusRequester = remember { FocusRequester() }
    val keyboardController = LocalSoftwareKeyboardController.current
    val isImeVisible = WindowInsets.isImeVisible
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TextField(
            value = text,
            onValueChange = { text = it },
            Modifier
                .focusRequester(focusRequester)
                .onFocusChanged { hasFocus = it.isFocused },
            placeholder = { Text("请输入...") },
            textStyle = TextStyle(fontSize = 20.sp),
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent
            ),
        )
        Button(
            onClick = {
                if (!hasFocus) {
                    focusRequester.requestFocus() // 主动获取焦点
                } else{
                    if (isImeVisible) {
                        keyboardController?.hide() // 隐藏软键盘
                    } else {
                        keyboardController?.show() // 显示软键盘
                    }
                }
            }
        ) {
            Text(
                if (!hasFocus) "request Focus" else {
                    if (isImeVisible) "hide keyboard" else "show keyboard"
                }
            )
        }
        val focusManager = LocalFocusManager.current
        Button(onClick = { focusManager.clearFocus() }) {
            Text(text = "clear Focus")
        }
    }
}

在这里插入图片描述
需要注意的是，软键盘的显示与隐藏的前提是：输入框组件已经获取到了焦点。如果输入框都没有获取到焦点，主动调用显示软键盘不会有任何效果，因为它不知道要往哪里输入。另外这里使用了 Compose 提供的一个很方便的api WindowInsets.isImeVisible 它可以判断软键盘的显示状态。

通过 InputMethodManager 控制软键盘显示与隐藏

在面向传统View体系的开发中，一般我们在项目中应该都会有相应的工具类来专门处理软键盘的显示与隐藏，那么能不能直接复用以前的工具类代码呢？答案是可以。例如我们以前传统的开发中是通过context.getSystemService(Context.INPUT_METHOD_SERVICE) 拿到 InputMethodManager对象，再通过该对象的方法来操作软键盘，如果你的项目中以前有这样的代码，那么依然可以拿来直接使用。

例如之前有如下封装：

// KeyboardUtils.kt
/**
 * 显示软键盘
 * @param context 
 */
fun showKeyboard(context: Context) {
    if (context is Activity) {
        context.apply{
            val inputManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
            runOnUiThread {
                currentFocus?.let {
                    inputManager.showSoftInput(it, 0)
                }
            }
        }
    }
}
/**
 * 隐藏软键盘
 * @param context
 */
fun hideKeyboard(context: Context) {
    if (context is Activity) {
        context.apply{
            val inputManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
            runOnUiThread {
                currentFocus?.let {
                    inputManager.hideSoftInputFromWindow(it.windowToken, InputMethodManager.HIDE_NOT_ALWAYS)
                    window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN)
                }
            }
        }
    }
}

那么就可以如下调用：

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun KeyboardControllerOldWayExample() {
    var text by remember { mutableStateOf("") }
    var hasFocus by remember { mutableStateOf(false) }
    val focusRequester = remember { FocusRequester() }
    val context = LocalContext.current
    val isImeVisible = WindowInsets.isImeVisible
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TextField(
            value = text,
            onValueChange = { text = it },
            Modifier
                .focusRequester(focusRequester)
                .onFocusChanged { hasFocus = it.isFocused },
            placeholder = { Text("请输入...") },
            textStyle = TextStyle(fontSize = 20.sp),
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent
            ),
        )
        Button(
            onClick = {
                if (!hasFocus) {
                    focusRequester.requestFocus() // 主动获取焦点
                } else{
                    if (isImeVisible) {
                        hideKeyboard(context) // 隐藏软键盘
                    } else {
                        showKeyboard(context) // 显示软键盘
                    }
                }
            }
        ) {
            Text(
                if (!hasFocus) "request Focus" else {
                    if (isImeVisible) "hide keyboard" else "show keyboard"
                }
            )
        }
        val focusManager = LocalFocusManager.current
        Button(onClick = { focusManager.clearFocus() }) {
            Text(text = "clear Focus")
        }
    }
}

运行效果跟前面通过SoftwareKeyboardController 实现的效果一模一样。

在其他组件上应用 FocusRequester

注意到 FocusRequester是通过Modifier修饰符来提供绑定的，因此它并不是仅仅针对 TextField 输入框组件的，任何组件上都可以使用它来控制获取焦点。

下面是使用Box组件获取焦点的示例：

@Composable
fun FocusBoxSample() {
    val boxFocusRequester = remember { FocusRequester() }
    val boxFocusRequester2 = remember { FocusRequester() }
    var color by remember { mutableStateOf(Color.Black) }
    var color2 by remember { mutableStateOf(Color.Black) }
    val focusManager = LocalFocusManager.current

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Box(
            Modifier
                .size(100.dp)
                .clickable { boxFocusRequester.requestFocus() }
                .border(2.dp, color)
                // The focusRequester should be added BEFORE the focusable.
                .focusRequester(boxFocusRequester)
                // The onFocusChanged should be added BEFORE the focusable that is being observed.
                .onFocusChanged { color = if (it.isFocused) Color.Red else Color.Black }
                .focusable()
        )
        Spacer(modifier = Modifier.height(20.dp))
        Box(
            Modifier
                .size(100.dp)
                .clickable { boxFocusRequester2.requestFocus() }
                .border(2.dp, color2)
                // The focusRequester should be added BEFORE the focusable.
                .focusRequester(boxFocusRequester2)
                // The onFocusChanged should be added BEFORE the focusable that is being observed.
                .onFocusChanged { color2 = if (it.isFocused) Color.Red else Color.Black }
                .focusable()
        )
        Button(onClick = { focusManager.clearFocus() }) { Text(text = "ClearFocus") }
    }
}

在这里插入图片描述

需要注意的是，为了保证生效，在Modifier链中的focusRequester 和 onFocusChanged 必须在 focusable() 之前调用。

通过FocusRequester.createRefs()创建多个FocusRequester

由于每个需要进行焦点控制的组件都需要绑定一个FocusRequester对象，如果一个一个创建太麻烦了，因此 Compose 提供了 FocusRequester.createRefs() 可以通过解构语法来一次性创建多个FocusRequester对象。

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun CreateFocusRequesterRefsExample() {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    val requesterList = listOf(item1, item2, item3, item4)
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        repeat(4) { index ->
            var color by remember { mutableStateOf(Color.Black) }
            Box(
                Modifier
                    .size(100.dp)
                    .clickable { requesterList[index].requestFocus() }
                    .border(2.dp, color)
                    // The focusRequester should be added BEFORE the focusable.
                    .focusRequester(requesterList[index])
                    // The onFocusChanged should be added BEFORE the focusable that is being observed.
                    .onFocusChanged { color = if (it.isFocused) Color.Red else Color.Black }
                    .focusable()
            )
            Spacer(modifier = Modifier.height(20.dp))
        }
    }
}

既然是解构语法，那么一定是通过提供 component1....componentN语法来实现的，那么 FocusRequester.createRefs() 最多能一次性创建多少个呢? 可以看一下源码：

class FocusRequester {
	.....
	companion object {  
		.....
        object FocusRequesterFactory {
            operator fun component1() = FocusRequester()
            operator fun component2() = FocusRequester()
            operator fun component3() = FocusRequester()
            operator fun component4() = FocusRequester()
            operator fun component5() = FocusRequester()
            operator fun component6() = FocusRequester()
            operator fun component7() = FocusRequester()
            operator fun component8() = FocusRequester()
            operator fun component9() = FocusRequester()
            operator fun component10() = FocusRequester()
            operator fun component11() = FocusRequester()
            operator fun component12() = FocusRequester()
            operator fun component13() = FocusRequester()
            operator fun component14() = FocusRequester()
            operator fun component15() = FocusRequester()
            operator fun component16() = FocusRequester()
        } 
        
        fun createRefs() = FocusRequesterFactory
    }
}

可知FocusRequester.createRefs() 最多只能创建16个FocusRequester对象。再多就只能自己for循环创建了。

通过 FocusManager.moveFocus() 控制焦点移动方向

当需要在多个组件之间来回切换焦点获取状态时，可以通过FocusManager.moveFocus()方法来实现，它可以传一个FocusDirection参数来指定焦点移动的方向，代码中直接调用到的FocusDirection是一个伴生对象，它主要有以下几个值：
在这里插入图片描述

一个可以左右上下移动焦点的示例：

@Composable
fun MoveFocusExample() {
    val focusManager = LocalFocusManager.current
    val list = ('A'..'Z').toList()
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        LazyVerticalGrid(
            modifier = Modifier
                .weight(1f)
                .focusable(),
            columns = GridCells.Fixed(4),
            verticalArrangement = Arrangement.spacedBy(8.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            contentPadding = PaddingValues(5.dp)
        ) {
            itemsIndexed(list) { index, item ->
                val boxFocusRequester = remember { FocusRequester() }
                var color by remember { mutableStateOf(Color.Black) }
                Box(
                    Modifier
                        .clip(RoundedCornerShape(5.dp))
                        .size(80.dp)
                        .clickable { boxFocusRequester.requestFocus() }
                        .border(3.dp, color) 
                        .focusRequester(boxFocusRequester) 
                        .onFocusChanged { color = if (it.isFocused) Color.Red else Color.Black }
                        .focusable(),
                    contentAlignment = Alignment.Center
                ) {
                    Text("$index $item", fontSize = 22.sp)
                }
            }
        }
        Button(onClick = { focusManager.moveFocus(FocusDirection.Up) }) { Text("Up") }
        Row {
            Button(onClick = { focusManager.moveFocus(FocusDirection.Left) }) { Text("Left") }
            Spacer(modifier = Modifier.width(50.dp))
            Button(onClick = { focusManager.moveFocus(FocusDirection.Right) }) { Text("Right") }
        }
        Button(onClick = { focusManager.moveFocus(FocusDirection.Down) }) { Text("Down") }
    }
}

在这里插入图片描述
(提示：如果是模拟器可以通过电脑键盘的方向键来控制焦点移动，而如果是真机还可以通过连接蓝牙键盘后按蓝牙键盘上的方向键来控制焦点移动)

通过 focusProperties 自定义焦点移动方向

通过 Modifier.focusProperties 我们可以自定义每个焦点方向的下一个焦点位置

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun CustomFocusOrderByFocusPropertiesExample() {
    val focusManager = LocalFocusManager.current
    Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
        val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
        Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
            MyFocusBox(
                size = 140.dp,
                focusRequester = item1,
                focusProperties = {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
            ) { isFocused ->
                Text(
                    text = "item1: \n next = item2 \n right = item2 \n down = item3 \n previous = item4",
                    color = if (isFocused) Color.Red else Color.Black,
                    fontSize = 16.sp
                )
            }
            MyFocusBox(
                size = 140.dp,
                focusRequester = item2,
                focusProperties = {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
            ) { isFocused ->
                Text(
                    text = "item2: \n next = item3 \n right = item1 \n down = item4 \n previous = item1",
                    color = if (isFocused) Color.Red else Color.Black,
                    fontSize = 16.sp
                )
            }
        }
        Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
            MyFocusBox(
                size = 140.dp,
                focusRequester = item3,
                focusProperties = {
                    next = item4
                    right = item4
                    up = item1 
                    previous = item2
                }
            ) { isFocused ->
                Text(
                    text = "item3: \n next = item4 \n right = item4 \n up = item1 \n previous = item2",
                    color = if (isFocused) Color.Red else Color.Black,
                    fontSize = 16.sp
                )
            }
            MyFocusBox(
                size = 140.dp,
                focusRequester = item4,
                focusProperties = {
                    next = item1
                    left = item3
                    up = item2
                    previous = item3
                }
            ) { isFocused ->
                Text(
                    text = "item4: \n next = item1 \n left = item3 \n up = item2 \n previous = item3",
                    color = if (isFocused) Color.Red else Color.Black,
                    fontSize = 16.sp
                )
            }
        }
        FlowRow(mainAxisSpacing = 10.dp) {
            Button(onClick = { focusManager.moveFocus(FocusDirection.Left) }) { Text("Left") }
            Button(onClick = { focusManager.moveFocus(FocusDirection.Right) }) { Text("Right") }
            Button(onClick = { focusManager.moveFocus(FocusDirection.Up) }) { Text("Up") }
            Button(onClick = { focusManager.moveFocus(FocusDirection.Down) }) { Text("Down") }
            Button(onClick = { focusManager.moveFocus(FocusDirection.Next) }) { Text("Next") }
            Button(onClick = { focusManager.moveFocus(FocusDirection.Previous) }) { Text("Previous") }
        }
    }
}
@Composable
fun MyFocusBox(
    size: Dp = 100.dp,
    focusRequester: FocusRequester = remember { FocusRequester() },
    focusProperties: FocusProperties.() -> Unit = {},
    content: (@Composable BoxScope.(Boolean) -> Unit)? = null
) {
    var color by remember { mutableStateOf(Color.Black) }
    var isFocused by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(size)
            .clickable { focusRequester.requestFocus() }
            .border(3.dp, color)
            .padding(8.dp)
            .focusRequester(focusRequester)
            .focusProperties { focusProperties() }
            .onFocusChanged { focusState ->
                color = if (focusState.isFocused) Color.Red else Color.Black
                isFocused = focusState.isFocused
            }
            .focusable()
    ) {
        content?.let { content(isFocused) }
    }
}

在这里插入图片描述

拦截某个方向的焦点移动

如果需要拦截某个方向的焦点移动，只需将对应方向的值设为FocusRequester.Cancel即可，如上面代码中，将第二个Row组件中的第一个Box组件的up修改为 up = FocusRequester.Cancel 则可以拦截up方向的焦点移动，效果如下：

在这里插入图片描述
可以看到，从第一个Box向下移动到下面的Box组件后，再执行FocusManager.moveFocus(FocusDirection.Up)方法无法生效了。

FocusDirection.Enter

FocusDirection.Enter指从获取焦点的组件上执行FocusManager.moveFocus(FocusDirection.Enter)可直接进入到下一个获取焦点的组件中，至于下一个是哪个组件获取焦点，同样可以通过在当前组件上应用 Modifier.focusProperties 然后指定其enter参数为要进入的FocusRequester即可。

下面代码中，如果Row组件获取焦点后，执行focusManager.moveFocus(FocusDirection.Enter)时，会跳入第二个Box组件获取焦点：

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun FocusEnterExample() {
    val rowFocusRequester = remember { FocusRequester() }
    var color by remember { mutableStateOf(Color.Black) }
    val item2 = remember { FocusRequester() }
   Column(horizontalAlignment = Alignment.CenterHorizontally) {
       Row(
           Modifier
               .clickable { rowFocusRequester.requestFocus() }
               .border(3.dp, color)
               .padding(30.dp)
               .focusRequester(rowFocusRequester)
               .focusProperties { enter = { item2 } }
               .onFocusChanged { color = if (it.isFocused) Color.Red else Color.Black }
               .focusable(),
           horizontalArrangement = Arrangement.spacedBy(10.dp)
       ) {
           MyFocusBox()
           MyFocusBox(focusRequester = item2)
           MyFocusBox()
       }
       val focusManager = LocalFocusManager.current
       Button(onClick = { focusManager.moveFocus(FocusDirection.Enter) }) { Text("Enter") }
   }
}
@Composable
fun MyFocusBox(
    size: Dp = 100.dp,
    focusRequester: FocusRequester = remember { FocusRequester() },
    focusProperties: FocusProperties.() -> Unit = {},
    content: (@Composable BoxScope.(Boolean) -> Unit)? = null
) {
    var color by remember { mutableStateOf(Color.Black) }
    var isFocused by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(size)
            .clickable { focusRequester.requestFocus() }
            .border(3.dp, color)
            .padding(8.dp)
            .focusRequester(focusRequester)
            .focusProperties { focusProperties() }
            .onFocusChanged { focusState ->
                color = if (focusState.isFocused) Color.Red else Color.Black
                isFocused = focusState.isFocused
            }
            .focusable()
    ) {
        content?.let { content(isFocused) }
    }
}

在这里插入图片描述

FocusDirection.Exit

跟FocusDirection.Enter相反，FocusDirection.Exit是指从获取焦点的组件上执行FocusManager.moveFocus(FocusDirection.Exit)时会跳转到下一个获取焦点的组件，同样通过 focusProperties 参数指定。

下面代码中，当第一个Row中的任何一个Box获取焦点后，执行FocusManager.moveFocus(FocusDirection.Exit)时，都会跳转到第二个Row中的第二个Box组件：

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun FocusExitSample() { 
    val focusRequester = remember { FocusRequester() }
    var color by remember { mutableStateOf(Color.Black) }
    val nextItem = remember { FocusRequester() }
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(10.dp)
    ) {
        Row(
            Modifier
                .clickable { focusRequester.requestFocus() }
                .border(3.dp, color)
                .padding(15.dp)
                .focusRequester(focusRequester)
                .onFocusChanged { color = if (it.isFocused) Color.Red else Color.Black }
                .focusable(),
            horizontalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            MyFocusBox(focusProperties = { exit = { nextItem } })
            MyFocusBox(focusProperties = { exit = { nextItem } })
            MyFocusBox(focusProperties = { exit = { nextItem } })
        }
        Row(Modifier.focusable(), horizontalArrangement = Arrangement.spacedBy(10.dp)) {
            MyFocusBox()
            MyFocusBox(focusRequester = nextItem)
        }
        val focusManager = LocalFocusManager.current
        Button(onClick = { focusManager.moveFocus(FocusDirection.Exit) }) { Text("Exit") }
    }
}
@Composable
fun MyFocusBox(
    size: Dp = 100.dp,
    focusRequester: FocusRequester = remember { FocusRequester() },
    focusProperties: FocusProperties.() -> Unit = {},
    content: (@Composable BoxScope.(Boolean) -> Unit)? = null
) {
    var color by remember { mutableStateOf(Color.Black) }
    var isFocused by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(size)
            .clickable { focusRequester.requestFocus() }
            .border(3.dp, color)
            .padding(8.dp)
            .focusRequester(focusRequester)
            .focusProperties { focusProperties() }
            .onFocusChanged { focusState ->
                color = if (focusState.isFocused) Color.Red else Color.Black
                isFocused = focusState.isFocused
            }
            .focusable()
    ) {
        content?.let { content(isFocused) }
    }
}

在这里插入图片描述

作为对比，可以把 focusProperties = { exit = { nextItem } } 去掉，查看正常效果有何不同：

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/154900.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

脚手架搭建Vue项目

脚手架搭建Vue项目

以上创建的方式发现一直存在config目录 换种方式 卸载脚手架命令 npm uninstall vue-cli -g 重新安装 npm install vue/cli -g 1.vue create 项目名 2.模板选择，通过键盘上下键来选择，我们选择第三个 自定义 这三个选择分别是 vue2 / vue3 默认模板…
阅读更多...
12.Isaac教程--未来工厂中的搬运车

12.Isaac教程--未来工厂中的搬运车

未来工厂中的搬运车 ISAAC教程合集地址: https://blog.csdn.net/kunhe0512/category_12163211.html 文章目录未来工厂中的搬运车运行模拟器搬运车送货申请自动小车运输的行为树导航与感知互通仅限自主导航申请仅适用于感知训练模型物体检测模型（DetectNetv2&#x…
阅读更多...
JSP SSM家教管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

JSP SSM家教管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 JSPSSM家教管理系统 是一套完善的系统源码，对理解JSP java SrpingMVC mybiats 框架 MVC编程开发语言有帮助，系统具有完整的源代码和数据库，以及相应配套的设计文档，系 统主要采用B/S模式开发。 研究的基本内容…
阅读更多...
5.5、TCP 的拥塞控制

5.5、TCP 的拥塞控制

在某段时间若对网络中某一资源的需求超过了该资源所能提供的可用部分，网络性能就要变坏\color{red}对网络中某一资源的需求超过了该资源所能提供的可用部分，网络性能就要变坏对网络中某一资源的需求超过了该资源所能提供的可用部分，网络性能就…
阅读更多...
CSDN第22场周赛

CSDN第22场周赛

1.写在前面的话22场周赛的详情总比赛第7名了，hhhCSDN周赛非常能够锻炼码代码的能力，无论是在平常的练习题目当中，还是每次的周赛中，题目有难有易，每次周赛的题目出的十分具有代表性，参加了将近20场的周赛&a…
阅读更多...
批量PDF文件合并用什么软件？这两个宝藏软件赶快收藏起来

批量PDF文件合并用什么软件？这两个宝藏软件赶快收藏起来

我们在工作中经常有很多处理过的PDF文件，我们经常会将这些文件进行保存，以防日后需要使用，但是太多的PDF文件真的会占用很多存储空间，所以我们可以将各类PDF文件合并在一起，这样也方便以后观看，但是逐个合并…
阅读更多...
Docker容器实时日志查看器Dozzle

Docker容器实时日志查看器Dozzle

什么是 Dozzle？ Dozzle 是一个小型轻量级应用程序，具有基于 Web 的界面来监控 Docker 日志。Dozzle不存储任何日志文件，仅用于实时监控您的容器日志。 先看个官方的动图 老苏已转成了视频，源文件地址：https://github.c…
阅读更多...
制造型企业离不开MES？MES系统有什么应用场景

制造型企业离不开MES？MES系统有什么应用场景

随着工业物联网的迅速发展，设备监测也成为MES系统中的一个关键环节。过去我们所收集到的资料，也许只是一种记录的作用，随着联网的设备越来越多以及大数据、云计算等技术的发展，数据的价值越来越高。数据收集不再仅仅是一种简单的记…
阅读更多...
Codeforces Round #841 (Div. 2) (A--D)

Codeforces Round #841 (Div. 2) (A--D)

[TOC](Codeforces Round #841 (Div. 2)(A–D)) A、 Joey Takes Money 1、题目 2、思路 3、代码 #include<iostream>#include<algorithm>#include<cstring>using namespace std;typedef unsigned long long ll;int main(){ll t;cin>>t;while(t--){int…
阅读更多...
新书赠送丨《中国金融科技发展概览：创新与应用前沿》

新书赠送丨《中国金融科技发展概览：创新与应用前沿》

我国金融科技发展日新月异&#xff0c;人工智能、云计算、大数据等新兴数字技术与实体经济及金融业的深度融合&#xff0c;推动我国数字经济快速发展&#xff0c;也深刻改变着我国金融业的服务业态和经营模式。过去的一年&#xff0c;金融机构实现核心技术自主可控成为热点&…
阅读更多...
影响因子14.65：16S全长测序+低丰度简化菌群，提供根腐病防控新视角

影响因子14.65：16S全长测序+低丰度简化菌群，提供根腐病防控新视角

背景介绍当土壤中病原体入侵时&#xff0c;植物可以动态调节其根际微生物并适应这种生物胁迫。植物招募的保护性微生物群落中通常包含一些低丰度的类群&#xff0c;其作用尚不清楚。本研究首先分析了健康和患病黄芪之间根系微生物群落结构的差异&#xff0c;依据患病黄芪根部的…
阅读更多...
增加模拟前端的动态范围

增加模拟前端的动态范围

1、光电接收电路 下面两张图分别在sensor正偏置和负偏置时的接收电路&#xff0c;这里我们关注一下输出的波形特征为一个脉冲信号&#xff0c;脉冲信号的共模电压为5V分压得到&#xff0c;信号的摆幅为Iout*RT&#xff0c;Iout为光电流&#xff0c;在应用在雷达接收的中时&…
阅读更多...
JVM调试命令与调试工具

JVM调试命令与调试工具

一、JDK自带命令Sun JDK监控和故障处理命令如&#xff1a;1、jpsJVM Process Status Tool&#xff0c;显示指定系统内所有的HotSpot虚拟机进程。jsp命令格式&#xff1a;jps [ options ] [ hostid ] 扩展参数&#xff1a;jps -l&#xff1b;jps -mlv&#xff1b;各参数说明如下…
阅读更多...
tkinter 实现倒计时(1小时)

tkinter 实现倒计时(1小时)

使用python标准GUI库tkinter实现倒计一小时效果。 废话少说。 效果图&#xff1a; 要不然看个 动态效果 图&#xff1a; 代码&#xff1a; from tkinter import * from tkinter.messagebox import showerrorroot Tk() root.title("倒计时") root.geometry("3…
阅读更多...
解析|当前企业OA系统面对的困难与解决方案

解析|当前企业OA系统面对的困难与解决方案

近年来&#xff0c;由于疫情爆发&#xff0c;线下的企业办公效率难以保证&#xff0c;不少企业逐渐转向远程办公。尝试过后&#xff0c;远程办公的优势凸显&#xff0c;使得有越来越多的企业开始逐渐深入了解在线办公软件、协同办公OA系统。据统计&#xff0c;2021年数字化办公…
阅读更多...
监控docker

监控docker

当前&#xff0c;容器的使用已经非常普及&#xff0c;将服务迁移到容器上正成为了越来越多公司的选择。而对于运维人员而言&#xff0c;熟悉容器的使用与监控&#xff0c;也已成为一项必不可少的专业技能。关于容器的开源产品&#xff0c;目前知名的有Docker、Containerd、Core…
阅读更多...
P2580 于是他错误的点名开始了

P2580 于是他错误的点名开始了

题目背景 XS中学化学竞赛组教练是一个酷爱炉石的人。 他会一边搓炉石一边点名以至于有一天他连续点到了某个同学两次&#xff0c;然后正好被路过的校长发现了然后就是一顿欧拉欧拉欧拉&#xff08;详情请见已结束比赛 CON900&#xff09;。 题目描述 这之后校长任命你为特派探员…
阅读更多...
范数的意义与计算方法（使用NumPy）

范数的意义与计算方法（使用NumPy）

1. 范数的意义 范数可以简单的理解为“距离”。由于向量是既有大小又有方向的量&#xff0c;所以向量是不能直接比较大小的&#xff0c;但是范数提供了一种方法&#xff0c;可以将所有的向量转化为一个实数&#xff0c;然后就可以比较向量的大小了。&#xff08;注&#xff1a…
阅读更多...
前端Vue和Element-UI配合后端接口进行数据交互

前端Vue和Element-UI配合后端接口进行数据交互

前言 本次用element-ui的table组件&#xff0c;简单案例演示下前后端数据交互。 前提声明&#xff1a;如果不知道如何在vue中引入element-ui&#xff0c;可以先看下这篇文章:Vue引入并使用Element-UI组件库的两种方式 静态页面 首先先写一个静态页面吧&#xff0c;数据都是…
阅读更多...
《Linux运维实战：Centos7.6基于ansible一键离线部署redis6.2.8容器版之cluster集群》

《Linux运维实战：Centos7.6基于ansible一键离线部署redis6.2.8容器版之cluster集群》

一、部署背景 由于业务系统的特殊性&#xff0c;我们需要针对不同的客户环境部署redis cluster集群&#xff0c;由于大都数用户都是专网环境&#xff0c;无法使用外网&#xff0c;为了更便捷&#xff0c;高效的部署&#xff0c;针对业务系统的特性&#xff0c;我这边编写了基于…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023