Mix

一种富有表现力的方式，可以轻松地在 Flutter 中构建设计系统。Mix 提供了基础构建块，以帮助开发人员和设计人员创建美观且一致的 UI。

重要提示

Mix is currently being used internally to build design systems in Flutter.
However, it is still in the experimental development stages.
Major APIs are expected to change until the 1.0 release.

动机与目标

  • 在 Flutter 中创建一致的自定义（非 Material）UI 非常困难
  • 维护设计系统比构建它要困难得多。
  • 视觉属性应在小部件之外，通过设计系统中共享的可组合 API 进行定义。
  • 通过全局主题进行一致的样式设置
  • 快速响应不断变化的需求
  • 轻松创建自适应布局
  • 兼容 Material 主题

原则

  • 通过易用性、一致性和可重用性而不是编码速度来提高开发效率。
  • 抽象 Flutter API，而不修改其行为。
  • 可组合性应成为优先事项。Mixes、Attributes、Widgets 等。
  • 对设计师友好（尽可能使用简单的标准语义）

示例

简单的 Mix

final squareMix = Mix(h(150), w(150));

Box(
    squareMix,
    child: Text('Square'),
);

// You can also use the following:
// This way has some downsides. More info soon...
squareMix.box(child:Text('Square'));

可组合性

扩展 Mixes

final cardMix = squareMix.mix(p(20), rounded(20), bgColor(Colors.white));

覆盖 Mixes

final redCardMix = cardMix.mix(bgColor(Colors.red));

组合 Mixes

final elevationMix = Mix(
    shadowColor(Colors.black12),
    shadowBlur(4),
    shadowOffset(0, 2),
);

Box(
    Mix.combine(cardMix, elevationMix),
    child: Text('Card With Shadow'),
);

条件 Mixes

// If you wan't to change the Mix depending on a condition
final conditonalMix = Mix.chooser(isSelected, dynamicMix, redCardMix);

动态 Mixes

如果您希望卡片在暗模式下改变颜色，您可以使用动态属性。

final dynamicMix = cardMix.mix(dark(bgColor(Colors.black)));

/// Now, when the app is on dark mode the card color will change to `black`.
Box(
    dynamicMix,
    child: Text('Dynamic Card'),
);

您还可以利用媒体查询上下文值

final flexMix = Mix(gap(20), mainAxis.center);

// Adaptive gutter for your flex widgets using media query
final adaptiveFlexMix = flexMix.mix(
  mq.xs(gap(10)),
  mq.sm(gap(15)),
  mq.lg(gap(40)),
);

API

文档正在编写中。目前，您可以在 这里 找到一些可用的实用工具。

概念

以下是一些高级概念，可帮助您了解 Mix 的工作原理并开始使用。

属性

这些是某些小部件的特性或特征。大多数属性都映射到布局、视觉小部件或小部件本身。属性是会转换为其 Flutter API 的原始项。

动态属性

属性可以是动态的，这意味着它们仅在满足条件时才应用。这使得可以创建取决于小部件的 BuildContext 的属性。

实用工具

这些类主要用于为 Attributes 提供更好的 API。

构建 Mixes 的必需品；然而，它们可以实现更简洁的 API 和整体更好的开发体验。

Mixes

Attributes 的组合或 mix。Mixes 被传递给 Widgets 并转换为小部件的属性。

Mixes 可以跨多个小部件重用，也可以组合、扩展和覆盖。

Mixer Widgets

这些是设计系统的构建块。您可以轻松构建利用 Mixes 的新小部件；但是，也提供了一些原始项。

Box

类似于 Container，但进行了一些细微调整，以提供更好的开发体验。

Flexbox

Flex 小部件（Flex、Row、Column）的等价物。允许使用 flex Attributes，并将它们包装在 Box 中以使用 box Attributes 进行组合。

ColumnBox

Column 小部件的等价物。允许您使用 Mix 属性来样式化和构建自定义文本小部件。它是 Flexbox 的抽象，因此它也接受 Box 属性。

RowBox

Row 小部件的等价物。允许您使用 Mix 属性来样式化和构建自定义文本小部件。它是 Flexbox 的抽象，因此它也接受 Box 属性。

TextMix

Text 小部件的等价物。允许您使用 Mix 属性来样式化和构建自定义文本小部件。

IconMix

Icon 小部件的等价物。允许使用 Mix 属性来样式化和构建自定义图标小部件。

GitHub

https://github.com/leoafarias/mix