Flutter布局计算引擎插件yoga_engine的使用

yoga_engine

yoga_engine 是一个在 Flutter 中通过瑜伽（yoga）实现 Flexbox 布局的插件。

安装

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

dependencies:
  yoga_engine: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

使用

首先，导入 yoga_engine 包到您的 Dart 代码中，以便能够使用所有由瑜伽引擎提供的小部件和帮助类。在调用 runApp 方法之前，调用 Yoga.init() 来初始化瑜伽引擎的所有依赖项。

以下是完整的使用步骤：

初始化

在应用程序启动时，调用 Yoga.init()：

void main() {
  Yoga.init(); // 初始化瑜伽引擎
  runApp(MyApp());
}

配置

配置每个 NodeProperties 实例，并将其应用于 YogaLayout 和 YogaNode 小部件，以便瑜伽引擎计算每个小部件的大小并正确布局它们。

NodeProperties root = NodeProperties();
root.setWidth(300); // 设置根节点宽度为 300
root.setHeight(300); // 设置根节点高度为 300
root.setFlexDirection(YGFlexDirection.YGFlexDirectionRow); // 设置主轴方向为水平
root.setAlignItems(YGAlign.YGAlignCenter); // 子元素在交叉轴上居中对齐

NodeProperties child = NodeProperties();

布局

将配置好的节点放置到 YogaLayout 或 YogaNode 中：

YogaLayout(
  nodeProperties: root,
  children: [
    YogaNode(
      nodeProperties: child,
      child: Text('Child'), // 子元素
    ),
  ],
)

Flutter 布局对比

理解如何使用 yoga_engine 来设置布局可能一开始会显得有些复杂。为了使构建布局更加自然，可以将 YogaLayout 视为 Row 或 Column，将 YogaNode 视为 Flexible 或 Expanded。Flutter 的 flex 概念与瑜伽引擎实现的 flexbox 非常相似。因此，两者可以大致以相同的方式思考。

示例

以下是一个完整的示例，展示了如何使用 yoga_engine 构建一个复杂的布局。

导入

import 'package:yoga_engine/yoga_engine.dart';

初始化

void main() {
  Yoga.init(); // 初始化瑜伽引擎
  runApp(MyApp());
}

配置

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建子节点
    NodeProperties child1 = NodeProperties();
    NodeProperties child2 = NodeProperties();
    NodeProperties child3 = NodeProperties();
    child3.setFlexDirection(YGFlexDirection.YGFlexDirectionRow);
    child3.setHeight(100);

    NodeProperties child4 = NodeProperties();
    child4.setHeight(50);

    // 创建根节点
    NodeProperties root = NodeProperties();
    root.setWidth(300);
    root.setHeight(300);
    root.setFlexDirection(YGFlexDirection.YGFlexDirectionRow);
    root.setAlignItems(YGAlign.YGAlignCenter);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: ColoredBox(
          color: Colors.orange,
          child: YogaLayout(
            nodeProperties: root,
            children: [
              YogaNode(
                nodeProperties: child1,
                child: ColoredBox(
                  color: Colors.yellow,
                  child: Text('Child 1'),
                ),
              ),
              YogaNode(
                nodeProperties: child2,
                child: ColoredBox(
                  color: Colors.pink,
                  child: YogaLayout(
                    nodeProperties: child3,
                    children: [
                      YogaNode(
                        nodeProperties: child4,
                        child: ColoredBox(
                          color: Colors.cyan,
                          child: Text('Child 2'),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}