材料3 Qt Quick Controls的变化

Material 3 Changes in Qt Quick Controls

材料3 Qt Quick Controls的变化

May 05, 2023 by Mitch Curtis | Comments

​2023年5月5日 Mitch Curtis |评论

In Qt 6.5, Qt Quick Controls' Material style received an update to Material 3, the latest version of Google’s open-source design system.

​在Qt 6.5中，Qt Quick Controls的Material风格得到了谷歌开源设计系统最新版本Material 3的更新。

This post will highlight the changes made to each control so that you can adapt your applications accordingly. It will also highlight more general changes and new API, such as the new Material.containerStyle and Material.roundedScale attached properties.

​这篇文章将重点介绍对每个控件所做的更改，以便您可以相应地调整应用程序。它还将重点介绍更多的常规更改和新的API，例如新的Material.containerStyle和Material.roundedScale附加属性。

General changes

一般变更

Filled and outlined containers

已填充和轮廓分明的容器

TextArea and TextField now support the two different appearances: outlined and filled. This can be configured with the Material.containerStyle attached property.

​TextArea和TextField现在支持两种不同的外观：轮廓和填充。这可以使用附加了Material.contangerStyle的属性进行配置。

Old Material TextField.	New Material 3 outlined and filled TextField.

Rounded corners

圆角

Several controls' corners became rounder. This can be configured with the Material.roundedScale attached property.

​几个控件的角变得更圆了。这可以使用附着的Material.roundedScale属性进行配置。

Elevation shadows

立面阴影

The elevation drop shadow effect was improved in order to better match the Material 3 guidelines.

为了更好地匹配“材质3”的指导方针，对高程下降阴影效果进行了改进。

Old Material elevations.	New Material 3 elevations.

Controls

控件

While we've tried to list most of the relevant changes, not all of them are listed here. To see the previous implementations of the Material controls (to, for example, see previous property values), take a look at the Material directory in Qt 6.4. Some changes (such as bindings for things like elevation or padding) are a little too complex to mention here, so it's best to use that link if you're in doubt about how to restore the previous appearance and/or behavior.

​虽然我们已经尝试列出了大多数相关的更改，但并不是所有的更改都在这里列出。要查看Material控件的先前实现（例如，查看先前的属性值），请查看Qt 6.4中的Material目录。有些更改（如标高或填充等的绑定）有点过于复杂，无法在此处提及，因此如果您对如何恢复以前的外观和/或行为有疑问，最好使用该链接。

ApplicationWindow

ApplicationWindow's background color changed:

ApplicationWindow的背景颜色已更改：

Old Material ApplicationWindow.	New Material 3 ApplicationWindow.

Button

按钮

Old Material Button.	New Material 3 Button.

Old Material Button with zero elevation.	New Material 3 Button with zero elevation.

Old Material Button in unchecked and checked states.	New Material 3 Button in unchecked and checked states.

• Corners are now rounded (Material.FullScale). To revert to the old corners, set the Material.roundedScale attached property to Material.ExtraSmallScale.
• 拐角现在是圆角（Material.FullScale）。若要恢复到旧拐角，请将Material.roundedScale附着的属性设置为Material.ExtraSmallScale。
• The indicator that was shown for checkable buttons was removed, since it no longer looks good with fully rounded corners. Instead, checked buttons now use the accent color for their text. Highlighted buttons are the exception, as it would result in a lack of contrast between the background and the text.
• 为可检查按钮显示的指示器被删除了，因为它的圆角不再好看。取而代之的是，选中的按钮现在为其文本使用accent色。高亮显示的按钮是个例外，因为这会导致背景和文本之间缺乏对比度。
• Padding, spacing and other layout values were updated to match Material 3 guidelines.
• ​填充、间距和其他布局值已更新，以匹配“材质3”准则。
• In Qt 6.5.1, button text is no longer all uppercase. To revert to the old case, set font.capitalization to Font.AllUppercase.
• 在问题6.5.1中，按钮文本不再全部大写。要恢复到旧情况，请将font.capitalization设置为font.AllUppercase。

ComboBox

组合框控件

Old Material ComboBox.	New Material 3 ComboBox.

Old Material 3 ComboBox popup.	New Material 3 ComboBox popup.

• The background is now outlined rather than filled.
• 背景现在是轮廓而不是填充的。
• Elevation was decreased to 0. This can be changed by setting Material.elevation to the desired value.
• 高度降至0。这可以通过将“Material.elevation”设置为所需值来更改。
• The popup's vertical padding has increased, its corners rounded and elevation lowered.
• 弹出窗口的垂直填充增加了，圆角变圆了，高度降低了。

DelayButton

延迟按钮

Old Material DelayButton.	New Material 3 DelayButton.

Old Material DelayButton with zero elevation.	New Material 3 DelayButton with zero elevation.

In Qt 6.5.1, text is no longer all uppercase. To revert to the old case, set font.capitalization to Font.AllUppercase.

在Qt6.5.1中，文本不再全部大写。要恢复到旧情况，请将font.capitalization设置为font.AllUppercase。

Dialog

对话框

Old Material Dialog.	New Material 3 Dialog.

Old Material Dialog with zero elevation.	New Material 3 Dialog with zero elevation.

• Dialog is now modal. Set modal to false to revert to the old behavior and appearance.
• ​对话现在是模态的。将modal设置为false可恢复到旧的行为和外观。
• Corners are now rounded (Material.ExtraLargeScale). Set to Material.NotRounded to revert to the old appearance.
• ​拐角现在是圆形的（Material.ExtraLargeScale）。设置为Material.NotRounded可恢复到旧外观。
• Top padding was increased.
• ​增加了顶部填充。
• Elevation was decreased.
• ​高度下降。
• Title font size was increased.
• ​标题字体增大。

DialogButtonBox

对话框按钮框

Corners are now rounded (Material.ExtraLargeScale).

角现在是圆形的（Material.ExtraLargeScale）。

Drawer

抽屉

Old Material Drawer.	New Material 3 Drawer.

• Corners are now rounded (Material.LargeScale).
• 角现在是圆形的（Material.LargeScale）。
• Elevation was decreased.
• ​高度下降。

Menu

菜单

Old Material Menu.	New Material 3 Menu.

Elevation was decreased. Set to 8 to revert to the old appearance.

高度下降。设置为8可恢复到旧外观。

Popup

弹出框

Old Material Popup.	New Material 3 Popup.

• Elevation was decreased.
• 高度下降。
• Rounded corner radius was slightly increased (Material.ExtraSmallScale).
• 圆角半径略有增加（Material.ExtraSmallScale）。

RangeSlider

范围滑块

Old Material RangeSlider.	New Material 3 RangeSlider with tickmarks.

• Tick marks were added when stepSize is a non-zero value that is divisible by the difference between to and from, snapMode is SnapAlways and the number of tick marks that would be rendered is less than the width to height ratio, or vice versa for vertical sliders.
• 当stepSize是一个非零值，可以被到和从之间的差整除时，添加了刻度线，snapMode是SnapAlways，并且将渲染的刻度线数量小于宽高比，或者对于垂直滑块，反之亦然。
• The grow animation that plays when the handle is pressed has been removed.
• 按下控制柄时播放的增长动画已被移除。

Slider

滑动条

Old Material Slider.	New Material 3 Slider with tickmarks.

See RangeSlider.

参考范围滑块。

SpinBox

Old Material SpinBox.	New Material 3 SpinBox.

Old Material SpinBox with focus.	New Material 3 SpinBox with focus.

The background is now outlined rather than filled.

背景现在是轮廓而不是填充的。

Switch

开关

Old Material Switch.	New Material 3 Switch.

Old checked Material Switch.	New checked Material 3 Switch.

Indicator visuals were changed.

指示器视觉效果已更改。

TextArea

文本域

Old Material TextArea.	New Material 3 outlined and filled TextArea.

Old Material TextArea with focus.	New Material 3 outlined and filled TextArea with focus.

Old Material TextArea with focus and text.	New Material 3 outlined and filled TextArea with focus and text.

• Background is now outlined by default. This behavior can be configured with the Material.containerStyle attached property.
• 默认情况下，现在已勾勒出背景。此行为可以使用附着的Material.contangerStyle属性进行配置。
• Placeholder text now floats at the top of the control when it has focus or text.
• 当控件具有焦点或文本时，占位符文本现在浮动在控件的顶部。

TextField

Old Material TextField.	New Material 3 outlined and filled TextField.

Old Material TextField with focus.	New Material 3 outlined and filled TextField with focus.

Old Material TextField with focus and text.	New Material 3 outlined and filled TextField with focus and text.

• Background is now outlined by default. This behavior can be configured with the Material.containerStyle attached property.
• 默认情况下，现在已勾勒出背景。此行为可以使用附着的Material.contangerStyle属性进行配置。
• Placeholder text now floats at the top of the control when it has focus or text.
• 当控件具有焦点或文本时，占位符文本现在浮动在控件的顶部。

Known issues & feedback

已知问题和反馈

• Material TextArea placeholder text incorrectly clipped
• 材质文本区域占位符文本剪裁错误
• Material TextArea delegate cursor not clipped when in Flickable
• 材质文本区域委托光标在Flickable中时未被剪裁

Slider and RangeSlider did get support for the value label/popup, but it was left out for now until we can come up with an API to control whether or not it's shown.

​Slider和RangeSlider确实获得了对值标签/弹出窗口的支持，但在我们能够想出一个API来控制它是否显示之前，它暂时被忽略了。

If you find issues with the Material 3 changes, please report them against the "Quick Controls: 2" component in Jira.

​如果您发现材料3更改有问题，请针对Jira中的“Quick Controls: 2”组件进行报告。