技術標籤：Jetpack-ComposeToolBarJetpackComposeTopAppBarBottomAppBar

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
 

屬性引數含義：

第二個函式：

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

屬性引數含義：

該函式跟第一個函式相比，我們可以更方便的自定義佈局內容。該函式跟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

屬性引數含義：

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)
            }
        }
    )
}

預覽效果如下所示：

2.2、 BottomAppBar

我們直接宣告一個底部標題欄，然後水平放置文字和一個操作按鈕，Spacer相當於把去除Text和IconButtom的區域全部填充滿了，程式碼如下所示：

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

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

效果圖如下所示：

3、版本更新

• 暫無

4、未解決問題

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