Flutter数组对象适配插件array_object_adapter的使用

Flutter数组对象适配插件array_object_adapter的使用

_{Adapter that is similar to the ObjectAdapter (ArrayObjectAdapter) from the Android Leanback support library.}

示例项目

在示例文件夹中有一个非常棒的示例项目。查看它。或者继续阅读以快速上手。

适配器（Adapter）

ArrayObjectAdapter 是一个基于数组的数据源，它提供了对数据模型的访问，并且与项目的展示逻辑分离（通过 Presenter/PresenterSelector）。由于该适配器实现了 Dart 的流接口，你可以简单地观察数据集的变化。

adapter.listen((_) { 
    // 数据集已更改
});

在 build 方法中使用 StreamBuilder 来监听数据集变化：

[@override](/user/override)
Widget build(BuildContext context) {
  return StreamBuilder(
    stream: _adapter,
    builder: (context, snapshot) {},
  );
} 

呈现器（Presenter）

将呈现逻辑从适配器逻辑中分离出来。Presenter 负责创建视图/小部件并绑定对象。

以下是一个简单的例子，其中字符串被表示为文本小部件。想象一下，例如一个用户对象，它可以使用缩略图、姓名和地址等来表示。

/// 一个简单的例子，其中字符串被表示为文本小部件。
/// 但想象一下，例如一个用户对象，可以使用缩略图、姓名和地址等来表示。
class TextPresenter extends Presenter {
  [@override](/user/override)
  Widget createView(BuildContext context, Object item) {
    final value = item as String;
    return Text(value);
  }
}

要使用多种视图类型，可以使用 PresenterSelector。

final classPresenterSelector = ClassPresenterSelector()
  ..addClassPresenter(int, IntPresenter())
  ..addClassPresenter(String, TextPresenter());

final adapter = ArrayObjectAdapter(presenterSelector: classPresenterSelector);

final items = <dynamic>[];
// 创建你的内容
...

adapter.setItems(items);

将适配器附加到用于显示数据的视图中：

[@override](/user/override)
Widget build(BuildContext context) {
  return ListView.separated(
    itemCount: adapter.itemCount(),
    itemBuilder: (BuildContext context, int index) {
      final item = adapter.get(index);
      final presenter = adapter.getPresenter(item);
      return presenter.createView(context, item);
    },
    separatorBuilder: (BuildContext context, int index) => Divider(),
  );
}

完整示例 Demo

以下是一个完整的示例，展示了如何使用 ArrayObjectAdapter。

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

import 'sample_item.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Array Any Adapter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Array Any Adapter'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late ArrayObjectAdapter _adapter;

  [@override](/user/override)
  void initState() {
    _adapter = ArrayObjectAdapter(
        presenterSelector: ClassPresenterSelector()
          ..addClassPresenter(SampleItemA, SampleAPresenter())
          ..addClassPresenter(SampleItemB, SampleBPresenter())
          ..addClassPresenter(SampleItemC, SampleCPresenter(onItemClicked)));
    _seedAdapter();
    super.initState();
  }

  void onItemClicked(dynamic item) {
    print("item has been clicked: $item");
  }

  void _seedAdapter() {
    final items = <dynamic>[];
    for (int i = 0; i < 100; i++) {
      if (i % 2 == 0) {
        items.add(SampleItemA(i, 'A $i'));
      } else if (i % 3 == 0) {
        items.add(SampleItemC(i, 'C $i'));
      } else {
        items.add(SampleItemB(i, i));
      }
    }
    _adapter.setItems(items);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: ListView.separated(
            itemCount: _adapter.itemCount(),
            itemBuilder: (BuildContext context, int index) {
              final item = _adapter.get(index);
              final presenter = _adapter.getPresenter(item);
              return presenter.createView(context, item);
            },
            separatorBuilder: (BuildContext context, int index) => Divider(),
          ),
        ));
  }
}

class SampleAPresenter extends Presenter {
  [@override](/user/override)
  Widget createView(BuildContext context, Object item) {
    final value = item as SampleItemA;
    return Text(
      value.value,
      style: TextStyle(color: Colors.green),
    );
  }
}

class SampleBPresenter extends Presenter {
  [@override](/user/override)
  Widget createView(BuildContext context, Object item) {
    final value = item as SampleItemB;
    return Text(
      value.value.toString(),
      style: TextStyle(color: Colors.blue),
    );
  }
}

typedef EventHandler = void Function(dynamic item);

class SampleCPresenter extends Presenter {
  SampleCPresenter(this.callback);

  EventHandler callback;

  [@override](/user/override)
  Widget createView(BuildContext context, Object item) {
    final value = item as SampleItemC;
    return GestureDetector(
      onTap: () => callback.call(item),
      child: Text(
        value.value,
        style: TextStyle(color: Colors.red),
      ),
    );
  }
}