Jetpack Compose - TopAppBar、BottomAppBar

- 0、介紹
- 1、屬性一覽
- - - 1.1、TopAppBar
    - 1.2、 BottomAppBar
- 2、使用示例
- - - 2.1、 TopAppBar
    - 2.2、 BottomAppBar
- 3、版本更新
- 4、未解決問題

Compose系列文章，請點原文閱讀。原文，是時候學習Compose了！

0、介紹

關于AppBar其實就是XML中的androidx.appcompat.widget.Toolbar，關于這個控件可能我們大家用的不會很多，一般都是自己自定義的，這篇文章簡單來學習下Compose中的方案。

TopAppBar

TopAppBar顯示與目前螢幕有關的資訊和操作，位于螢幕的頂部。一般包含标題，導航圖示和其他的更多操作等。

BottomAppBar

BottomAppBar也是顯示與目前螢幕有關的資訊和操作，但是其位于螢幕的底部。

1、屬性一覽

【目前基于alpha09版本】

1.1、TopAppBar

該控件有兩個函數：

@Composable fun TopAppBar(
    title: () -> Unit, 
    modifier: Modifier = Modifier, 
    navigationIcon: () -> Unit = null, 
    actions: RowScope.() -> Unit = {}, 
    backgroundColor: Color = MaterialTheme.colors.primarySurface, 
    contentColor: Color = contentColorFor(backgroundColor), 
    elevation: Dp = TopAppBarElevation
): Unit

屬性參數含義：

參數	含義
title: () -> Unit	顯示在TopAppBar中心的标題
navigationIcon: () -> Unit = null	導航圖示顯示在TopAppBar的開頭。通常應為IconButton或IconToggleButton
actions: RowScope.() -> Unit = {}	其他行為，例如設定、更多等
backgroundColor: Color = MaterialTheme.colors.primarySurface	TopAppBar的背景顔色
contentColor: Color = contentColorFor(backgroundColor)	子級内容的顔色，預設和TopAppBar的顔色相同
elevation: Dp = TopAppBarElevation	标題欄的陰影效果，設定為0則沒有陰影

第二個函數：

@Composable fun TopAppBar(
    modifier: Modifier = Modifier, 
    backgroundColor: Color = MaterialTheme.colors.primarySurface, 
    contentColor: Color = contentColorFor(backgroundColor), 
    elevation: Dp = TopAppBarElevation, 
    content: RowScope.() -> Unit
): Unit

屬性參數含義：

參數	含義
backgroundColor: Color = MaterialTheme.colors.primarySurface	TopAppBar的背景顔色
contentColor: Color = contentColorFor(backgroundColor)	子級内容的顔色，預設和TopAppBar的顔色相同
elevation: Dp = TopAppBarElevation	标題欄的陰影效果，設定為0則沒有陰影
content: RowScope.() -> Unit	該TopAppBar的内容。預設橫向布局，子級内容将水準放置

該函數跟第一個函數相比，我們可以更友善的自定義布局内容。該函數跟BottomAppBar的函數類似，是以針對該函數的效果，請參考下方的BottomAppBar的效果。

1.2、 BottomAppBar

該控件隻有一個函數，如下所示（關于他的第三個參數，其實是涉及到FloatingActionButton這個控件的，我們到這個控件的時候再講解改參數）：

@Composable fun BottomAppBar(
    modifier: Modifier = Modifier, 
    backgroundColor: Color = MaterialTheme.colors.primarySurface, 
    contentColor: Color = contentColorFor(backgroundColor), 
    cutoutShape: Shape? = null, 
    elevation: Dp = BottomAppBarElevation, 
    content: RowScope.() -> Unit
): Unit

屬性參數含義：

參數	含義
backgroundColor: Color = MaterialTheme.colors.primarySurface	TopAppBar的背景顔色
contentColor: Color = contentColorFor(backgroundColor)	子級内容的顔色，預設和BottomAppBar的顔色相同
cutoutShape: Shape? = null	将添加到BottomAppBar中的切口的形狀-當在Scaffold中一起使用BottomAppBar和FloatingActionButton時，該形狀通常應與FloatingActionButton中使用的形狀相同。此形狀将在所有側面上偏移繪制。如果為null，則将沒有切口。
elevation: Dp = BottomAppBarElevation
content: RowScope.() -> Unit	該BottomAppBar的内容。預設橫向布局，子級内容将水準放置

2、使用示例

2.1、 TopAppBar

我們使用第一個函數進行示範，我們定義了标題内容，以及傳回按鈕，然後在右側添加了兩個用于其他操作的IconButton，代碼如下：

@Composable
fun TopAppBarDemo() {
    TopAppBar(
        title = { Text("這是标題") },
        navigationIcon = {
            IconButton(onClick = { }) {
                Icon(Icons.Filled.ArrowBack)
            }
        },
        actions = {
            IconButton(onClick = { }) {
                Icon(Icons.Filled.Share)
            }
            IconButton(onClick = { }) {
                Icon(Icons.Filled.Settings)
            }
        }
    )
}

預覽效果如下所示：

Jetpack Compose - TopAppBar、BottomAppBar

2.2、 BottomAppBar

我們直接聲明一個底部标題欄，然後水準放置文本和一個操作按鈕，Spacer相當于把去除Text和IconButtom的區域全部填充滿了，代碼如下所示：

@Composable
fun BottomAppBarDemo() {
    BottomAppBar {
        Text(text = "底部标題欄")
        
        Spacer(Modifier.weight(1f, true))

        IconButton(onClick = { }) {
            Icon(Icons.Filled.Favorite)
        }
    }
}

效果圖如下所示：

Jetpack Compose - TopAppBar、BottomAppBar

3、版本更新

暫無

4、未解決問題

該控件不知道大家用的多不多，其實一般情況下我們都是自己結合App的特色統一自定義的标題欄，官方的這個目前就不多做研究了。

Jetpack Compose - TopAppBar、BottomAppBar