Flutter UI定制插件flutterui_modifiers的使用

FlutterUI Modifiers 是一组声明式的 widget 修改器，旨在使你的 Flutter 代码更简洁且线性。现代工具如 Jetpack Compose 和 SwiftUI 使用视图修改器来简化代码的编写和理解。

此包提供了两者的优势：Flutter 的平台独立性和 SwiftUI 的清晰修改器语法。

安装

在 pubspec.yaml 文件中添加 flutterui_modifiers 作为依赖项：

dependencies:
  flutterui_modifiers:

为什么使用修改器？

我们知道 Flutter 是一个强大的应用程序构建框架。但是，由于嵌套的 widget，Flutter 代码可能会变得难以阅读。

工具如 Google 的 Jetpack Compose 和 Apple 的 SwiftUI 接受了修改器的概念。

修改器的功能与 Flutter widget 相同。区别在于，Flutter 代码是嵌套的，而修改器是线性的。

这使得代码更容易一目了然！🎉

示例

使用 FlutterUI Modifiers，可以这样写：

List<Widget> list = [];

Text('Hello, World!') //
    .bold()
    .font(size: 22)
    .help('我们爱你 🌍')
    .padding(all: 16)
    .centered()
    .assign(list);

而不是这样：

List<Widget> list = [];

list.add(
  Center(
    child: Padding(
      padding: EdgeInsets.all(16.0),
      child: Tooltip(
        message: '我们爱你 🌍',
        child: Text(
          'Hello, World!',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 22,
          ), // TextStyle
        ), // Text
      ), // Tooltip
    ) // Padding
  ), // Center
);

修改器列表

所有视图修改器都包含内联文档和示例。

请注意，一些视图修改器仅适用于特定的 widget，如 <code>Text()</code> 或各种按钮，并且不适用于其他不支持这些功能的 widget。

图例

技术说明

视图修改器通过告诉 widget 包装在另一个 widget 中并返回自身来工作。

修改器链

修改器链是一系列在视图上的修改器。

类型传递

类型传递是一种技术，如果后续的修改器属于相同的类，则不会将它们嵌套在一起。

例如，如果修改器链看起来像这样：

[ Center > Container > Container > Container > Text > Text ]

FlutterUI 将渲染视图层次结构如下：

[ Center > Container > Text ]

这确保了视图层次结构不会比必要的更复杂。

示例代码

安装 flutterui_modifiers 包后，你可以将以下代码转换为修改器风格的等效代码：

List<Widget> list = [];

list.add(
  Center(
    child: Padding(
      padding: EdgeInsets.all(16.0),
      child: Text(
        'Hello, World! 🌍',
        style: TextStyle(
          color: Colors.red,
          fontSize: 22,
        ), // TextStyle
      ), // Text
    ) // Padding
  ), // Center
);

转换为：

List<Widget> list = [];

Text('Hello, World! 🌍')
    .font(size: 22)
    .color(Colors.red)
    .padding(all: 16)
    .centered()
    .assign(list);