如何在jetpack compose中為多個文本應用底頁？

Question

那些日子我正在嘗試學習jetpack compose，所以我想在jetpack compose中學習底頁，我只為一個文本做，但我想將它用於多個文本，我這里有一個例子，但我不確定如何實施到我的項目，是否有超過兩個文本按鈕應用底頁的解決方案？

@Composable
fun BottomSheetMyScreen() {
    val modalBottomSheetState = rememberModalBottomSheetState(initialValue = 
  ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetContent = {
            BottomSheetFirstScreen()
         

        },
        sheetState = modalBottomSheetState,
        sheetShape = RoundedCornerShape(topStart = 5.dp, topEnd = 5.dp),
        sheetBackgroundColor = Color.Red,
       
    ) {
        Scaffold(

            backgroundColor = Color.Red
        ) {
            MyScreen(
                scope = scope, state = modalBottomSheetState

            )}}}
 
@Composable
fun MyScreen(
    scope: CoroutineScope, state: ModalBottomSheetState,

) {

            MainRow(
                name = "name1",
                onClick = {  scope.launch {
                    state.show()
                }}
            )

            MainRow(
                name = "name2",
                onClick = { scope.launch {
                    state.show()
                } }

            )}}
     
@Composable
fun MainRow(
    name: String,
    onClick: () -> Unit

    ) {

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp)
            .clickable(onClick = onClick),
        verticalAlignment = Alignment.CenterVertically
    ) {

        Column(
            modifier = Modifier
                .width(150.dp)

           ) {

            Text(
                text = name,
               
            )}}}
           
     

Answer 1

我編輯您的代碼，您可以使用以下代碼：

@Composable
fun BottomSheetMyScreen() {
    val modalBottomSheetState = rememberModalBottomSheetState(
        initialValue =
        ModalBottomSheetValue.Hidden
    )
    val scope = rememberCoroutineScope()
    ModalBottomSheetLayout(
        sheetContent = {
            BottomSheetFirstScreen()
        },
        sheetState = modalBottomSheetState,
        sheetShape = RoundedCornerShape(topStart = 5.dp, topEnd = 5.dp),
        sheetBackgroundColor = Color.Red,
        ) {
        Scaffold(
            backgroundColor = Color.Red
        ) {
            MyScreen(
                scope = scope, state = modalBottomSheetState
            )
        }
    }
}

主行

@Composable
fun MainRow(
    name1: String,
    name2: String,
    text1onClick: () -> Unit,
    text2onClick: () -> Unit,
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Column(
            modifier = Modifier
                .width(150.dp)

        ) {
            Text(
                text = name1,
                modifier = Modifier.clickable { text1onClick.invoke() }
            )
            Text(
                text = name2,
                modifier = Modifier.clickable { text2onClick.invoke() }
            )
        }
    }
}

和我的屏幕

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MyScreen(
    scope: CoroutineScope,
    state: ModalBottomSheetState,
) {
    MainRow(
        name1 = "name1",
        name2 = "name2",
        text1onClick = {
            scope.launch {
                state.show()
            }
        },
        text2onClick = {
            scope.launch {
                state.show()
            }
        }
    )
}