什么是 AppBar 与 ToolBar？

Posted 2023-02-22

【中文标题】什么是 AppBar 与 ToolBar？

【英文标题】：What is AppBar vs ToolBar?

【发布时间】：2019-03-10 05:20:33

【问题描述】：

所有 material-ui 示例都在 Appbar 中显示 Toolbar。为什么不只是 Appbar？两者有什么区别？

https://material.io/design/components/没有有工具栏组件，只有“应用栏：顶部”。

https://material.io/develop/web/components/toolbar/ 说“现有的 MDCToolbar 组件和样式将在未来的版本中删除”

那么material-ui Toolbar最终会消失吗？

【参考方案1】：

我正在查看每个组件生成的默认 CSS 属性。 Toolbar 的主要目的是通过内联显示（元素彼此相邻放置）来显示其子项，而 Appbar 不这样做。 AppBar 组件使用 display: flex 和 flex-direction: column，这意味着直接的后代是相互堆叠的。另一方面，Toolbar也使用了display: flex，但是没有设置flex-direction，这意味着它使用了它的默认值：行。话虽如此，Button 组件使用 display: inline-block。这就是 Toolbar 组件中元素彼此相邻放置的原因。

例如，我们有一个 Appbar 和一个 Toolbar，其中有两个 Button 作为子项：

<AppBar>
    <Toolbar>
        <Button variant="outlined" color="inherit" >
            Button 1
        </Button>
        <Button variant="outlined" color="inherit">
            Button 2
        </Button>
    </Toolbar>
</AppBar>

这段代码的结果是：

但是，如果我们移除 Toolbar 并将 Button 直接放在 AppBar 组件下：

<AppBar>
    <Button variant="outlined" color="inherit" >
        Button 1
    </Button>
    <Button variant="outlined" color="inherit">
        Button 2
    </Button>
</AppBar>

结果会很不一样，如下图所示，因为现在按钮是 AppBar 组件的直接后代，因此它们将堆叠在一起。

如您所见，AppBar 和 Toolbar 有不同的用途。这就是为什么我认为工具栏永远不会消失的原因。

【讨论】：

我理解 CSS 的不同之处。但有什么不同的目的？

@Chiptus 你有没有发现真正的区别？

@PrivateOmega 实际上没有，我只是明白他们需要在一起

我想补充一点，AppBar 可能只应该使用once per page/section，因为它创建了一个标题元素。 Sectioning elements 包括旁边、页脚、表单、页眉、主要、导航和部分。这为屏幕阅读器和其他可访问性工具等增加了语义价值。工具栏不会创建此元素。

【参考方案2】：

AppBar 用于构建您的文档。您将通常放置在标签中的内容放入内容中，例如页面标题和导航链接。如果您按 F12 检查您的页面，您会注意到 AppBar 创建了一个<header> 标记。 -> 因此，AppBar 用于为您的页面提供一个放置介绍和导航内容的位置

您可以将 工具栏 可视化为现实生活中的工具带。在虚拟世界中，我们在其上放置图标和按钮，而不是工具。您还可以在工具栏中添加您的品牌名称，就像制造商在他们的腰带上那样做。 -> 工具栏是一个包装器，您可以在其中将元素放置在水平线上。

AppBar 可以在没有 Toolbar 的情况下使用，并且 Toolbar 不必放置在 AppBar 内。如果你想让你的标题看起来像一个工具栏，那么<AppBar><Toolbar>...</Toolbar></AppBar> 是有意义的。如果您希望在页面中心有一个栏只是为了展示图标，那么没有 AppBar 的 Toolbar 将是有意义的。