Flutter模拟数据插件flutter_mockitory的使用

本包的目的是帮助测试Flutter应用时使用假数据，而无需更改代码。

通过使用Mockitory插件，你可以在应用本身内通过添加flutter_mockitory小部件来模拟数据层。

如何使用它？

添加依赖项

在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter_mockitory: 

如果你想要使用纯Dart的Mockitory（例如用于服务器应用程序），请使用mockitory依赖项而不是flutter_mockitory。

使用Mockitory混合类

首先，创建一个包含Mockitory的小部件。例如：

import 'package:mockitory/mockitory.dart';

enum Gender { male, female }

class ExampleMockitory with Mockitory {
  [@override](/user/override)
  Map<String, MockValue> get initialMockValues => {
        'boolValue': MockValue<bool>(true),
        'intValue': MockValue<int>(1),
        'doubleValue': MockValue<double>(4.5),
        'gender': MockValue<Gender>(Gender.male),
        'listOfInts': MockValue<List<int>>([0, 1]),
        'dateValue': MockValue<DateTime>(DateTime(2020, 5, 5)),
      };

  Stream<Gender> observeGender() => observeMockValueUpdates<Gender>('gender')
      .map((mockValue) => mockValue.value);

  DateTime getDateValue() => getValue<DateTime>('dateValue');
}

注意： 记住要使用类型化的MockValue对象。例如：MockValue<bool>(true)。

使用MockitoryPage小部件

MockitoryPage小部件用于自动生成用于更新/显示假数据的小部件列表。

final mockitory = ExampleMockitory();

...

MockitoryPage(
  mockitory: mockitory,
  customDelegates: [
    CustomBoolMockValueDelegate(),
    ChoicesMockValueDelegate<Gender>([Gender.male, Gender.female]),
    IterableMockValueDelegate([
      [0, 1],
      [0, 2]
    ]),
  ],
),

内置的MockValue代理

代理用于定义如何构建用于操作假数据的小部件。

这些代理默认被使用：

• BoolMockValueDelegate
• StringMockValueDelegate
• IntMockValueDelegate
• DoubleMockValueDelegate
• DateTimeMockValueDelegate

这些代理需要添加到MockitoryPage小部件的customDelegates属性中：

• ChoicesMockValueDelegate<T> - 例如 ChoicesMockValueDelegate<Gender>([Gender.male, Gender.female])
• IterableMockValueDelegate<T> - 例如 IterableMockValueDelegate<int>([0, 1], [1, 4, 5])

自定义代理

你可以提供自己的自定义代理。例如：

class CustomBoolMockValueDelegate extends MockValueDelegate<bool> {
  [@override](/user/override)
  Widget buildMockValueWidget(BuildContext context, bool value, onChanged) {
    return Checkbox(
      activeColor: Colors.red,
      value: value,
      onChanged: (value) => onChanged(MockValue(value)),
    );
  }
}

完整示例代码

以下是完整的示例代码，展示了如何使用flutter_mockitory插件：

import 'package:flutter/material.dart';
import 'package:flutter_mockitory/flutter_mockitory.dart';
import 'package:mockitory_example/example_mockitory.dart';

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

class CustomBoolMockValueDelegate extends MockValueDelegate<bool> {
  [@override](/user/override)
  Widget buildMockValueWidget(BuildContext context, bool value, onChanged) {
    return Checkbox(
      activeColor: Colors.red,
      value: value,
      onChanged: (value) {
        if (value != null) onChanged(MockValue(value));
      },
    );
  }
}

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

class _MyAppState extends State<MyApp> {
  ExampleMockitory mockitory1 = ExampleMockitory();
  ExampleMockitory mockitory2 = ExampleMockitory();

  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

  int _page = 0;

  [@override](/user/override)
  void initState() {
    super.initState();
    mockitory1.observeGender().listen((gender) {
      ScaffoldMessenger.maybeOf(context)?.showSnackBar(
        SnackBar(content: Text('Gender updated: $gender')),
      );
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final pages = [
      MockitoryPage(
        key: ValueKey(1),
        mockitory: mockitory1,
        customDelegates: [
          CustomBoolMockValueDelegate(),
          ChoicesMockValueDelegate<Gender>([Gender.male, Gender.female]),
          IterableMockValueDelegate([
            [0, 1],
            [0, 2]
          ]),
        ],
      ),
      MockitoryPage(
        key: ValueKey(2),
        mockitory: mockitory2,
      ),
    ];

    return MaterialApp(
      title: 'Mockitory demo',
      home: Scaffold(
        key: _scaffoldKey,
        body: pages[_page],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _page,
          onTap: (value) {
            setState(() => _page = value);
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.ac_unit),
              label: 'Mockitory 1',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.access_alarm_outlined),
              label: 'Mockitory 2',
            ),
          ],
        ),
      ),
    );
  }
}