Santhosh Kumar's questions

我正在使用 Jetpack Compose 和 Hilt 在嵌套导航设置中进行依赖注入。我需要在嵌套屏幕 (NestedHomeScreen) 及其父屏幕 (HomeScreen) 之间共享 ViewModel（具体来说，nested_home ViewModel）。这两个屏幕都是不同导航图的一部分，但我希望 HomeScreen 能够访问 NestedHomeScreen 中使用的相同 ViewModel 实例。

@Composable
fun MainNavGraph(navController: NavHostController) {
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("profile") { ProfileScreen(navController) }
        composable("nested_container") { NestedContainerScreen(navController) }
    }
}

@Composable
fun NestedContainerScreen(navController: NavHostController) {
    // Create a nested NavController for the subgraph
    val nestedNavController = rememberNavController()

    // Nested NavHost as the subgraph
    NavHost(navController = nestedNavController, startDestination = "nested_home") {
        composable("nested_home") {
            NestedHomeScreen(nestedNavController)
        }
        composable("nested_detail/{id}") { backStackEntry ->
            val id = backStackEntry.arguments?.getString("id")
            NestedDetailScreen(id = id)
        }
    }
}

val nestedHomeViewModel : HomeViewModel = hiltViewModel()

//need to access it in parent nav host home screen

笔记：

1. 不要使用全局范围 viewmodel 与父级 navhost 进行共享
2. 不要使用导航子图

我正在开发一个 Jetpack Compose 应用程序，该应用程序实现了 Material3 新的下拉刷新 (PullToRefreshBox) 功能。但是，我遇到了一个问题：当我导航回屏幕或向上/向下滑动屏幕时，下拉刷新框会消失。

我面临的问题：下拉刷新指​​示器消失：当我离开此屏幕然后返回时，滚动屏幕或单击屏幕，在刷新任务正在进行时下拉刷新指​​示器会立即消失。

向上/向下滑动时的行为：此外，当我向上或向下滑动时，下拉刷新指​​示器会意外消失。

@AndroidEntryPoint
class TestActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp()
        }
    }
}

@Composable
fun MyApp() {
    // Define the routes and their respective icons
    val topLevelRoutes = listOf(
        TopLevelRoute("Profile", "profile", Icons.Filled.AccountCircle),
        TopLevelRoute("Friends", "friends", Icons.Filled.People)
    )

    // Create a NavController
    val navController = rememberNavController()

    Scaffold(
        bottomBar = {
            BottomNavigation {
                val navBackStackEntry by navController.currentBackStackEntryAsState()
                val currentDestination = navBackStackEntry?.destination
                topLevelRoutes.forEach { topLevelRoute ->
                    BottomNavigationItem(
                        icon = {
                            Icon(
                                topLevelRoute.icon,
                                contentDescription = topLevelRoute.name
                            )
                        },
                        label = { Text(topLevelRoute.name) },
                        selected = currentDestination?.route == topLevelRoute.route,
                        onClick = {
                            navController.navigate(topLevelRoute.route) {
                                popUpTo(navController.graph.findStartDestination().id) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        }
                    )
                }
            }
        }
    ) { innerPadding ->
        NavHost(navController, startDestination = "profile", Modifier.padding(innerPadding)) {
            composable("profile") { ProfileScreen() }
            composable("friends") { FriendsScreen() }
        }
    }
}

data class TopLevelRoute(val name: String, val route: String, val icon: ImageVector)

@OptIn(ExperimentalMaterialApi::class, ExperimentalMaterial3Api::class)
@Composable
fun ProfileScreen() {

    var isRefreshing by rememberSaveable { mutableStateOf(false) }

    // Launch an effect when refreshing starts
    if (isRefreshing) {
        LaunchedEffect(Unit) {
            delay(10000) // Simulate a network call
            isRefreshing = false // Reset refreshing state
        }
    }

    // Content for the Profile screen
    Surface {
        PullToRefreshBox(
            onRefresh = { isRefreshing = true },
            isRefreshing = isRefreshing,
            modifier = Modifier
                .fillMaxSize()
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .verticalScroll(rememberScrollState()),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,

                ) {
                // Your main content here
                Text("Profile Screen", style = MaterialTheme.typography.h4)
            }
        }
    }
}

@Composable
fun FriendsScreen() {
    // Content for the Friends screen
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Text("Friends Screen")
    }
}

我正在尝试在 Jetpack Compose 中创建一个布局，其中有一个包含全宽标题的 LazyColumn 和其下方的 LazyVerticalGrid。网格应包裹其内容高度并占据整个屏幕宽度。但是，我遇到了布局和滚动行为方面的问题。

错误：java.lang.IllegalStateException：垂直滚动组件的最大高度限制为无穷大，这是不允许的。

@Composable
fun ScrollableGridWithHeader() {
    val items = remember { List(20) { "Item #$it" } }

    LazyColumn {
        // Full-width header
        item {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(100.dp)
                    .background(Color.Red),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "Upload Images", color = Color.White)
            }
        }

        // LazyVerticalGrid
        item {
            LazyVerticalGrid(
                cells = GridCells.Fixed(2), // or use GridCells.Adaptive(140.dp) if preferred
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight(),
                verticalArrangement = Arrangement.spacedBy(8.dp),
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                items(items.size) { index ->
                    Box(
                        modifier = Modifier
                            .size(140.dp)
                            .background(Color.Gray),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(text = items[index])
                    }
                }
            }
        }
    }
}

“我尝试切换到 Arrangement.Start，它可以工作，但它不能保持其他项目之间的相等间距。”

FlowRow(
           modifier = Modifier
               .fillMaxWidth(),
           verticalArrangement = Arrangement.spacedBy(8.dp),
           horizontalArrangement = Arrangement.SpaceBetween, // Start alignment for boxes

       ) {
           // Create 8 square boxes
           repeat(8) {
               Box(
                   modifier = Modifier
                       .size(120.dp) // Adjust size for square boxes
                       .background(Color.Blue) // Change color as needed

               )
           }
       }