tenon_mortise
轻松构建您的Widgets,避免嵌套层级,易于构建UI,有点像Swift-UI。
入门
用法
要使用此插件,请将tenon_mortise添加为pubspec.yaml文件中的依赖项。
示例
import 'package:tenon_mortise/tenon_mortise.dart';
[
["row Item1 ".toText(), 20.inRow, "row item 2".toText()].toRow(),
20.inColumn,
[
"row Item1".toText().applyContainer(color: Colors.red),
"row item 2".toText().applyContainer(color: Colors.green),
"row item 2"
.toText()
.applyContainer(color: Colors.tealAccent)
.expanded,
].toRow(),
20.inColumn,
[const Icon(Icons.info), 10.inColumn, "column test ".toText()]
.toColumn(),
20.inColumn,
"aligment left".toText().applyAlign(alignment: Alignment.centerLeft),
"aligment right"
.toText()
.applyAlign(alignment: Alignment.centerRight),
20.inColumn,
[
"GridItem1"
.toText()
.applyContainer(color: Colors.tealAccent)
.applyRadiusAll(10),
"GridItem2".toText().applyContainer(color: Colors.red).applyRadius(
borderRadius:
const BorderRadius.only(topLeft: Radius.circular(10))),
"GridItem3".toText().applyContainer(color: Colors.green),
"GridItem4".toText().applyContainer(color: Colors.blue),
"GridItem5".toText().applyContainer(color: Colors.yellow),
]
.toGridView(
scrollDirection: Axis.vertical,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 4,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
),
)
.applySizeBox(
height: 100,
width: double.infinity,
),
20.inColumn,
[
"Wrap1 opacity:0.5"
.toText()
.applyContainer(color: Colors.tealAccent, width: 120)
.applyOpacity(opacity: 0.5),
"Wrap2 opacity:0.8"
.toText()
.applyContainer(color: Colors.red, width: 130)
.applyOpacity(opacity: 0.8),
"Wrap3".toText().applyContainer(color: Colors.green, width: 100),
"Wrap4".toText().applyContainer(color: Colors.blue, width: 100),
"Wrap5".toText().applyContainer(color: Colors.yellow, width: 100),
"Wrap6".toText().applyContainer(color: Colors.yellow, width: 100),
"Wrap7".toText().applyContainer(color: Colors.yellow, width: 100),
].toWrap(),
[
Switch(
value: flag1,
onChanged: (value) {
setState(() {
flag1 = value;
});
}),
flag1.toWidget(
builder: () =>
"flag 1 to widget".toText().applyColor(color: Colors.red),
),
20.inRow,
"flag 1 to widget where flag ==false".toText().where(flag1 == false)
].toRow(),
20.inColumn,
[
"inkwell:true click".toText().onClick(
inkWell: true,
click: () {
print("inkwell:true click");
},
),
"inkwell:false click".toText().onClick(
inkWell: false,
click: () {
print("inkwell:false click");
},
),
].toRow(mainAxisAlignment: MainAxisAlignment.spaceEvenly),
20.inColumn,
[
"applyInkWell".toText().applyInkWell(
onTap: () {
print("applyInkWell");
},
),
"applyGestureDetector".toText().applyGestureDetector(
onTap: () {
print("applyGestureDetector");
},
),
].toRow(mainAxisAlignment: MainAxisAlignment.spaceEvenly)
].toListView(),
有关更复杂的示例,请参阅示例应用程序。
本项目是一个 Flutter 插件包的起点,该包包含 Android 和/或 iOS 的平台特定实现代码。
有关Flutter开发入门的帮助,请参阅在线文档,其中提供了教程、示例、移动开发指南和完整的API参考。
