JetpackCompose组件介绍-Top app bar

Table of Contents

此图片来自Material You 官网

本着今日事，今日毕的原则，决定把Top app bar也顺带记录下 #

本文章将会使用Jetpack Compose仿造Material You官网所出示4个Bar的样式

Center-aligned #

使用CenterAlignedTopAppBar组件

fun mainTopAppBar(){
    Column {
        CenterAlignedTopAppBar (
            // elevation = 4.dp,
            title = {
                Text(
                    "Title Large"
                )
            },
            // backgroundColor =  MaterialTheme.colors.primarySurface,
            navigationIcon = {
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.Menu, "Menu")
                }
            }, actions = {
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.PersonPin, "PersonPin")
                }
            })
        // Screen
    }
}

Small #

使用TopAppBar组件

fun mainTopAppBar() {
    Column {
        TopAppBar(
            // elevation = 4.dp,
            title = {
                Text(
                    "Title Large"
                )
            },
            // backgroundColor =  MaterialTheme.colors.primarySurface,
            navigationIcon = {
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.ArrowBack, null)
                }
            }, actions = {
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.AttachFile, "AttachFile")
                }
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.Today, "Today")
                }
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.MoreVert, "MoreVert")
                }
            })
        // Screen
    }
}

Medium #

使用MediumTopAppBar组件

fun mainTopAppBar() {
    Column {
        MediumTopAppBar(
            // elevation = 4.dp,
            title = {
                Text(
                    "Headline Small"
                )
            },
            // backgroundColor =  MaterialTheme.colors.primarySurface,
            navigationIcon = {
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.ArrowBack, null)
                }
            }, actions = {
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.AttachFile, "AttachFile")
                }
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.Today, "Today")
                }
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.MoreVert, "MoreVert")
                }
            })
        // Screen
    }
}

Large #

使用LargeTopAppBar组件

fun TopAppBarSample() {
    Column {
        LargeTopAppBar(
            // elevation = 4.dp,
            title = {
                Text(
                    "Meadline Large"
                )
            },
            // backgroundColor =  MaterialTheme.colors.primarySurface,
            navigationIcon = {
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.ArrowBack, null)
                }
            }, actions = {
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.AttachFile, "AttachFile")
                }
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.Today, "Today")
                }
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.MoreVert, "MoreVert")
                }
            })
        // Screen
    }
}

几种TopBar的参数都是差不多的，需要更改为其他Bar也很方便，只需要修改名称