Flutter中请使用StreamBuilder和Isar封装一个通用组件名称叫做IsarWidget。当监听到isar数据库中数据改变时IsarWidget会自动刷新UI。

以下是一个使用StreamBuilder和Isar封装的通用组件IsarWidget的示例代码：

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

class IsarWidget<T> extends StatelessWidget {
  final IsarCollection<T> collection;
  final Stream<T?> stream;
  final Widget Function(BuildContext, T?) builder;

  IsarWidget({required this.collection, required this.builder})
      : stream = collection.watch(),
        super(key: UniqueKey());

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<T>(
      stream: stream,
      builder: (BuildContext context, AsyncSnapshot<T> snapshot) {
        if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        }
        return builder(context, snapshot.data);
      },
    );
  }
}

这个IsarWidget组件接收三个参数：

• collection是一个IsarCollection对象，表示要监听的数据库表格；
• builder是一个回调函数，接收BuildContext和T类型的数据，用于构建UI；
• stream是一个Stream对象，用于监听数据库表格的数据变化。

在IsarWidget的build方法中，我们使用StreamBuilder来监听数据变化，当有新的数据时，builder回调函数会被调用，用于构建UI。这个组件会自动刷新UI，因为我们使用了StreamBuilder来监听数据变化。

使用示例：

import 'package:flutter/material.dart';
import 'package:isar/isar.dart';
import 'package:isar_widget/isar_widget.dart';

class Person {
  int? id;
  String? name;
  int? age;

  Person({this.id, this.name, this.age});
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final isar = await openIsar();
  final persons = isar.persons;

  runApp(MyApp(persons: persons));
}

class MyApp extends StatelessWidget {
  final IsarCollection<Person> persons;

  MyApp({required this.persons});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Isar Widget Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Isar Widget Demo')),
        body: Center(
          child: IsarWidget<Person>(
            collection: persons,
            builder: (context, person) {
              if (person == null) {
                return Text('No data');
              }
              return Text('Name: ${person.name}, Age: ${person.age}');
            },
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们使用了IsarWidget来监听persons表格的数据变化，并在UI中显示每个人的姓名和年龄。当有新的数据插入或更新时，UI会自动刷新。