什么是AppBar vs ToolBar？

Question

所有material-ui示例均在Appbar中显示工具栏。为什么不只是Appbar？两者有什么区别？

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

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

那么material-ui工具栏最终会消失吗？

Answer 1

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

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

AppBar可以在没有工具栏的情况下使用，并且不必将工具栏放置在AppBar中。如果您希望标题看起来像工具栏，则可以进行<AppBar><Toolbar>...</Toolbar></AppBar>。如果您想要在页面中心显示一个栏，只是为了炫耀图标，则不带AppBar的工具栏将很有意义。

Answer 2

我正在查看每个组件产生的默认CSS属性。 工具栏的主要目的是通过内联显示（子元素彼此相邻）显示其子项，而应用栏则不行。 AppBar 组件使用 display：flex 和 flex-direction：column ，这意味着直接后代彼此堆叠。另一方面，工具栏也使用 display：flex ，但未设置 flex-direction ，这意味着它使用了默认值：< em> row 。就是说，按钮组件使用了 display：inline-block 。这就是为什么元素在工具栏组件内彼此相邻放置的原因。

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

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

显示此代码的结果 here

但是，如果我们删除工具栏并将按钮放置在 AppBar 组件的正下方：

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

结果将有很大的不同（显示为here），因为现在这些按钮是 AppBar 组件的直接后代，因此它们将堆叠在一起。 / p>

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