英文:
How to use Material 3 Surface tones in Flutter?
问题
在我的应用程序中，我正在使用Material 3进行主题设置。我在Figma中使用Material Theme Builder创建了一个主题，并将生成的代码添加到我的应用程序中。但有一些我无法弄清楚如何实现的问题。
例如，Material Theme Builder创建了一个包含六种不同颜色的Surface色调调色板。
我想使用"Surface at + 1"颜色，它能使表面颜色与主要颜色协调。但生成的代码中没有包含像surface1这样的属性，而"harmonizeWith"属性的工作方式不如预期。
您有什么建议吗？
英文:
In my application, I am using Material 3 for theming. I created a theme at Figma with Material Theme Builder and add generated code to my app. But there is something that I can not figure out how to achieve.
For example, material theme builder creates a Surface tones palette that contains six different colors.
<img src="https://i.stack.imgur.com/kMEXl.pngg" width="100" height="300">
I want to use the "Surface at + 1" color for example, it harmonizes the surface color with the primary color.
But generated code doesn't contain any property like surface1 and harmonizeWith property is not working as expected.
Do you have any suggestions?
答案1
得分: 4
那些数值是在框架内计算的。如果你想自己计算数值，
`final color = ElevationOverlay.applySurfaceTint(color, surfaceTint, elevation);`
这里，color 是背景颜色，surfaceTint 在 colorScheme 中定义，elevation 可以是 1 到 5。你将得到结果颜色。
但是...
应该使用 Material widget 作为父级，并为该 Material Widget 提供 MaterialType 来使用它。
更多信息可以在源代码中找到：
https://github.com/flutter/flutter/blob/198a51ace9d4a7d79ec01e64d48f8fc6e37fb9d7/packages/flutter/lib/src/material/material.dart#L504
英文:
Those values are derived within the framework. In case you want to calculate values yourself,
final color = ElevationOverlay.applySurfaceTint(color, surfaceTint, elevation);
Here color would be background color, surfaceTint is defined in colorScheme and elevation would be 1-5. You will get the resultant color.
But...
The way it should be used is by using Material widget as parent with providing MaterialType to that Material Widget.
More info could be found here in source code
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论