qt ui网格布局_材质ui网格组件简介

最新推荐文章于 2024-08-29 20:15:00 发布

weixin_26714375

最新推荐文章于 2024-08-29 20:15:00 发布

阅读量370

点赞数

原文链接：https://medium.com/the-clever-dev/intro-to-material-ui-grid-component-ecc553a93200

版权

qt ui网格布局

Material-UI Grid Component is the Material-UI (MUI) grid system option. It also has the features and APIs of MUI components that MUI users are familiar with. The question when considering using MUI Grid is: will this be superior to other grid alternatives?

Material-UI网格组件是Material-UI(MUI)网格系统选项。它还具有MUI用户熟悉的MUI组件的功能和API。考虑使用MUI Grid时的问题是：这将优于其他网格替代方法吗？

Flexbox, Bootstrap, and CSS Grid have proven their usefulness. Understandably, if you are already using Material-UI components, you may choose to use the Grid simply to maintain look and feel. If not, is the MUI Grid an attractive layout option?

Flexbox，Bootstrap和CSS Grid已证明其有用性。可以理解，如果您已经在使用Material-UI组件，则可以选择仅使用Grid来维护外观。如果不是，那么MUI Grid是有吸引力的布局选项吗？

In this introduction to the Material-UI Grid I will:

在对Material-UI网格的介绍中，我将：

Compare MUI “Fluid” Grid with bootstrap and build a simple layout.
将MUI“ Fluid ”网格与自举进行比较，并构建简单的布局。
Build a complex nested layout using MUI Grid and then build the same layout with CSS Grid.
使用MUI Grid构建复杂的嵌套布局，然后使用CSS Grid构建相同的布局。
Add a border to the complex MUI Grid and CSS Grid
为复杂的MUI网格和CSS网格添加边框

YouTube video version of this article here: https://youtu.be/1hTVO9d7Eg8.

本文的YouTube视频版本： https : //youtu.be/1hTVO9d7Eg8 。

Material-UI网格与Bootstrap的简单布局 (Material-UI Grid vs Bootstrap for a simple fluid layout)

Both Material-UI Grid and Bootstrap 4 are built using CSS’s Flexbox. Therefore, they can both implement vertical alignment, horizontal alignment, and other features of Flexbox. They also both implement a wrapping container with a 12 “column” system. The similarities are significant, but there are a few notable differences.

Material-UI Grid和Bootstrap 4都是使用CSS的Flexbox构建的。因此，它们都可以实现Flexbox的垂直对齐，水平对齐和其他功能。他们还都实现了带有12个“列”系统的包装容器。相似之处很明显，但有一些显着差异。

Material-UI Grid uses two “layout types”: containers and items. A container wraps a group of items, the items have their relative width set with attributes such as xs={6} sm={4} . Sounds kinda familiar.

Material-UI Grid使用两种“布局类型”：容器和项目。容器包装一组项目，这些项目的相对宽度设置为xs={6} sm={4}等属性。听起来有点熟悉。

Bootstrap has three layout items: containers, rows, and columns. Containers are equivalent in both libraries, and MUI Grid items === columns. The primary layout difference is that Bootstrap wraps each group of columns with <div class=”row”> . At first it seems a bit ‘div soup-y’, but it enables bootstrap to be a bit more controlled when shifting to smaller screen sizes, like so:

Bootstrap具有三个布局项目：容器，行和列。容器在两个库和MUI网格项===列中都是等效的。主要的布局差异是Bootstrap用<div class=”row”>包装每组列。乍一看似乎有点“ div汤-y”，但当转移到较小的屏幕尺寸时，它使引导程序受到更多控制，例如：

<div class="container">
  <div class="row">
    <div class="col-6 col-md-4">
      Item 1
    </div>
    <div class="col-6 col-md-4">
      Item 2
    </div>
    <div class="col-6 col-md-4">
     Item 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      Row 2
    </div>
  </div>  
</div>

Material-UI Grid can accomplish the same thing, but you’ll have to be more deliberate about the width of subsequent rows:

Material-UI Grid可以完成相同的操作，但是您必须更加仔细地考虑后续行的宽度：

<div className={classes.root}>
  <Grid container spacing={3}>
    <Grid item xs={6} sm={4}>
      <Paper className={classes.paper}>Item 1</Paper>
    </Grid>
    <Grid item xs={6} sm={4}>
      <Paper className={classes.paper}>Item 2</Paper>
    </Grid>
    <Grid item xs={6} sm={4}>
      <Paper className={classes.paper}>Item 3</Paper>
    </Grid>
    <Grid item xs={12}>
      <Paper className={classes.paper}>Item 3</Paper>
    </Grid>
  </Grid>
</div>

However, it would be challenging to control the spacing in the “wrapped row” in MUI.

但是，在MUI中控制“包装的行”中的间距将具有挑战性。

Diving into the docs, Bootstrap offers more robust features than MUI Grid. For example, .order- classes order your components regardless of their order in the HTML. Bootstrap also has its own suite of components, most of which overlap the Material-UI component library.

深入研究文档，Bootstrap提供了比MUI Grid更强大的功能。例如， .order-类对组件进行排序，而不考虑它们在HTML中的顺序。 Bootstrap还具有自己的组件套件，其中大多数与Material-UI组件库重叠。

After exploring, I feel as though MUI is focused on being a component library conceived around the Material Design guidelines. It has a grid layout system simply because it needs one. Bootstrap feels like the opposite: primarily a layout system that happens to have a suite of components packaged with it.

经过探索，我觉得MUI专注于成为围绕材料设计指南构思的组件库。它之所以具有网格布局系统，仅仅是因为它需要一个。 Bootstrap的感觉恰恰相反：主要是一个布局系统，碰巧打包了一套组件。

In summary, Material-UI Grid will feel familiar to you if you have used Bootstrap, and it will likely handle any layout you require. However, if total layout power is your primary concern, then Bootstrap may fit the bill better (and it’s a smaller package size at the time of writing this article).

总之，如果您使用过Bootstrap，那么Material-UI Grid将使您感到熟悉，并且它可能会处理您需要的任何布局。但是，如果总布局能力是您的主要考虑因素，那么Bootstrap可能会更适合该账单(在撰写本文时，它的包装尺寸较小)。

Material-UI与CSS Grid的复杂布局 (Material-UI vs CSS Grid for a complex layout)

CSS Grid Layout gained support on all major browsers in 2017 and gave web developers a powerful 2-dimensional layout system without needing additional libraries.

CSS Grid Layout在2017年获得了所有主要浏览器的支持，并为Web开发人员提供了功能强大的二维布局系统，而无需其他库。

Some strong points of CSS Grid:

CSS Grid的一些优点：

no media queries needed
无需媒体查询
spacing is easy and borders easily styled
间距容易，边框易于样式
it is both easier to precisely position a cell, and then the contents of the cell, no div soup required
精确定位一个单元格，然后放置单元格的内容都比较容易，不需要div汤
One of the biggest benefits is that a cell can be “skipped” like this image fro the Mozilla docs (I’ll demo this below).
最大的好处之一是可以像从Mozilla文档中看到的图像一样“跳过”单元格(我将在下面进行演示)。

Spoiler alert: CSS Grid is extremely powerful, and comparing MUI Grid to it is almost an apples-to-oranges comparison. However, people still need to decide which option suits their situation, so let’s build a more advanced UI and explore some differences.

剧透警报：CSS Grid非常强大，将MUI Grid与它进行比较几乎是苹果到橘子的比较。但是，人们仍然需要确定哪种选项适合他们的情况，因此让我们构建一个更高级的UI并探讨一些差异。

The top is Material-UI Grid, the bottom is CSS Grid. The output is identical, but behind the scenes is a different story.

顶部是Material-UI网格，底部是CSS网格。输出是相同的，但在幕后是一个不同的故事。

Chrome dev tools shows us this handy layout visual when we inspect our CSS Grid.

当我们检查CSS网格时，Chrome开发工具向我们展示了这种方便的布局视觉效果。

To accomplish a grid like this, MUI Grid clocks in at 26+ lines of code (depending on formatting).

为了完成这样的网格，MUI Grid的时钟必须超过26行(取决于格式)。

<Paper className={classes.paper}>
  <Grid container>
    <Grid xs={12} align="center">
      <Typography>Title</Typography>
    </Grid>
    <Grid container align="left">
      <Grid item xs>
        <Typography>Top L.</Typography>
      </Grid>
      <Grid container direction="column" item xs={6}>
        <Grid item align="center">
          <Typography>Center Top</Typography>
        </Grid>
        <Grid item align="center">
          <Typography>Center Middle</Typography>
        </Grid>
        <Grid item align="center">
          <Typography>Center Bottom</Typography>
        </Grid>
      </Grid>
      <Grid item xs align="right" style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "flex-end"
        }}
      >
        <Typography>Bottom R.</Typography>
      </Grid>
    </Grid>
  </Grid>
</Paper>

Lots of nesting, lots of thinking, lots of playing with flex to get that “Last Bottom R.” in place.

大量的嵌套，大量的思考，大量的使用flex来获得“ Last Bottom R”。到位。

Here’s the CSS Grid version. I still use MUI’s Typography component. This can be reduced to about 12 lines of JSX plus several lines of styling, although for formatting it is longer here.

这是CSS Grid版本。我仍然使用MUI的Typography组件。可以将其减少为大约12行JSX，外加几行样式，尽管在格式化时它更长。

<Paper
  className={`${classes.paper} ${classes.gridWrapper}`}
  style={{ marginTop: 12 }}
>
  <Typography
    style={{ gridArea: "title", textAlign: "center", marginBottom: 12 }}
  >
    Title
  </Typography>
  <Typography style={{ gridArea: "a1" }}>
    First Top L.
  </Typography>
  <Typography style={{ gridArea: "a2", textAlign: "center" }}>
    Center Top
  </Typography>
  <Typography style={{ gridArea: "b2", textAlign: "center" }}>
    Center Middle
  </Typography>
  <Typography style={{ gridArea: "c2", textAlign: "center" }}>
    Center Bottom
  </Typography>
  <Typography style={{ gridArea: "c3", textAlign: "right" }}>
    Last Bottom R.
  </Typography>
</Paper>//styles
gridWrapper: {
  display: "grid",
  gridTemplateAreas: `
    "title title title"
    "a1 a2 a3"
    "b1 b2 b3"
    "c1 c2 c3"
  `,
  gridTemplateColumns: "repeat(3, minmax(0, 1fr))"
}

Take a look at the bottom of that code snippet…the gridTemplateAreas in the gridWrapper class is the key to creating your layout. It is working code but it also provides a visual for the grid layout.

看看该代码段的底部……gridWrapper类中的gridTemplateAreas是创建布局的关键。它是有效的代码，但也提供了网格布局的外观。

Also, notice how you can omit cells that are not needed, i.e. there is no cell for gridArea: “a3”. This is a pretty sweet feature.

另外，请注意如何省略不需要的单元格，即gridArea没有单元格：“ a3”。这是一个非常不错的功能。

为Material-UI网格和CSS网格添加边框 (Add border to Material-UI Grid and CSS Grid)

I will just give a quick highlight of the code for how to create borders for an MUI Grid and a CSS Grid. If you want full code, see this CodeSandbox.

我将简要介绍一下如何为MUI网格和CSS网格创建边框的代码。如果您需要完整的代码，请参阅此CodeSandbox 。

To add a border around every cell and make MUI Grid look like, well, a grid, I added back any “missing” cells and I added the following CSS:

为了在每个单元格周围添加边框并使MUI Grid看起来像网格，我添加了所有“缺失”的单元格，并添加了以下CSS：

outerColumn: {
  borderRight: "1px solid grey",
  borderBottom: "1px solid grey",
  borderLeft: "1px solid grey"
},
centerColumn: {
  borderBottom: "1px solid grey"
}

The left and right columns of three cells each got the outerColumn class, while the inner column of three cells got the centerColumn class. Pretty straightforward.

每三个单元格的左，右列得到了outerColumn类，而三格内柱得到了centerColumn类。非常简单。

The CSS Grid was more elegant, really. I added in any missing cells, but then instead of a new CSS class, I simply updated the gridWrapper class:

实际上，CSS Grid更优雅。我添加了所有缺少的单元格，但是然后我没有更新新CSS类，而是简单地更新了gridWrapper类：

gridWrapper: {
  border: "1px solid grey",
  display: "grid",
  backgroundColor: "grey",
  gridRowGap: 1,
  gridColumnGap: 1,
  gridTemplateAreas: `
  "title title title"
  "a1 a2 a3"
  "b1 b2 b3"
  "c1 c2 c3"
  `,
  gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
  "& > *": {
    backgroundColor: "white"
  }
}

Instead of creating external borders, I created a grey background in the grid container, gave the individual cells a white background, and then added a 1px row and column gap to let the grey background show through. Sweet!

我没有创建外部边框，而是在网格容器中创建了灰色背景，为单个单元格提供了白色背景，然后添加了1px的行和列间距以使灰色背景得以显示。甜！

何时使用Material-UI网格(以及何时使用其他布局选项) (When to use Material-UI Grid (and when to use a different layout option))

I think a fair conclusion from these comparisons is that Material-UI grid is best for a situation where you need simple layouts, you want to stay within the Material-UI world, or you want the grid to inherit the MUI theme provided in your app.

我认为从这些比较中得出的一个合理的结论是，Material-UI网格最适合需要简单布局，希望保留在Material-UI世界中或者希望网格继承应用程序中提供的MUI主题的情况。

I believe in most situations, you can get the job done with MUI Grid, but you could likely do it with cleaner or more intuitive code if you use CSS Grid or Bootstrap.

我相信在大多数情况下，可以通过MUI Grid来完成工作，但是如果使用CSS Grid或Bootstrap，则可以使用更简洁或更直观的代码来完成。

Are you a developer looking to start your first side hustle? Learn how here.

您是否正在寻找开始第一手的开发人员？在这里了解如何。