Android Jetpack Compose 是否支持工具栏小部件？答案

【问题标题】：Does Android Jetpack Compose support Toolbar widget?Android Jetpack Compose 是否支持工具栏小部件？
【发布时间】：2020-05-10 21:43:07
【问题描述】：

我想在 Jetpack Compose 中使用工具栏。它有这样的 Composable 组件吗？

【问题讨论】：

标签： android android-toolbar androidx android-jetpack android-jetpack-compose

【解决方案1】：

使用1.0.x，您可以使用TopAppBar。

最好的方法是与Scaffold 一起使用。比如：

Scaffold(
    topBar = {
        TopAppBar(
            title = {
                Text(text = "TopAppBar")
            },
            navigationIcon = {
                IconButton(onClick = { }) {
                    Icon(Icons.Filled.Menu,"")
                }
            },
            backgroundColor = Color.Blue,
            contentColor = Color.White,
            elevation = 12.dp
        )
    }, content = {
        
    })

【讨论】：

【解决方案2】：

使用

compose_version = '1.0.0-beta01'

TopAppBar(
        title = {
            Text(text = "Pets Show")
        },
        navigationIcon = {
            IconButton(onClick = { }) {
                Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu Btn")
            }
        },
        backgroundColor = Color.Transparent,
        contentColor = Color.Gray,
        elevation = 2.dp
    )

【讨论】：

【解决方案3】：

是的，它是TopAppBar（androidx.ui.material）。它允许您指定标题、颜色、导航图标和操作。请参阅the documentation 了解更多信息。

【讨论】：

【解决方案4】：

TopAppBar 是一个预定义的可组合，可以帮助您完成您想要的。您可以将它与Scaffold 一起使用，以获得基本的材料设计脚手架来连接 TopAppBar。

这是一个带有详细 cmets 的示例，看看如何使用它 - https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/1f843cb2bf18b9988a0dfc611b631f216f02149e/app/src/main/java/com/example/jetpackcompose/material/FixedActionButtonActivity.kt#L70

复制到这里方便使用

// Scaffold is a pre-defined composable that implements the basic material design visual
    // layout structure. It takes in child composables for all the common elements that you see
    // in an app using material design - app bar, bottom app bar, floating action button, etc. It
    // also takes care of laying out these child composables in the correct positions - eg bottom
    // app bar is automatically placed at the bottom of the screen even though I didn't specify
    // that explicitly.
    Scaffold(
        scaffoldState = scaffoldState,
        topAppBar = { TopAppBar(title = { Text("Scaffold Examples") }) },
        bottomAppBar = { fabConfiguration ->
            // We specify the shape of the FAB bu passing a shape composable (fabShape) as a
            // parameter to cutoutShape property of the BottomAppBar. It automatically creates a
            // cutout in the BottomAppBar based on the shape of the Floating Action Button.
            BottomAppBar(fabConfiguration = fabConfiguration, cutoutShape = fabShape) {}
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = {},
                // We specify the same shape that we passed as the cutoutShape above.
                shape = fabShape,
                // We use the secondary color from the current theme. It uses the defaults when
                // you don't specify a theme (this example doesn't specify a theme either hence
                // it will just use defaults. Look at DarkModeActivity if you want to see an
                // example of using themes.
                backgroundColor = MaterialTheme.colors.secondary
            ) {
                IconButton(onClick = {}) {
                    Icon(asset = Icons.Filled.Favorite)
                }
            }
        },
        floatingActionButtonPosition = Scaffold.FabPosition.CenterDocked,
        bodyContent = { modifier ->
            // Vertical scroller is a composable that adds the ability to scroll through the
            // child views
            VerticalScroller {
                // Column is a composable that places its children in a vertical sequence. You
                // can think of it similar to a LinearLayout with the vertical orientation.
                Column(modifier) {
                    repeat(100) {
                        // Card composable is a predefined composable that is meant to represent
                        // the card surface as specified by the Material Design specification. We
                        // also configure it to have rounded corners and apply a modifier.
                        Card(color = colors[it % colors.size],
                            shape = RoundedCornerShape(8.dp),
                            modifier = Modifier.padding(8.dp)
                        ) {
                            Spacer(modifier = Modifier.fillMaxWidth() + Modifier.preferredHeight(200.dp))
                        }
                    }
                }
            }
        }
    )

【讨论】：