学习

Lab Week 6 Summary · Jimmy Huang's Blog

plain text

java/com.yourpackage.tripdiaryapp/
├── MainActivity.kt
├── TripDestination.kt
├── UserDataViewModel.kt
├── TripHomeScreen.kt
├── TripScreen.kt
├── DiaryScreen.kt
└── TripDiaryApp.kt

res/drawable/
└── trip_image.png

kotlin

dependencies {
    implementation(libs.androidx.core.ktx)
    implementation(libs.androidx.lifecycle.runtime.ktx)
    implementation(libs.androidx.activity.compose)
    implementation(platform(libs.androidx.compose.bom))
    implementation(libs.androidx.ui)
    implementation(libs.androidx.ui.graphics)
    implementation(libs.androidx.ui.tooling.preview)
    implementation(libs.androidx.material3)

    implementation("androidx.navigation:navigation-compose:2.9.3")

    // 建议一起补上，避免 Icons.Default.* 报 unresolved reference
    implementation("androidx.compose.material:material-icons-extended")
}

kotlin

@Composable
fun HomeScreen() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Home Screen",
            style = MaterialTheme.typography.headlineMedium
        )
    }
}

kotlin

@Composable
fun HistoryScreen() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "History Screen",
            style = MaterialTheme.typography.headlineMedium
        )
    }
}

kotlin

@Composable
fun ProfileScreen() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Profile Screen",
            style = MaterialTheme.typography.headlineMedium
        )
    }
}

kotlin

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NavigationAppTheme {
                HomeScreen()
            }
        }
    }
}

kotlin

enum class Destination(
    val route: String,
    val label: String,
    val icon: ImageVector
) {
    HOME("home", "Home", Icons.Default.Home),
    HISTORY("history", "History", Icons.Default.Info),
    PROFILE("profile", "Profile", Icons.Default.AccountCircle)
}

kotlin

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ExpandedModalNavigationRail() {
    val navController = rememberNavController()
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentDestination = navBackStackEntry?.destination

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            NavigationRail(
                containerColor = MaterialTheme.colorScheme.surfaceVariant,
                contentColor = MaterialTheme.colorScheme.onSurfaceVariant
            ) {
                Spacer(modifier = Modifier.height(16.dp))

                NavigationRailItem(
                    selected = false,
                    onClick = { scope.launch { drawerState.close() } },
                    icon = {
                        Icon(
                            painter = painterResource(id = R.drawable.menu_open_24dp),
                            contentDescription = "Close drawer",
                            modifier = Modifier.size(26.dp)
                        )
                    }
                )

                Spacer(modifier = Modifier.height(16.dp))

                Destination.entries.forEach { destination ->
                    NavigationRailItem(
                        selected = currentDestination?.route == destination.route,
                        onClick = {
                            navController.navigate(destination.route) {
                                popUpTo(navController.graph.findStartDestination().id) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                            scope.launch { drawerState.close() }
                        },
                        icon = {
                            Icon(
                                imageVector = destination.icon,
                                contentDescription = destination.label
                            )
                        },
                        label = { Text(destination.label) }
                    )

                    Spacer(modifier = Modifier.height(16.dp))
                }
            }
        }
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = {
                        Text(
                            text = "Navigation Rail Demo App",
                            style = MaterialTheme.typography.titleMedium
                        )
                    },
                    navigationIcon = {
                        IconButton(
                            onClick = {
                                scope.launch {
                                    if (drawerState.isClosed) {
                                        drawerState.open()
                                    } else {
                                        drawerState.close()
                                    }
                                }
                            }
                        ) {
                            Icon(Icons.Default.Menu, contentDescription = "Menu")
                        }
                    },
                    colors = TopAppBarDefaults.topAppBarColors(
                        containerColor = Color(0xFFB39DDB),
                        titleContentColor = Color.White,
                        navigationIconContentColor = Color.White
                    )
                )
            }
        ) { innerPadding ->
            NavHost(
                navController = navController,
                startDestination = Destination.HOME.route,
                modifier = Modifier.padding(innerPadding)
            ) {
                composable(Destination.HOME.route) { HomeScreen() }
                composable(Destination.HISTORY.route) { HistoryScreen() }
                composable(Destination.PROFILE.route) { ProfileScreen() }
            }
        }
    }
}

kotlin

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NavigationAppTheme {
                ExpandedModalNavigationRail()
            }
        }
    }
}

kotlin

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomNavigationBar() {
    val navController = rememberNavController()

    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(
                        text = "Navigation Bar Demo App",
                        style = MaterialTheme.typography.titleMedium
                    )
                },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = Color(0xFFB39DDB),
                    titleContentColor = Color.White,
                    navigationIconContentColor = Color.White
                )
            )
        },
        bottomBar = {
            NavigationBar(
                modifier = Modifier.padding(bottom = 20.dp)
            ) {
                val navBackStackEntry by navController.currentBackStackEntryAsState()
                val currentDestination = navBackStackEntry?.destination

                Destination.entries.forEach { destination ->
                    NavigationBarItem(
                        icon = {
                            Icon(
                                imageVector = destination.icon,
                                contentDescription = destination.label
                            )
                        },
                        label = { Text(destination.label) },
                        selected = currentDestination?.route == destination.route,
                        onClick = {
                            navController.navigate(destination.route) {
                                popUpTo(navController.graph.findStartDestination().id) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        }
                    )
                }
            }
        }
    ) { paddingValues ->
        NavHost(
            navController = navController,
            startDestination = Destination.HOME.route,
            modifier = Modifier.padding(paddingValues)
        ) {
            composable(Destination.HOME.route) { HomeScreen() }
            composable(Destination.HISTORY.route) { HistoryScreen() }
            composable(Destination.PROFILE.route) { ProfileScreen() }
        }
    }
}

kotlin

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NavigationAppTheme {
                BottomNavigationBar()
                // ExpandedModalNavigationRail()
            }
        }
    }
}

kotlin

data class TripEntry(
    val fullName: String,
    val email: String,
    val tripDate: String,
    val country: String
)

class UserDataViewModel : ViewModel() {
    var fullName by mutableStateOf("")
        private set

    var email by mutableStateOf("")
        private set

    var tripDate by mutableStateOf("")
        private set

    var country by mutableStateOf("")
        private set

    private val _tripList = mutableStateListOf<TripEntry>()
    val tripList: List<TripEntry> = _tripList

    fun updateFullName(value: String) {
        fullName = value
    }

    fun updateEmail(value: String) {
        email = value
    }

    fun updateTripDate(value: String) {
        tripDate = value
    }

    fun updateCountry(value: String) {
        country = value
    }

    fun saveTrip(): Boolean {
        if (
            fullName.isBlank() ||
            email.isBlank() ||
            tripDate.isBlank() ||
            country.isBlank()
        ) {
            return false
        }

        _tripList.add(
            TripEntry(
                fullName = fullName.trim(),
                email = email.trim(),
                tripDate = tripDate,
                country = country
            )
        )

        fullName = ""
        email = ""
        tripDate = ""
        country = ""

        return true
    }
}

kotlin

enum class TripDestination(
    val route: String,
    val label: String,
    val icon: ImageVector
) {
    HOME("home", "Home", Icons.Default.Home),
    TRIP("trip", "Trip", Icons.Default.Edit),
    DIARY("diary", "Diary", Icons.Default.List)
}

kotlin

@Composable
fun TripHomeScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Welcome to My Travel Diary",
            style = MaterialTheme.typography.headlineSmall
        )

        Spacer(modifier = Modifier.height(24.dp))

        Image(
            painter = painterResource(id = R.drawable.trip_image),
            contentDescription = "Trip image",
            modifier = Modifier
                .fillMaxWidth()
                .height(220.dp),
            contentScale = ContentScale.Crop
        )
    }
}

kotlin

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TripScreen(
    viewModel: UserDataViewModel,
    onSubmitSuccess: () -> Unit
) {
    var showDatePicker by remember { mutableStateOf(false) }
    var countryMenuExpanded by remember { mutableStateOf(false) }
    var errorMessage by remember { mutableStateOf<String?>(null) }

    val countries = listOf(
        "Australia",
        "Italy",
        "Japan",
        "Singapore",
        "New Zealand"
    )

    val datePickerState = rememberDatePickerState()

    if (showDatePicker) {
        DatePickerDialog(
            onDismissRequest = { showDatePicker = false },
            confirmButton = {
                TextButton(
                    onClick = {
                        datePickerState.selectedDateMillis?.let { millis ->
                            val formatter = SimpleDateFormat(
                                "yyyy-MM-dd",
                                Locale.getDefault()
                            )
                            viewModel.updateTripDate(formatter.format(Date(millis)))
                        }
                        showDatePicker = false
                    }
                ) {
                    Text("OK")
                }
            },
            dismissButton = {
                TextButton(
                    onClick = { showDatePicker = false }
                ) {
                    Text("Cancel")
                }
            }
        ) {
            DatePicker(state = datePickerState)
        }
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
            .verticalScroll(rememberScrollState()),
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        Text(
            text = "Profile Details",
            style = MaterialTheme.typography.headlineSmall
        )

        OutlinedTextField(
            value = viewModel.fullName,
            onValueChange = viewModel::updateFullName,
            label = { Text("Full Name") },
            modifier = Modifier.fillMaxWidth(),
            singleLine = true
        )

        OutlinedTextField(
            value = viewModel.email,
            onValueChange = viewModel::updateEmail,
            label = { Text("Email") },
            modifier = Modifier.fillMaxWidth(),
            singleLine = true
        )

        OutlinedTextField(
            value = viewModel.tripDate,
            onValueChange = {},
            label = { Text("Trip Date") },
            readOnly = true,
            modifier = Modifier.fillMaxWidth(),
            trailingIcon = {
                IconButton(
                    onClick = { showDatePicker = true }
                ) {
                    Icon(
                        imageVector = Icons.Default.DateRange,
                        contentDescription = "Choose date"
                    )
                }
            }
        )

        Box {
            OutlinedTextField(
                value = viewModel.country,
                onValueChange = {},
                label = { Text("Country") },
                readOnly = true,
                modifier = Modifier.fillMaxWidth(),
                trailingIcon = {
                    IconButton(
                        onClick = { countryMenuExpanded = true }
                    ) {
                        Icon(
                            imageVector = Icons.Default.ArrowDropDown,
                            contentDescription = "Choose country"
                        )
                    }
                }
            )

            DropdownMenu(
                expanded = countryMenuExpanded,
                onDismissRequest = { countryMenuExpanded = false }
            ) {
                countries.forEach { country ->
                    DropdownMenuItem(
                        text = { Text(country) },
                        onClick = {
                            viewModel.updateCountry(country)
                            countryMenuExpanded = false
                        }
                    )
                }
            }
        }

        Button(
            onClick = {
                val saved = viewModel.saveTrip()
                if (saved) {
                    errorMessage = null
                    onSubmitSuccess()
                } else {
                    errorMessage = "请先把姓名、邮箱、日期和国家都填完整。"
                }
            },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("Submit")
        }

        errorMessage?.let {
            Text(
                text = it,
                color = MaterialTheme.colorScheme.error
            )
        }
    }
}

kotlin

@Composable
fun DiaryScreen(viewModel: UserDataViewModel) {
    val trips = viewModel.tripList

    if (trips.isEmpty()) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(24.dp),
            contentAlignment = Alignment.Center
        ) {
            Text("还没有 Trip 资料，请先到 Trip 页面新增一笔。")
        }
        return
    }

    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        item {
            Text(
                text = "Trip Diary",
                style = MaterialTheme.typography.headlineSmall
            )
        }

        items(trips) { trip ->
            Card(
                modifier = Modifier.fillMaxWidth(),
                elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
            ) {
                Column(
                    modifier = Modifier.padding(16.dp),
                    verticalArrangement = Arrangement.spacedBy(6.dp)
                ) {
                    Text("Full Name:${trip.fullName}")
                    Text("Email:${trip.email}")
                    Text("Trip Date:${trip.tripDate}")
                    Text("Country:${trip.country}")
                }
            }
        }
    }
}

kotlin

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TripDiaryApp(viewModel: UserDataViewModel) {
    val navController = rememberNavController()

    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text("Trip Diary App")
                },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = Color(0xFFB39DDB),
                    titleContentColor = Color.White
                )
            )
        },
        bottomBar = {
            NavigationBar {
                val navBackStackEntry by navController.currentBackStackEntryAsState()
                val currentDestination = navBackStackEntry?.destination

                TripDestination.entries.forEach { destination ->
                    NavigationBarItem(
                        icon = {
                            Icon(
                                imageVector = destination.icon,
                                contentDescription = destination.label
                            )
                        },
                        label = { Text(destination.label) },
                        selected = currentDestination?.route == destination.route,
                        onClick = {
                            navController.navigate(destination.route) {
                                popUpTo(navController.graph.findStartDestination().id) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        }
                    )
                }
            }
        }
    ) { paddingValues ->
        NavHost(
            navController = navController,
            startDestination = TripDestination.HOME.route,
            modifier = Modifier.padding(paddingValues)
        ) {
            composable(TripDestination.HOME.route) {
                TripHomeScreen()
            }

            composable(TripDestination.TRIP.route) {
                TripScreen(
                    viewModel = viewModel,
                    onSubmitSuccess = {
                        navController.navigate(TripDestination.DIARY.route) {
                            launchSingleTop = true
                        }
                    }
                )
            }

            composable(TripDestination.DIARY.route) {
                DiaryScreen(viewModel = viewModel)
            }
        }
    }
}

kotlin

class MainActivity : ComponentActivity() {

    private val userDataViewModel: UserDataViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TripDiaryAppTheme {
                TripDiaryApp(viewModel = userDataViewModel)
            }
        }
    }
}

Lab Week 6 Summary

Overview

Lab Week 6 Summary

Overview

Goal

Task 0: 创建项目并补齐依赖

Step 0.1：创建新项目

Step 0.2：在模块级 build.gradle.kts 加入导航依赖

Step 0.3：Sync Project

Task 1: 创建 3 个基础 Screen

Step 1.1：创建 Home.kt

Step 1.2：创建 History.kt 和 Profile.kt

Step 1.3：先单独验证一个 Screen 能不能显示

Task 2: 创建 routes / destinations

Step 2.1：创建 Destination.kt

Step 2.2：确认项目结构清楚

Task 3: 实作 Expanded Modal Navigation Rail

Step 3.1：准备 rail 顶部关闭图标

Step 3.2：创建 ExpandedModalNavigationRail() 组合函数

Step 3.3：在 MainActivity.kt 调用它

Task 4: 实作 Bottom Navigation Bar

Step 4.1：创建 BottomNavigationBar() 组合函数

Step 4.2：切换 MainActivity.kt 的入口

Step 4.3：运行并验证 Bottom Navigation

Task 5: Problem Solving - 完成 Trip Diary App

Step 5.1：新建第二个项目，并准备图片资源

Step 5.2：建立资料模型和共享 ViewModel

Step 5.3：建立新的 destinations

Step 5.4：创建 TripHomeScreen.kt

Step 5.5：创建 TripScreen.kt

Step 5.6：创建 DiaryScreen.kt

Step 5.7：创建整个 App 的导航骨架

Step 5.8：运行并完整验证

Summary

本周必须理解的知识点

1）Compose Navigation 的 3 个核心角色

2）为什么 route 要单独定义

3）为什么 Scaffold 不能省

4）为什么 modal rail 需要 coroutine

5）为什么 Trip / Diary 要用 ViewModel

关键概念对比

Navigation Rail vs Bottom Navigation Bar

NavController vs NavHost vs NavGraph

popUpTo vs launchSingleTop vs restoreState

route vs screen

常见报错与排查

1）rememberNavController / NavHost / composable 全都报红

2）by navController.currentBackStackEntryAsState() 报 getValue 相关错误

3）R.drawable.menu_open_24dp 报错

4）Icons.Default.xxx 报 unresolved reference

5）页面能跑，但点导航没反应

6）Trip 填完了，Diary 还是空的

7）DatePicker 没弹出来

老师可能会问什么

1）为什么 rail 和 bottom bar 都能导航，但代码长得不一样？

2）为什么需要 currentBackStackEntryAsState()？

3）为什么要写 popUpTo + launchSingleTop + restoreState？

4）为什么 Scaffold 的 paddingValues 要传给 NavHost？

5）为什么 Trip 和 Diary 之间适合用 ViewModel？

6）为什么 Diary 要用 LazyColumn，不用普通 Column？

7）Navigation Rail 和 Bottom Navigation 该怎么选？

Step 0.2：在模块级 `build.gradle.kts` 加入导航依赖

Step 1.1：创建 `Home.kt`

Step 1.2：创建 `History.kt` 和 `Profile.kt`

Step 2.1：创建 `Destination.kt`

Step 3.2：创建 `ExpandedModalNavigationRail()` 组合函数

Step 3.3：在 `MainActivity.kt` 调用它

Step 4.1：创建 `BottomNavigationBar()` 组合函数

Step 4.2：切换 `MainActivity.kt` 的入口

Step 5.4：创建 `TripHomeScreen.kt`

Step 5.5：创建 `TripScreen.kt`

Step 5.6：创建 `DiaryScreen.kt`

3）为什么 `Scaffold` 不能省

`popUpTo` vs `launchSingleTop` vs `restoreState`

1）`rememberNavController` / `NavHost` / `composable` 全都报红

2）`by navController.currentBackStackEntryAsState()` 报 `getValue` 相关错误

3）`R.drawable.menu_open_24dp` 报错

4）`Icons.Default.xxx` 报 unresolved reference

6）`Trip` 填完了，`Diary` 还是空的

2）为什么需要 `currentBackStackEntryAsState()`？

3）为什么要写 `popUpTo + launchSingleTop + restoreState`？

4）为什么 `Scaffold` 的 `paddingValues` 要传给 `NavHost`？

5）为什么 `Trip` 和 `Diary` 之间适合用 ViewModel？

6）为什么 `Diary` 要用 `LazyColumn`，不用普通 `Column`？