为什么当我尝试在 android jetpack compose 中的可滑动块中实现它时，侦听器会出现错误？

Question

所以，我试图通过滑动手势转到下一个屏幕，我有两个屏幕可组合项，SpeechScreen1和Speechscreen2，因此在SpeechScreen1中的滑动手势，我想要转到Screehscreen2，我想做，当我向屏幕右侧滑动时。所以，我在第一个屏幕内创建了一个可滑动块，我试图向其中添加 lsitener，但它给出了这样的错误。

下面是我的第一个屏幕可组合的代码

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.SwipeableDefaults
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.derivedStateOf
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 androidx.navigation.compose.rememberNavController
import com.example.speechrecognition.Destinations

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun SpeechScreen1() {
    val navController: NavController = rememberNavController()

    var textFieldValue by remember { mutableStateOf(TextFieldValue()) }

    val swipeableState = rememberSwipeableState(initialValue = 0)
    val threshold = 0.5f
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(21.dp)
            .swipeable(
                state = swipeableState,
                anchors = mapOf(
                    0f to 0,
                    1000f to 1
                ),
                thresholds = FractionalThreshold(threshold),
                listener = {
                    navController.navigate(Destinations.speechscreen2) //I want to navigate to another screen
                }
            )
        Text(
            text = "Please read the following 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(
                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)
            ) {
            }
            Spacer(modifier = Modifier.width(5.dp))
            Row(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
                    .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)
            ) {
            }
        }
        Column(Modifier.fillMaxSize()) {
            Row(Modifier.fillMaxWidth()) {
                Text(
                    text = "00.00",
                    style = TextStyle(
                        fontSize = 20.sp,
                        lineHeight = 28.sp,
                        fontFamily = FontFamily.SansSerif,
                        fontWeight = FontWeight(700),
                        color = Color(0xFF000000),
                    ),
                    modifier = Modifier.padding(26.dp, top = 34.dp)
                )
            }
        }
    }
}

那么，我在解决这个问题的方法上哪里出了问题？

Answer 1

请参阅 文档了解

Column

可组合项：

@Composable
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
): Unit

注意

content

参数，这是必需的，因为没有分配默认值。在您当前的实现中，您没有传递任何参数值，这可能会导致错误。

在 Kotlin 中，您有两个选项来传递此参数的值：

1) 直接在函数内分配

content

函数：

@Composable
fun MyColumn(
    // modifier = ...,
    content = { MyChildComposable() }
)

2)：最后一个函数参数也可以放在 Kotlin 中函数调用之后的大括号中，如下所示：

@Composable
fun MyColumn(
    // modifier = ...,
) { MyChildComposable() }

如果您应用这些解决方案中的任何一个，错误就会消失。如果您不想将子可组合项分配给

Column

，只需将大括号留空即可。