Flutter UI修饰插件flutter_compose_ui_modifiers的使用

flutter_compose_ui_modifiers 是一个用于Flutter框架的装饰器库，它可以帮助开发者更简洁地编写UI代码。通过这种装饰器风格的语法，代码变得更加线性且易于理解。

安装

在你的 pubspec.yaml 文件中添加 flutter_compose_ui_modifiers 作为依赖项：

dependencies:
  flutter_compose_ui_modifiers:

然后运行 flutter pub get 来安装该包。

为什么使用修饰器？

我们知道Flutter是一个强大的框架，可以用来构建应用。然而，随着嵌套的Widget变得越来越多，代码可读性可能会降低。

工具如Google的Jetpack Compose和Apple的SwiftUI采用了修饰器的概念，这使得代码更加易写且易于理解。修饰器的功能与Flutter的Widget相同，但不同之处在于修饰器使代码更加线性。

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

示例

示例1

使用 flutter_compose_ui_modifiers 可以将以下代码：

Widget beInsteadText() {
  return InkWell(
    onTap: () => print('hi'),
    child: Container(
      width: 200,
      height: 300,
      margin: EdgeInsets.only(bottom: 300),
      padding: EdgeInsets.only(top: 50),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.red.withOpacity(0.3),
        borderRadius: BorderRadius.all(Radius.circular(10)),
      ),
      child: Text(
        'can click me!',
        style: TextStyle(
            color: Colors.blue, fontSize: 50, fontWeight: FontWeight.w200),
      ),
    ),
  );
}

简化为：

Widget newTextWidget() {
  return MText(
    modifier: MTextModifier.color(Colors.blue)
        .onClick(() => print("hi"))
        .fontSize(50)
        .fontWeight(FontWeight.w200)
        .backgroundColor(Colors.red.withOpacity(0.3))
        .borderRadius(10)
        .size(const Size(200, 300))
        .marginBottom(300)
        .paddingTop(50)
        .center(true),
    data: 'can click me!',
  );
}

示例2

将以下代码：

List<Widget> list = [];
list.add(
  Center(
    child: Padding(
      padding: EdgeInsets.all(16.0),
      child: Tooltip(
        message: 'We love you 🌍',
        child: Text(
          'Hello, World!',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 22,
          ), // TextStyle
        ), // Text
      ), // Tooltip
    ),
  ), // Center
);

简化为：

List<Widget> list = [];

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

示例3

在更复杂的页面中，例如创建一个联系人组页面：

class ContactCreateGroupPage extends StatelessWidget {
  const ContactCreateGroupPage({super.key});

  @override
  Widget build(BuildContext context) {
    final logic = Get.put(ContactCreateGroupLogic());
    final state = Get
        .find<ContactCreateGroupLogic>()
        .state;
    return MScaffold(
      modifier: MScaffoldModifier.setBackgroundColor(Colors.white)
          .setResizeToAvoidBottomInset(false)
          .setAppBar(const Q1AppBar(title: "Title")),
      body: MListView(
        modifier: MListViewModifier.setPadding(10.px)
            .setReverse(true)
            .setPhysics(const BouncingScrollPhysics()),
        children: [
          MText(
            modifier: MTextModifier.setColor(Colors.red)
                .setFontSize(20.px)
                .setFontWeight(FontWeight.w600),
            data: 'Hi',
          ),
        ],
      ),
    );
  }
}

修饰器列表

所有视图修饰器都包含内联文档，并附带示例。请注意，某些视图修饰器仅适用于特定的Widget（如 Text() 或各种按钮），并且不适用于其他不支持它们的Widget。

说明

• 🟢: 已实现
• 🟡: 已实现，但可能有变动
• 🟠: 开发中
• 🔴: 尚未实现
• *: 所有类型均可用

技术注释

视图修饰器通过告诉Widget将其自身包裹在另一个Widget中并返回给调用者来工作。

修饰链

修饰链是一系列应用于视图上的修饰器。

类型传递

类型传递是一种技术，即如果一系列修饰器连续应用在同一类型的Widget上，则不会相互包裹。

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

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

flutter_compose_ui 将视图层次结构渲染为：

[ Center > Container > Text ]