Jetpack Compose 教學上課講義【從零開始學 Jetpack Compose 程式設計】Scaffold 鷹架介紹 - topBar

 

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

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

Scaffold 鷹架介紹

https://developer.android.com/jetpack/compose/layouts/material#scaffold

最基本標題

@Composable
fun Demo() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Title") },
            )
        }
    ) {
        //畫面內容
    }
}

置中標題

@Composable
fun Demo() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text("Title",
                    textAlign = TextAlign.Center,
                    modifier = Modifier.fillMaxWidth()) 
                        },
            )
        }
    ) {
        //畫面內容
    }
}

返回按鈕

@Composable
fun Demo() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Title") },
                navigationIcon = {
                    IconButton(
                        onClick = {

                        }
                    ) {
                        Icon(
                            Icons.Default.ArrowBack,
                            contentDescription = "Menu"
                        )
                    }
                },
            )
        }
    ) {
        //畫面內容
    }
}

更多按鈕

@Composable
fun Demo() {
    var showMenu by remember { mutableStateOf(false) }

    TopAppBar(
        title = { Text("Title") },
        actions = {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(Icons.Default.Refresh, contentDescription = "Menu")
            }
            IconButton(onClick = { showMenu = !showMenu }) {
                Icon(Icons.Default.MoreVert, contentDescription = "Menu")
            }
            DropdownMenu(
                expanded = showMenu,
                onDismissRequest = { showMenu = false }
            ) {
                DropdownMenuItem(onClick = { /*TODO*/ }) {
                    Icon(Icons.Filled.Favorite,contentDescription = "Menu")
                }
                DropdownMenuItem(onClick = { /*TODO*/ }) {
                    Icon(Icons.Filled.Call,contentDescription = "Menu")
                }
            }
        }
    )
}

Floating action buttons 浮動按鈕

預設位置在右邊，可以更改為中間

@Composable
fun Demo() {
    Scaffold(
        floatingActionButtonPosition = FabPosition.End,
        floatingActionButton = { FloatingActionButton(onClick = {

        }){
            Text("X")
        } },
    ) {
        //畫面內容
    }
}