Flutter UI修饰插件flutter_compose_ui_modifiers的使用
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