Is there a basic layout in the Spark classes that support padding? VerticalLayout and HorizontalLayout both support padding but BasicLayout does not.
No; the BasicLayout class does not support padding.
As for the other layouts available in Flex:
BasicLayout - no (only one child at a time)
StackLayout - no
ButtonBarHorizontalLayout - is a horizontal layout
LinkListHorizontalLayout - is a modification of ButtonBarHorizontalLayout
ConstraintLayout - ? No padding but constraints may serve
FormItemLayout - No
HorizontalLayout - not a basic layout
MosaicLayoutBase - ? (children must support padding)
FlowLayout - not basic (like a smart horizontal layout with overflow to row 2; works in columns, too)
SmartColumnLayout - not basic (multiple columns of different heights, new children added to shortest column)
SmartGridLayout - not basic (automatically adjusts proportions based on # of children and rows)
SmartRowLayout - not basic (multiple rows of different widths, new children added to shortest row)
TabbedViewNavigatorTabBarHorizontalLayout - is a horizontal layout
TileLayout - yes but not a basic layout
ViewMenuLayout - no (is only for mobile viewmenu containers)
VerticalLayout - not a basic layout
Related
If you implement for example a QHBoxLayout with a fixed width (determined by a parent layout) and add more widgets (with a given minimum size) than fit into the fixed layout area, the widgets are getting smaller than the minSize and at a certain point even overlap.
Is this (ignoring minimumSize, spacing) the default implementation?
If yes, how would you achieve to keep the minimumSize and "push" other widgets out of the layout area or only partially draw the widgets (clip to layout area)?
I came across what seems to be the c++ source code for the layout kernel. Layouts are calculated within the qLayoutengine. For GridLayouts, BoxLayouts that is done via internal qGeomCalc method. There it is stated: "It portions out available space to the chain's [chain: struct of layoutItems and its geometry] children". So minimumSize will get ignored in order to "pack" all items into the given space.
What is the difference between Box and Grid in Material-UI
When to use each one
I'm confused by that
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout.
How it works
The grid system is implemented with the Grid component:
It uses CSS’s Flexible Box module for high flexibility.
There are two types of layout: containers and items.
Item widths are set in percentages, so they’re always fluid and sized relative to their parent element. Items have padding to create the spacing between individual items. There are five grid breakpoints: xs, sm, md, lg, and xl.
A Box is just that, a box. It's an element wrapped around its content which by itself contains no styling rules nor has any default effects on the visual output. But it's a place to put styling rules as needed. It doesn't offer any real functionality, just a placeholder for controlling the styles in the hierarchical markup structure.
I often think of it as semantically similar to the JSX empty element:
<>
Some elements here
</>
But just with some Material UI capabilities:
<Box component="span" m={1}>
<Button />
</Box>
In short:
Box is a more powerful, convenient, and potential replacement for div. You can change it to any HTML elements (e.g. span), but most of the time you will use it as div replacement.
Grid is the syntactic sugar of Grid Layout.
Use Box when you want to group several items and control how they look on the page. For example, you can take several paragraphs and use a box to put a border around them.
Use Grid for setting up a grid layout system for organizing content in columns on the page. Designers will divide the page into 12 columns with the idea that it is more visually appealing to have content aligned along each column or group of columns. Here is an article that provides much better detail on the subject: https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout
Box
The Box component serves as a wrapper component for most of the CSS utility needs. The Box component packages all the style functions that are exposed in #material-ui/system . It's created using the styled() function of #material-ui/core/styles
Grid
GridBox is the low-level representation of Grid. Except for low-level notebook expression manipulation, GridBox should not need to be used directly. In a notebook, columns of a GridBox can be added using and rows using . or a menu item can be used to start building a GridBox.
Box
The Box component serves as a wrapper component for most of the CSS utility needs.
The Box component wraps your component. It creates a new DOM element, a <div> by default that can be changed with the component property.
Let's say you want to use a <span> instead:
<Box component="span" m={1}>
<Button />
</Box>
This works great when the changes can be isolated to a new DOM element. For instance, you can change the margin this way.
Grid
The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout.
How it works
The grid system is implemented with the Grid component:
It uses CSS’s Flexible Box module for high flexibility.
There are two types of layout: containers and items.
Item widths are set in percentages, so they’re always fluid and sized relative to their parent element.
Items have padding to create the spacing between individual items.
There are five grid breakpoints: xs, sm, md, lg, and xl.
Further Reading
Docs on Box & Grid
My widget has two layouts. The main layout is outerLayout, and it should always occupy the entire widget. This contains a QLabel and a second layout named innerLayout.
innerLayout should be centered inside outerLayout and it should only be large enough to contain its widgets. I've set size constraints for both layouts, but in the following code, innerLayout expands to fill outerLayout.
outerLayout = new QVBoxLayout();
outerLayout->addWidget(label);
outerLayout->setSizeConstraint(QLayout::SetMaximumSize);
innerLayout = new QGridLayout();
innerLayout->setAlignment(Qt::AlignHCenter);
innerLayout->setSizeConstraint(QLayout::SetFixedSize);
outerLayout ->addLayout(innerLayout);
setLayout(outerLayout);
If I set the size constraint for both layouts to SetFixedSize, both layouts will be reduced to their minimum size. But I want the outer layout to occupy the entire space and the inner layout to use the minimum possible space. Any ideas?
Use spacers as extra widgets of outerlayout. In other words: the spacers will be siblings of innerlayout and will push inner layout to it's minimal needed surface. You will need horizontal and vertical spacers.
I have a small program which contains a QGroupBox with other widgets like this:
I tried many ways to manage the size of the QGroupBox to make the height as the same as the rest of the parts. Except for the way of using setMaximumHeight, because I want the size to change dynamically with the window size too. what else can I do to manage the layout?
Right now there are three items in a layout. The layout will try to fill the available space. QLineEdit and QSpinBox (or whatever your second widget is) have SizePolicy.vertical == fixed, so all extra space goes to the QGroupBox.
You have these choices:
Add a vertical spacer as fourth item below the groupbox to your layout.
Set maximum height of your groupbox - then the remaining space will be evenly spaced between the items.
Adjust the size of your window / widget / dialog (in Qt Designer or via code).
Imagine you are using a CSS grid system and your page components are divs, snapped to the grid with a border radius.
If you wish to nest such components, the distance between the parent and child component must be at least a column width - right?
What if you want a smaller distance?
What if you want to nest up to 3 or 4 levels?
Any ideas?
Thanks
If you wish to nest such components, the distance between the parent
and child component must be at least a column width - right?
Why are using border radius to line up blocks/columns in a grid? Shouldn't you be using margins?
If you want to line things up in a grid, all grid columns must have a gutter.
What you're looking for in a CSS grid framework looks very much like 1KB Grid.
If you want more flexibility, you can use the Variable Grid System. From what you're proposing, there really isn't a need for you to use a custom grid or make a css grid framework.