Flutter榫卯结构模拟插件tenon_mortise的使用

Flutter榫卯结构模拟插件tenon_mortise的使用

轻松构建你的小部件，避免括号嵌套，易于构建UI，有点像Swift UI。

开始使用

要使用此插件，在pubspec.yaml文件中添加tenon_mortise作为依赖项。

dependencies:
  tenon_mortise: ^x.x.x

确保运行flutter pub get以安装依赖项。

示例

以下是使用tenon_mortise插件的基本示例：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool flag1 = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: [
          // 创建一个包含两个文本的小部件行，并在它们之间插入20像素间距
          ["row Item1 ".toText(), 20.inRow, "row item 2".toText()].toRow(),
          // 插入20像素垂直间距
          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像素垂直间距
          20.inColumn,
          // 创建一个包含图标和文本的列
          [const Icon(Icons.info), 10.inColumn, "column test ".toText()]
              .toColumn(),
          // 插入20像素垂直间距
          20.inColumn,
          // 对齐方式为居左的文本
          "aligment left".toText().applyAlign(alignment: Alignment.centerLeft),
          // 对齐方式为居右的文本
          "aligment right"
              .toText()
              .applyAlign(alignment: Alignment.centerRight),
          // 插入20像素垂直间距
          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像素垂直间距
          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像素垂直间距
          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像素垂直间距
          20.inColumn,
          // 创建一个包含两个文本的小部件行，分别应用了不同的手势检测器
          [
            "applyInkWell".toText().applyInkWell(
              onTap: () {
                print("applyInkWell");
              },
            ),
            "applyGestureDetector".toText().applyGestureDetector(
              onTap: () {
                print("applyGestureDetector");
              },
            ),
          ].toRow(mainAxisAlignment: MainAxisAlignment.spaceEvenly)
        ].toListView(),
      ),
    );
  }
}