Jetpack Compose中navController.popBackStack()无法返回上屏问题

API 探路者

2026-7-11

问题描述

我有4个页面：SpeechScreen1、SpeechScreen2、SpeechScreen3和SpeechScreen4。目前可通过右滑手势从第1页依次导航至第4页，也能通过左滑手势返回上一页，但进入第4页后，左滑无法回到第3页。

SpeechScreen3代码（可正常跳转到第4页、返回第2页）

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectTransformGestures
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.absolutePadding
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
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.input.pointer.pointerInput
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.mayoclinic.ecg_frontend_android.constants.Destinations
import kotlin.math.absoluteValue

@Composable
fun SpeechScreen3(navController: NavController) {
    var offsetX by remember { mutableStateOf(0f) }
    val swipeThreshold = 200 // Adjust this threshold as needed

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(top = 69.dp)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight()
                .padding(start = 21.dp, top = 13.dp, end = 25.dp)
                .pointerInput(Unit) {
                    detectTransformGestures { _, offset, _, _ ->
                        offsetX += offset.x
                        if (offsetX.absoluteValue >= swipeThreshold) {
                            if (offsetX > 0) {
                                navController.navigate(Destinations.SpeechScreen4)
                            }else{
                                navController.popBackStack()
                            }
                            offsetX = 0f
                        }
                    }
                }
        ) {
            Text(
                text = "Please read the following text:",
                style = TextStyle(
                    fontSize = 20.sp,
                    lineHeight = 28.sp,
                    fontFamily = FontFamily.Serif,
                    fontWeight = FontWeight(400),
                    color = Color(0xFF000000)
                ),
                modifier = Modifier
                    .height(28.dp)
                    .fillMaxWidth()
            )
            Text(
                text ="You know,Ozma's birthday is next month,and i've been wondering what I can give her as a birthday present.She's so good to us all that we certainly ought to remember her birthday.",
                style = TextStyle(
                    fontSize = 32.sp,
                    lineHeight = 40.sp,
                    fontFamily = FontFamily.SansSerif,
                    fontWeight = FontWeight(300),
                    color = Color(0xFF080808)
                ),
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
                    .padding(top = 9.dp, end = 25.dp)
            )
        }
    }
    Row(
        modifier = Modifier
            .padding(start = 21.dp, end = 6.dp, top = 630.dp)
            .fillMaxWidth()
            .absolutePadding(bottom = 100.dp)
    ) {
        Row(
            modifier = Modifier
                .width(77.dp)
                .height(7.dp)
                .background(color = Color(0xFF686868))
                .padding(top = 26.dp)
        ) {
        }
        Spacer(modifier = Modifier.width(5.dp))
        Row(
            modifier = Modifier
                .width(77.dp)
                .height(7.dp)
                .background(color = Color(0xFF686868))
                .padding(top = 26.dp)
        ) {
        }
        Spacer(modifier = Modifier.width(5.dp))
        Row(
            modifier = Modifier
                .width(77.dp)
                .height(7.dp)
                .background(color = Color(0xFF686868))
                .padding(top = 26.dp)
        ) {
        }
        Spacer(modifier = Modifier.width(5.dp))
        Row(
            modifier = Modifier
                .width(77.dp)
                .height(7.dp)
                .background(color = Color(0xFFD9D9D9))
                .padding(top = 26.dp)
        ) {
        }
    }
}

SpeechScreen4代码（左滑无法返回上一页）

import android.util.Log
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectTransformGestures
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.absolutePadding
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
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.input.pointer.pointerInput
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import kotlin.math.absoluteValue

@Composable
fun SpeechScreen4(navController: NavController) {
    var offsetX by remember { mutableStateOf(0f) }
    val swipeThreshold = 200 // Adjust this threshold as needed

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(top = 69.dp)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight()
                .padding(start = 21.dp, top = 13.dp, end = 25.dp)
                .pointerInput(Unit) {
                    detectTransformGestures { _, offset, _, _ ->
                        offsetX += offset.x
                        if (offsetX.absoluteValue >= swipeThreshold) {
                            if (offsetX > 0) {
                                //navController.navigate(Destinations.speechscreen4)
                            }else{
                                Log.d("main4", "Navigating back")
                                navController.popBackStack()
                            }
                            offsetX = 0f
                        }
                    }
                }
        ) {
            Text(
                text = "Please say the following letter four times \nA... A ... A ... A",
                style = TextStyle(
                    fontSize = 18.sp,
                    lineHeight = 28.sp,
                    fontFamily = FontFamily.Serif,
                    fontWeight = FontWeight(400),
                    color = Color(0xFF000000)
                ),
                modifier = Modifier
                    .wrapContentHeight()
                    .fillMaxWidth()
            )
            Spacer(modifier = Modifier.height(44.dp))
            Text(
                text ="Please say the following letter four times \nE... E ... E ... E",
                style = TextStyle(
                    fontSize = 18.sp,
                    lineHeight = 28.sp,
                    fontFamily = FontFamily.Serif,
                    fontWeight = FontWeight(400),
                    color = Color(0xFF000000)
                ),
                modifier = Modifier
                    .wrapContentHeight()
                    .fillMaxWidth()
            )
        }
    }

    Row(
        modifier = Modifier
            .padding(start = 21.dp, end = 6.dp, top = 630.dp)
            .fillMaxWidth()
            .absolutePadding(bottom = 100.dp)
    ) {
        Row(
            modifier = Modifier
                .width(77.dp)
                .height(7.dp)
                .background(color = Color(0xFF686868))
                .padding(top = 26.dp)
        ) {
        }
        Spacer(modifier = Modifier.width(5.dp))
        Row(
            modifier = Modifier
                .width(77.dp)
                .height(7.dp)
                .background(color = Color(0xFF686868))
                .padding(top = 26.dp)
        ) {
        }
        Spacer(modifier = Modifier.width(5.dp))
        Row(
            modifier = Modifier
                .width(77.dp)
                .height(7.dp)
                .background(color = Color(0xFF686868))
                .padding(top = 26.dp)
        ) {
        }
        Spacer(modifier = Modifier.width(5.dp))
        Row(
            modifier = Modifier
                .width(77.dp)
                .height(7.dp)
                .background(color = Color(0xFF686868))
                .padding(top = 26.dp)
        ) {
        }
    }
}

Destinations类代码

object Destinations {
    const val speechscreen1 = "speechscreen1"
    const val speechscreen2 = "speechscreen2"
    const val speechscreen3 = "speechscreen3"
    const val speechscreen4 = "speechscreen4"
}

NavDestinations导航配置代码

import android.annotation.SuppressLint
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.speechrecognition.speechscreens.SpeechScreen4
import com.example.speechrecognition.Destinations
import com.example.speechrecognition.speechscreens.SpeechScreen1
import com.example.speechrecognition.speechscreens.SpeechScreen2
import com.example.speechrecognition.speechscreens.SpeechScreen3

@OptIn(ExperimentalMaterial3Api::class)
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun NavDestinations(){
    val navController = rememberNavController()

    Scaffold {
        NavHost(navController = navController, startDestination=Destinations.speechscreen1){
            composable(Destinations.speechscreen1){
                SpeechScreen1(navController)
            }
            composable(Destinations.speechscreen2){
                SpeechScreen2(navController)
            }
            composable(Destinations.speechscreen3){
                SpeechScreen3(navController)
            }
            composable(Destinations.speechscreen4){
                SpeechScreen4(navController)
            }
        }
    }
}

MainActivity代码

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.speechrecognition.NavDestinations.NavDestinations
import com.example.speechrecognition.speechscreens.AudioSampleRecordScreen
import com.example.speechrecognition.speechscreens.SpeechScreen1
import com.example.speechrecognition.ui.theme.SpeechRecognitionTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SpeechRecognitionTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    NavDestinations()
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    SpeechRecognitionTheme {
    }
}

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

Jetpack Compose中navController.popBackStack()无法返回上屏问题

SpeechScreen3代码（可正常跳转到第4页、返回第2页） #

SpeechScreen4代码（左滑无法返回上一页） #

Destinations类代码 #

NavDestinations导航配置代码 #

MainActivity代码 #

SpeechScreen3代码（可正常跳转到第4页、返回第2页）

SpeechScreen4代码（左滑无法返回上一页）

Destinations类代码

NavDestinations导航配置代码

MainActivity代码