Jetpack Compose 教學上課講義【從零開始學 Jetpack Compose 程式設計】Navigation 頁面跳轉

作者： -

 

【從零開始學 Jetpack Compose 程式設計】

線上教學課程目錄: https://bit.ly/3JF4SFA
Youtube 課程播放清單：https://bit.ly/3tFjRbx
Udemy 線上課程：https://bit.ly/3MbVnhO


導航原則

https://developer.android.com/guide/navigation/navigation-principles

頁面跳轉範例

https://i.imgur.com/FUP0Voq.jpeg

依賴庫

implementation "androidx.navigation:navigation-compose:2.4.2"

Navigation 基本頁面切換

＊先帶大家看 APP 畫面

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController


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

sealed class Routes(val route: String) {
    object APage : Routes("a_page")
    object BPage : Routes("b_page")
    object CPage : Routes("c_page")
}

@Composable
fun Demo(startDestination: String = Routes.APage.route) {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = startDestination
    ) {
        composable(
            Routes.APage.route
        ) {
            APage(navController)
        }

        composable(
            Routes.BPage.route
        ) {
            BPage(navController)
        }

        composable(
            Routes.CPage.route
        ) {
            CPage(navController)
        }
    }

}

@Composable
fun APage(navController: NavHostController) {
    BasePage("A 頁面內容", "前往") {
        navController.navigate(Routes.BPage.route)
    }
}

@Composable
fun BPage(navController: NavHostController) {
    BasePage("B 頁面內容", "前往") {
        navController.navigate(Routes.CPage.route)
    }
}

@Composable
fun CPage(navController: NavHostController) {
    BasePage("C 頁面內容", "返回") {
        navController.navigateUp()
    }
}

@Composable
fun BasePage(pageContent: String, btnContent: String, onClick: () -> Unit) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(
            pageContent,
            fontSize = 30.sp,
            modifier = Modifier.padding(bottom = 100.dp)
        )
        Button(
            modifier = Modifier
                .width(150.dp)
                .height(100.dp),
            onClick = {
                onClick()
            }
        ) {
            Text(btnContent)
        }
    }
}

返回上一頁

//navigate 會 push 放入 Stack
//navController.navigate(Routes.APage.route)

//navigateUp 會把當下這一頁 pop 出來 
navController.navigateUp

移除過場頁

類似註冊頁，註冊成功移除註冊相關流程頁面，即可以使用 popUpTo

Ａ->Ｂ->Ｃ->Ａ->Ａ
popUpTo 移除過場頁，返回Ａ頁，可以 pop up 移除Ｂ、Ｃ頁

Ａ->Ｂ->Ｃ->A
popUpToInclusive = true 可以減少兩個 Ａ 頁產生。

@Composable
fun CPage(navController: NavHostController) {
    BasePage("C 頁面內容", "返回") {

        navController.navigate(Routes.APage.route){
            popUpTo(Routes.APage.route) {
                inclusive = true
            }
        }
    }
}

完整範例

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController


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

sealed class Routes(val route: String) {
    object APage : Routes("a_page")
    object BPage : Routes("b_page")
    object CPage : Routes("c_page")
}

@Composable
fun Demo(startDestination: String = Routes.APage.route) {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = startDestination
    ) {
        composable(
            Routes.APage.route
        ) {
            APage(navController)
        }

        composable(
            Routes.BPage.route
        ) {
            BPage(navController)
        }

        composable(
            Routes.CPage.route
        ) {
            CPage(navController)
        }
    }

}

@Composable
fun APage(navController: NavHostController) {
    BasePage("A 頁面內容", "前往") {
        navController.navigate(Routes.BPage.route)
    }
}

@Composable
fun BPage(navController: NavHostController) {
    BasePage("B 頁面內容", "前往") {
        navController.navigate(Routes.CPage.route)
    }
}

@Composable
fun CPage(navController: NavHostController) {
    BasePage("C 頁面內容", "返回") {

        navController.navigate(Routes.APage.route){
            popUpTo(Routes.APage.route) {
                inclusive = true
            }
        }

    }
}

@Composable
fun BasePage(pageContent: String, btnContent: String, onClick: () -> Unit) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(
            pageContent,
            fontSize = 30.sp,
            modifier = Modifier.padding(bottom = 100.dp)
        )
        Button(
            modifier = Modifier
                .width(150.dp)
                .height(100.dp),
            onClick = {
                onClick()
            }
        ) {
            Text(btnContent)
        }
    }
}

Navigation 基本資料傳遞

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.NavType
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.navigation.navArgument


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

sealed class Routes(val route: String) {
    object APage : Routes("a_page")
    object BPage : Routes("b_page")
}

@Composable
fun NavGraph(startDestination: String = Routes.APage.route) {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = startDestination
    ) {
        composable(
            Routes.APage.route
        ) {
            APage(navController)
        }

        composable(
            Routes.BPage.route + "/{student_name}/{student_score}",
            arguments = listOf(
                navArgument("student_name") { type = NavType.StringType },
                navArgument("student_score") { type = NavType.IntType },
            ),
        ) {
            BPage(
                navController,
                it.arguments?.getString("student_name", "") ?: "",
                it.arguments?.getInt("student_score") ?: 0,
            )
        }
    }

}

@Composable
fun APage(navController: NavHostController) {
    BasePage("A頁面內容", "前往") {
        navController.navigate(Routes.BPage.route + "/HKT/100")
    }
}

@Composable
fun BPage(navController: NavHostController, student_name: String, student_score: Int) {
    BasePage("Ｂ頁面內容 \n 學生姓名：$student_name \n 成績：$student_score", "返回") {
//        navController.navigate(Routes.APage.route)
        navController.navigateUp()
    }
}

@Composable
fun BasePage(pageContent: String, btnContent: String, onClick: () -> Unit) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(
            pageContent,
            fontSize = 30.sp,
            modifier = Modifier.padding(bottom = 100.dp)
        )
        Button(
            modifier = Modifier
                .width(150.dp)
                .height(100.dp),
            onClick = {
                onClick()
            }
        ) {
            Text(btnContent)
        }
    }
}

Navigation 可選參數資料傳遞

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.NavType
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.navigation.navArgument


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

sealed class Routes(val route: String) {
    object APage : Routes("a_page")
    object BPage : Routes("b_page")
}

@Composable
fun NavGraph(startDestination: String = Routes.APage.route) {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = startDestination
    ) {
        composable(
            Routes.APage.route
        ) {
            APage(navController)
        }

        composable(
            Routes.BPage.route + "?student_name={student_name}&student_score={student_score}",
            arguments = listOf(
                navArgument("student_name") {
                    type = NavType.StringType
                    defaultValue = "資料錯誤"
                },navArgument("student_score") {
                    type = NavType.IntType
                    defaultValue = -1
                },
            ),
        ) {
            BPage(
                navController,
                it.arguments?.getString("student_name", "資料錯誤") ?: "",
                it.arguments?.getInt("student_score") ?: -1,
            )
        }
    }

}

@Composable
fun APage(navController: NavHostController) {
    BasePage("A頁面內容", "前往") {
//        navController.navigate(Routes.BPage.route + "?student_name=HKT&student_score=100")
        navController.navigate(Routes.BPage.route)
    }
}

@Composable
fun BPage(navController: NavHostController, student_name: String, student_score: Int) {
    BasePage("Ｂ頁面內容 \n 學生姓名：$student_name \n 成績：$student_score", "返回") {
//        navController.navigate(Routes.APage.route)
        navController.navigateUp()
    }
}

@Composable
fun BasePage(pageContent: String, btnContent: String, onClick: () -> Unit) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(
            pageContent,
            fontSize = 30.sp,
            modifier = Modifier.padding(bottom = 100.dp)
        )
        Button(
            modifier = Modifier
                .width(150.dp)
                .height(100.dp),
            onClick = {
                onClick()
            }
        ) {
            Text(btnContent)
        }
    }
}

傳遞整包資料

依賴庫

implementation 'com.google.code.gson:gson:2.8.6'

完整範例

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.NavType
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.navigation.navArgument
import com.google.gson.Gson


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

data class Student(val name: String, val score: String)

sealed class Routes(val route: String) {
    object APage : Routes("a_page")
    object BPage : Routes("b_page")
}

@Composable
fun NavGraph(startDestination: String = Routes.APage.route) {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = startDestination
    ) {
        composable(
            Routes.APage.route
        ) {
            APage(navController)
        }

        composable(
            Routes.BPage.route + "/{student}",
            arguments = listOf(
                navArgument("student") { type = NavType.StringType }
            ),
        ) {
            val defaultStudent = it.arguments?.getString("student", "") ?: ""
            val student = Gson().fromJson(defaultStudent, Student::class.java)
            BPage(
                navController,
                student
            )
        }
    }

}

@Composable
fun APage(navController: NavHostController) {
    val student = Student("HKT", "100")
    val gson = Gson().toJson(student)

    BasePage("A頁面內容", "前往") {
        navController.navigate(Routes.BPage.route + "/$gson")
    }
}

@Composable
fun BPage(navController: NavHostController, student: Student) {

    BasePage("Ｂ頁面內容 \n 學生姓名：${student.name}  \n 成績：${student.score}", "返回") {
        navController.navigateUp()
    }
}

@Composable
fun BasePage(pageContent: String, btnContent: String, onClick: () -> Unit) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(
            pageContent,
            fontSize = 30.sp,
            modifier = Modifier.padding(bottom = 100.dp)
        )
        Button(
            modifier = Modifier
                .width(150.dp)
                .height(100.dp),
            onClick = {
                onClick()
            }
        ) {
            Text(btnContent)
        }
    }
}

這個網誌中的熱門文章

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)

作者： -
圖片
【Flutter 程式設計入門實戰 30 天】 線上教學課程目錄  使用 Dart 程式語言，開發 Android 和 iOS APP 應用程式。 HKT 講師，相關課程 HKT 講師，相關課程： 🎬 從零開始學 kotlin 程式設計 免費講義 https://bit.ly/2Kx7GrM 🎬 從零開始學 Jetpack Compose 程式設計 https://bit.ly/3JF4SFA 🎬Android 入門開發實戰：口罩地圖(Kotlin) 免費講義 https://bit.ly/2KKZcju 🎬從零開始學 Dart 程式設計 免費講義 https://bit.ly/2OJW6hl 🎬 Flutter 程式設計入門實戰 免費講義 https://bit.ly/37L47Ij 🎬從零開始學 Java 程式設計 免費講義 https://bit.ly/2WlCn6y 🎬 從零開始學 Swift 程式設計 免費講義 https://bit.ly/3ekjsEP 2024 最新 Flutter 教學：Flutter 終極指南 https://www.youtube.com/playlist?list=PL9muXAsyRXOEBEXU2gqKKIhanPqREbvsm Flutter 程式設計入門實戰 30 天 學習 Flutter 程式語言最佳指南，Flutter 程式語言基礎入門課程 課程說明 Flutter 是由 Google 主導的 Dart 程式語言研發出來的開源跨平台軟體框架 (Framework)，可開發 Android、iOS APP 行動應用程式、Web 網頁服務、Windows、macOS、Linux 和下一世代神秘 Fuchsia 作業系統桌面應用程式。且具有相當高效率 120FPS 的渲染性能，豐富的UI元件，媲美 Native 原生效能體驗。眾多優勢之下使得 Flutter 成為今年最熱門的新技術。看得出來 Google 未來將透過 Flutter 一統江山。只需要用一套程式語言就可以在多平台上任遊運行。 這門課程完全適合初學者，無須任何編寫過程式碼經驗，我們將從零基礎開始介紹，編寫程式語言需具備的基礎知識。完全從零開始，初學者無痛上手，將會了解如何使用 Dart 程式語言，由淺入深，快速掌握開發 Flutter ...
Read more »

nano 文字編輯器

作者： -
圖片
新建／打開文件 nano 路徑+文件名 複製、剪下和貼上 # 複製一整行: Alt +6 # 剪下一整行： Ctrl +K # 貼上 Ctrl +U 搜尋 Ctrl+W 搜尋關鍵字 存檔 Ctrl+O 退出離開 nano 文字編輯器 Ctrl+X 如果你修改了文件，尚未存檔，會詢問你是否需要保存修改。輸入Y確認保存，輸入N不保存，按Ctrl+C取消返回。 如果輸入了Y，下一步會讓你輸入想要保存的文件名。如果不需要修改文件名，直接按 enter即可；若想要保存成別的名字或是另存檔名，則輸入新的名稱然後按 enter即可。這個時候也可用Ctrl+C來取消返回。
Read more »

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

作者： -
圖片
【從零開始學 Kotlin 程式設計】 線上教學課程目錄： https://bit.ly/2Kx7GrM Youtube 課程播放清單： https://bit.ly/3qJ5a5Q 本課程開發環境： Intellij IDEA 2023.1.2 Kotlin 1.8.x Java JDK 17.0.x (Eclipse Temurin - AdoptOpenJDK) HKT 講師，線上教學相關課程 HKT 講師，相關課程： 🎬 Jetpack Compose 教學講義 https://bit.ly/3JF4SFA 🎬 Swift 教學講義 https://bit.ly/3ekjsEP 🎬 Android 入門開發實戰：口罩地圖(Kotlin) 教學講義 https://bit.ly/2KKZcju 🎬 Dart 教學講義 https://bit.ly/2OJW6hl 🎬 Flutter 教學講義 https://bit.ly/37L47Ij 🎬 Java 教學講義 https://bit.ly/2WlCn6y 🎬 kotlin 教學講義 https://bit.ly/2Kx7GrM 從零開始學 Kotlin 程式設計 Kotlin 程式語言基礎入門課程，寫給新手的開發筆記，學習 Kotlin 最佳指南。這是一個非常好的學習資源，它可以幫助初學者更快地學習 Kotlin 程式語言。 課程說明 Kotlin 又被稱之為 Android 界的 Swift，Google I/O 2017 年，正式宣布 Kotlin 成為 Android 官方開發語言。Android Studio 3 官方正式直接支援 Kotlin 語法，可以使用 Kotlin 來開發 Android 行動應用程式。 Google I/O 2019 年，再次對外宣布 Kotlin 已成為 Android 第一首選開發語言 (First Language)。kotlin 的重要性今非昔比，你還在用 Java 開發 Android 應用程式嗎？ 這門課程完全適合初學者，無須任何撰寫過程式碼經驗，我們將從零基礎開始介紹，撰寫程式語言需具備的基礎知識。我們將從安裝 Kotlin 開發環境，然後學習寫第一行 Kotlin 程式。接下來介紹 Kotlin 基礎語法、邏輯判斷條件控制並討論循環控制...
Read more »

16天記下7000單字

作者： -
圖片
最近剛好在看7000單字，正不知道怎麼下手來解碼這龐大的一隻害蟲， 在網路上正好看到了這個「800個句子背下7000個單詞」，又名「16天記下7000單字」， 顧名思義一天只要看懂50個句子，16天後就可以看懂800個句子也記下7000個單字。 感覺好像還蠻厲害的。但出處不明，不知那個好心人士分享的，所以我也無法註明出處， 這點到是有點可惜。 相關文章: 16天記下7000單字 傳說中的100句英語可以幫你背7000單詞-公開大解密 傳說中的7000單字由來??? 800個有趣句子幫你記憶7000個單字   1. With my own ears I clearly heard the heart beat of the nuclear bomb. 我親耳清楚地聽到原子彈的心臟的跳動。 2. Next year the bearded bear will bear a dear baby in the rear. 明年，長鬍子的熊將在後方產一頭可愛的小崽。 3. Early I searched through the earth for earthenware so as to research in earthquake. 早先我在泥土中搜尋陶器以研究地震。 4. I learn that learned earnest men earn much by learning. 我得知有學問而認真的人靠學問掙很多錢。 5. She swears to wear the pearls that appear to be pears. 她發誓要戴那些看起來像梨子的珍珠。 6. I nearly fear to tear the tearful girl's test paper. 我幾乎害怕撕那個淚流滿面的女孩的試卷。 7. The bold folk fold up the gold and hold it in hand. 大膽的人們將黃金折疊起來拿在手裡。 8. The customers are accustomed to the disgusting custom. 顧客們習慣了令人討厭的風俗。 ...
Read more »

Android Studio 歷代版本下載點

作者： -
圖片
HKT 線上教室     Java 線上教學課程目錄   Kotlin 線上教學課程目錄   Flutter 線上教學課程目錄 Android Studio 歷史版本下載點 以下 Android Studio 安裝檔，下載點皆取自於官方，KT 只是順手做個紀錄，幫助突然有需要時光回溯到舊版本的同學們，有一個地方可以傳送回去。 Android Studio 版本 作業系統 下载點 4.0.1 正式版   Windows 64bit    android-studio-ide-193.6626763-windows.exe  Mac OS X    android-studio-ide-193.6626763-mac.dmg  3.6.1 正式版  Windows 64bit android-studio-ide-192.6241897-windows.exe     Mac OS X     android-studio-ide-192.6241897-mac.dmg 3.5.3 正式版 Windows 64bit    android-studio-ide-191.5977832-windows.exe Mac OS X     android-studio-ide-191.5977832-mac.dmg 3.4.２ 正式版  Windows 64bit android-studio-ide-183.5692245-windows.exe  Mac OS X android-studio-ide-183.5692245-mac.dmg    3.3.2 正式版  Windows 64bit android-studio-ide-182.5314842-windows.exe  Mac OS X android-studio-ide-182.5314842-mac.dmg  3.2.1 正式版  Windows 64bit  ...
Read more »