Flutter化学计算插件flutter_chemistry的使用

Flutter化学计算插件flutter_chemistry的使用

关于

Chemistry 是一个受 React 的 Recoil 启发的状态管理库。它的目标是易于使用，并且与 Flutter 平台集成良好。

Chemistry 将纯状态与派生状态分开。纯状态称为原子（Atoms），派生状态称为分子（Molecules）。提供了一个存储库（称为 Chemistry），所有原子和分子都可以在此存储并可以在程序的任何地方访问。这使得状态可以在任何小部件中访问和修改，而无需在它们之间传递状态作为参数。

查看示例以获取示例。

使用

AtomBuilder

AtomBuilders 类似于 StreamBuilders。它是一个带有原子和接收原子值的函数的小部件，该函数期望返回一个小部件。返回的小部件是 AtomBuilder 的子级。当原子状态更改时，小部件会自动重新构建，并且将使用新值调用生成器函数。

示例：

// 在构建方法之前。
var myAtom = Atom<String>(defaultValue: 'Hello', key: 'myAtom');

// 在构建方法中。
AtomBuilder<String>(
    atom: myAtom,
    builder: (context, value) => Text(value),)

MoleculeBuilder

这些工作方式与 AtomBuilder 类似，但适用于分子。

示例：

// 在构建方法之前。
var myMolecule = Molecule<int>(
    atoms: [firstAtom, secondAtom],
    computer: (getAtom) =>
        getAtom<int>('firstAtom')!.state + getAtom<int>('secondAtom')!.state,
    key: 'myMolecule');

// 在构建方法中。
AtomBuilder<int>(
    molecule: myMolecule,
    builder: (context, value) => Text(value.toString()),)

完整示例代码

以下是一个完整的示例，展示了如何使用 flutter_chemistry 插件进行简单的数学计算。

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

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

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

class _MyAppState extends State<MyApp> {
  Chemistry chemistry = Chemistry();
  late Atom<double> firstNumber;
  late Atom<double> secondNumber;
  late Atom<String> selectedOperator;
  late Molecule<dynamic> sum;

  [@override](/user/override)
  void initState() {
    // 初始化原子
    firstNumber = Atom<double>(defaultValue: 0, key: 'firstNumber');
    secondNumber = Atom<double>(defaultValue: 0, key: 'secondNumber');
    selectedOperator = Atom<String>(defaultValue: '+', key: 'selectedOperator');

    // 将原子添加到 Chemistry 中
    chemistry.addAtom(firstNumber);
    chemistry.addAtom(secondNumber);
    chemistry.addAtom(selectedOperator);

    // 定义分子
    sum = Molecule<dynamic>(
        atoms: [firstNumber, secondNumber, selectedOperator],
        computer: (getAtom) {
          // 根据选择的操作符计算结果
          switch (getAtom<String>('selectedOperator')!.state) {
            case '+':
              return getAtom<double>('firstNumber')!.state +
                  getAtom<double>('secondNumber')!.state;
            case '-':
              return getAtom<double>('firstNumber')!.state -
                  getAtom<double>('secondNumber')!.state;
            case '*':
              return getAtom<double>('firstNumber')!.state *
                  getAtom<double>('secondNumber')!.state;
            case '/':
              return getAtom<double>('firstNumber')!.state /
                  getAtom<double>('secondNumber')!.state;
          }

          return 'Error';
        },
        key: 'sum');

    // 将分子添加到 Chemistry 中
    chemistry.addMolecule(sum);

    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            children: [
              // 第一个数字输入框
              Expanded(
                child: Row(
                  children: [
                    Expanded(
                      child: TextField(
                        onChanged: (value) =>
                            firstNumber.setState(double.parse(value)),
                        keyboardType: TextInputType.number,
                        decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'First number',
                        ),
                      ),
                    ),

                    // 操作符选择器
                    Expanded(
                      child: AtomBuilder<String>(
                        builder: (context, value) => DropdownButton<String>(
                          value: value,
                          items: [
                            DropdownMenuItem(
                              child: Text('+'),
                              value: '+',
                            ),
                            DropdownMenuItem(
                              child: Text('-'),
                              value: '-',
                            ),
                            DropdownMenuItem(
                              child: Text('*'),
                              value: '*',
                            ),
                            DropdownMenuItem(
                              child: Text('/'),
                              value: '/',
                            ),
                          ],
                          onChanged: (value) =>
                              selectedOperator.setState(value!),
                        ),
                        atom: selectedOperator,
                      ),
                    ),

                    // 第二个数字输入框
                    Expanded(
                      child: TextField(
                        onChanged: (value) =>
                            secondNumber.setState(double.parse(value)),
                        keyboardType: TextInputType.number,
                        decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'Second number',
                        ),
                      ),
                    ),
                  ],
                ),
              ),

              // 显示计算结果
              Expanded(
                child: MoleculeBuilder<double>(
                    builder: (context, value) => Text('= $value'),
                    molecule: sum),
              )
            ],
          ),
        ),
      ),
    );
  }
}