Flutter插件styx的安装及使用方法

Flutter插件styx的安装及使用方法

关于Styx

Styx 是一个简单的但健壮的实体组件系统。它基于 rxdart 包来实现响应性，取代了 ECS 中的 “S”。

Flutter插件styx的安装

在 pubspec.yaml 文件中添加 Styx：

dependencies:
  styx: ^2.2.0

在需要用到 Styx 的文件中导入：

import 'package:styx/styx.dart';

文档

• ✅ 创建包含代码示例的文档。
• ❌ 创建用于实际场景的示例应用。
• ❌ 实际上有文档网站 🙃

示例代码

以下是使用 Styx 插件的完整示例代码：

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

// 创建一个实体系统
final system = EntitySystem<String>();

void main() {
  // 忽略：未使用的局部变量
  var entity = system.create();
  entity += Counter(0); // 添加计数器组件
  entity += Name('Flutter'); // 添加名称组件
  runApp(const Entry());
}

class Entry extends StatelessWidget {
  const Entry({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  // 匹配具有Counter组件的所有实体
  final EntityMatcher counterMatcher = const EntityMatcher(any: {Counter});
  // 匹配具有Name组件的所有实体
  final EntityMatcher personMatcher = const EntityMatcher(any: {Name});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter Example')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 显示当前计数器的值
          StreamBuilder<List<Entity>>(
            stream: system.entities.stream,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                final counters = snapshot.data!.where(counterMatcher.matches).toList();
                if (counters.isNotEmpty) {
                  final counter = counters.first;
                  return StreamBuilder<int>(
                    stream: counter.get<Counter>().value.stream,
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        return Text('Counter: ${counter.get<Counter>().getValue()}');
                      } else {
                        return const Text('Loading...');
                      }
                    },
                  );
                }

                return const SizedBox.shrink();
              }

              return const SizedBox.shrink();
            },
          ),
          // 显示计数器和名称输入框
          StreamBuilder<List<Entity>>(
            stream: system.entities.stream,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                final person = snapshot.data!.firstWhere(personMatcher.matches);
                final counter = snapshot.data!.firstWhere(counterMatcher.matches);
                return Column(
                  children: [
                    StreamBuilder(
                      stream: counter.get<Counter>().value.stream,
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          return Text('Counter: ${counter.get<Counter>().getValue()}');
                        } else {
                          return const Text('Loading...');
                        }
                      },
                    ),
                    TextFormField(
                      initialValue: person.get<Name>().getValue(),
                      onChanged: (value) => person.get<Name>().setValue(value),
                      decoration: const InputDecoration(
                        labelText: 'Name',
                      ),
                    ),
                  ],
                );
              }
              return const SizedBox.shrink();
            },
          ),
        ],
      ),
      floatingActionButton: StreamBuilder<List<Entity>>(
        stream: system.entities.stream,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final counter = snapshot.data!.firstWhere(counterMatcher.matches);
            return FloatingActionButton(
              onPressed: counter.get<Counter>().increment,
              child: const Icon(Icons.add),
            );
          }
          return const SizedBox.shrink();
        },
      ),
    );
  }
}

// 计数器组件类
class Counter extends Component {
  Counter(int initial) {
    value.add(initial);
  }

  final value = 0.bs;

  [@override](/user/override)
  void onRemoved() {
    value.close();
  }

  void increment() {
    value.add(getValue() + 1);
  }

  void decrement() {
    value.add(getValue() - 1);
  }

  int getValue() {
    return value.value;
  }
}

// 名称组件类
class Name extends Component {
  Name(String initial) {
    value.add(initial);
  }

  final value = ''.bs;

  [@override](/user/override)
  void onRemoved() {
    value.close();
  }

  void setValue(String name) {
    value.add(name);
  }

  String getValue() {
    return value.value;
  }
}