Flutter UI修饰插件flutter_compose_ui_modifiers的使用

发布于 1周前 作者 vueper 来自 Flutter

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
🟢 .align() *
🟢 .aspectRatio() *
🟢 .assign() *
🟢 .centered() *
🔴 .controlSize() Button, TextField
🟠 .background() *
🟡 .backgroundColor() *
🟢 .bold() Text
🟠 .border() *
🟡 .clipOval() *
🟡 .clipPath() *
🟡 .clipRect() *
🟠 .clip() *
🟢 .color() Text
🟢 .corner() *
🟢 .direction() Icon, Text
🟢 .disabled() Button
🟡 .flex() *
🟢 .font() Icon, Text
🟢 .frame() *
🟢 .help() *
🟡 .hideThumb() ListView
🟢 .margin() *
🟢 .multilineTextAlignment() Text
🟢 .offset() *
🟠 .onDrag() *
🟠 .onDrop() *
🟠 .onDoubleTap() *
🟢 .onHover() *
🟡 .onLongTap() Button
🟢 .onTap() *
🟢 .opacity() *
🟠 .overlay() *
🟢 .padding() *
🔴 .popover() *
🟢 .rotate() *
🟡 .scale() *
🟢 .semantic() Icon
🟢 .shadow() *
🔴 .sheet() *
🟡 .style() Text, TextField
🟡 .transform() *

说明

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

技术注释

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

修饰链

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

类型传递

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

例如,如果修饰链看起来像这样:

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

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

[ Center > Container > Text ]

更多关于Flutter UI修饰插件flutter_compose_ui_modifiers的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter UI修饰插件flutter_compose_ui_modifiers的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_compose_ui_modifiers 是一个用于 Flutter 的 UI 修饰插件,它提供了一种类似于 SwiftUI 或 Jetpack Compose 的方式来修饰 Flutter 部件。通过这个插件,你可以使用链式调用来设置部件的属性,从而使代码更加简洁和易读。

安装

首先,你需要在 pubspec.yaml 文件中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_compose_ui_modifiers: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

使用 flutter_compose_ui_modifiers 非常简单。你可以在 Widget 上使用 Modifier 来设置各种属性。

示例 1: 设置 Padding 和 Background Color

import 'package:flutter/material.dart';
import 'package:flutter_compose_ui_modifiers/flutter_compose_ui_modifiers.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Compose UI Modifiers'),
      ),
      body: Center(
        child: Container(
          child: Text('Hello, World!')
              .modifier
              .padding(all: 16)
              .backgroundColor(Colors.blue)
              .build(),
        ),
      ),
    );
  }
}

在这个例子中,我们使用 modifier 来为 Text 部件设置 paddingbackgroundColor

示例 2: 设置 Border 和 Corner Radius

import 'package:flutter/material.dart';
import 'package:flutter_compose_ui_modifiers/flutter_compose_ui_modifiers.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Compose UI Modifiers'),
      ),
      body: Center(
        child: Container(
          child: Text('Hello, World!')
              .modifier
              .padding(all: 16)
              .backgroundColor(Colors.blue)
              .border(color: Colors.black, width: 2)
              .cornerRadius(8)
              .build(),
        ),
      ),
    );
  }
}

在这个例子中,我们为 Text 部件设置了 paddingbackgroundColorbordercornerRadius

示例 3: 设置 Shadow 和 Alignment

import 'package:flutter/material.dart';
import 'package:flutter_compose_ui_modifiers/flutter_compose_ui_modifiers.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Compose UI Modifiers'),
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          child: Text('Hello, World!')
              .modifier
              .padding(all: 16)
              .backgroundColor(Colors.blue)
              .shadow(color: Colors.black, blurRadius: 10, offset: Offset(4, 4))
              .align(Alignment.center)
              .build(),
        ),
      ),
    );
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!