Jetpack Compose中Swipeable监听器报错，右滑跳转页面失败排查

存在的问题点 #

• 语法错误：Column的modifier配置末尾缺少逗号，导致后续Text组件被错误嵌套，引发编译报错。
• NavController创建错误：在SpeechScreen1内部通过rememberNavController()创建导航控制器是错误的——该组件作为导航目标，应该接收从导航宿主（如NavHost）传递过来的NavController，否则无法正确完成页面跳转。
• 多行字符串语法错误：第二个Text组件的文本内容使用了普通换行，Kotlin中多行字符串必须用"""包裹，否则编译失败。
• Swipeable配置错误：
  • 未指定滑动方向orientation，默认是垂直滑动，而需求是向右的水平滑动，需设置orientation = Orientation.Horizontal。
  • 锚点值1000f过于生硬，建议基于组件宽度设置；同时当前的listener会在滑动过程中多次触发，应该监听SwipeableState的状态变化，仅当状态切换到目标锚点时执行一次导航。
• 空组件冗余：代码中多个空Row组件无实际作用，可简化。

修复后的完整代码 #

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.*
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.FractionalThreshold
import androidx.compose.material.SwipeableState
import androidx.compose.material.rememberSwipeableState
import androidx.compose.material.swipeable
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.example.speechrecognition.Destinations

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun SpeechScreen1(navController: NavController) { // 接收外部传入的NavController
    var textFieldValue by remember { mutableStateOf(TextFieldValue()) }

    val swipeableState = rememberSwipeableState(initialValue = 0)
    val threshold = 0.5f

    // 监听滑动状态变化，仅当切换到目标状态时导航
    LaunchedEffect(swipeableState.currentValue) {
        if (swipeableState.currentValue == 1) {
            navController.navigate(Destinations.speechscreen2)
            // 导航后重置状态，避免重复触发
            swipeableState.reset()
        }
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .swipeable(
                state = swipeableState,
                anchors = mapOf(
                    0f to 0,
                    // 基于屏幕宽度设置锚点，适配不同设备
                    (ColumnScope::width).invoke(Modifier.fillMaxWidth()).value to 1
                ),
                thresholds = { _, _ -> FractionalThreshold(threshold) },
                orientation = Orientation.Horizontal // 指定水平滑动方向
            )
            .padding(21.dp)
    ) {
        Text(
            text = "请朗读以下文本：",
            style = TextStyle(
                fontSize = 20.sp,
                lineHeight = 28.sp,
                fontFamily = FontFamily.Serif,
                fontWeight = FontWeight(400),
                color = Color(0xFF000000)
            )
        )
        // 用"""包裹多行字符串，修复语法错误
        Text(
            text = """One morning Dorothy crossed the hall of the palace
and knocked on the door of another girl named Trot. When told to
enter, Dorothy found that Trot had company, an old sailor-man with a
wooden leg who was sitting by the open window puffing smoke from a
pipe.""",
            style = TextStyle(
                fontSize = 32.sp,
                lineHeight = 40.sp,
                fontFamily = FontFamily.SansSerif,
                fontWeight = FontWeight(300),
                color = Color(0xFF080808)
            ),
            modifier = Modifier
                .width(334.dp)
                .height(440.dp)
                .padding(top = 9.dp)
        )
        Row(modifier = Modifier.padding(top = 27.dp)) {
            // 简化空Row为Box，去掉无意义嵌套
            Box(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFF686868))
            )
            Spacer(modifier = Modifier.width(5.dp))
            Box(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
            )
            Spacer(modifier = Modifier.width(5.dp))
            Box(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
            )
            Spacer(modifier = Modifier.width(5.dp))
            Box(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
            )
        }
        Text(
            text = "00.00",
            style = TextStyle(
                fontSize = 20.sp,
                lineHeight = 28.sp,
                fontFamily = FontFamily.SansSerif,
                fontWeight = FontWeight(700),
                color = Color(0xFF000000),
            ),
            modifier = Modifier.padding(top = 34.dp, start = 26.dp)
        )
    }
}

关键修复说明 #

1. 导航控制器修正：将SpeechScreen1改为接收外部传入的NavController，确保导航使用的是宿主提供的实例，正确关联导航栈。
2. 语法问题修复：补全Column的大括号和逗号，用"""包裹多行文本。
3. 滑动逻辑优化：
   • 指定orientation = Orientation.Horizontal实现水平右滑。
   • 使用LaunchedEffect监听滑动状态变化，仅当状态切换到目标锚点时执行一次导航，导航后重置状态避免重复触发。
4. 组件简化：将空Row替换为Box，去掉无意义的嵌套和冗余padding。

内容的提问来源于stack exchange，提问作者Tejas Khartude