如何在Flutter中创建一个由多个选择器 Package 的可重用小部件

4uqofj5v  于 2023-02-05  发布在  Flutter
关注(0)|答案(1)|浏览(105)

有没有可能构建一个可以重用的小部件,并且只监听一个特定的ChangeNotifier?让我用一个例子来解释:
我有3个ChangeNotifier:NotifierANotifierBNotifierC,我有一个名为MyLikeWidget的小部件,它显示了类似计数,这三个ChangeNotifier都包含一个表示类似计数的变量。

class ReusableWidget extends StatelessWidget {
   const ReusableWidget({Key? key, required this.changeNotifierType}) : super(key: key);
   final int changeNotifierType;

   @override
   Widget build(BuildContext context) {
     return changeNotifierType == 0 
        ? Selector<NotifierA, int>(
            selector: (c, notifierA) => notifierA.likeCount
            builder: (context, likeCount, child) => MyLikeWidget(likeCount: likeCount),
          )
        : changeNotifierType == 0
        ? Selector<NotifierB, int>(
            selector: (c, notifierB) => notifierB.likeCount
            builder: (context, likeCount, child) => MyLikeWidget(likeCount: likeCount),
          )
        : Selector<NotifierC, int>(
            selector: (c, notifierC) => notifierC.likeCount
            builder: (context, likeCount, child) => MyLikeWidget(likeCount: likeCount),
          );
   }
 }

class MyLikeWidget extends StatelessWidget {
  const MyLikeWidget({Key? key, required this.likeCount}) : super(key: key);
  final int likeCount;

  @override
  Widget build(BuildContext context) {
    return ComplexWidget(
      ....
    );
  }
}

如果我们只有几个可重用的小部件和几个ChnageNotfier,上述方法可以工作,但对于大型复杂应用程序,这种方法将导致大量样板代码,我们可以通过使用Selctor3来解决这个问题,但是这种方法每次都会重建MyLikeWidget,就像任何ChangeNotifier中的计数变化一样。这种方法会给复杂的可重用小部件带来问题,比如可重用视频小部件甚至会重建它如果正在侦听的值在任何ChangeNotfier中发生更改,则正在播放视频。
有没有其他方法可以解决这个问题,而不需要编写大量的样板代码?

zd287kbt

zd287kbt1#

这是否有效--只需在类中使用泛型:

class ReusableWidget<T extends ChangeNotifierProvider> extends StatelessWidget {
   const ReusableWidget<T>({super.key});
   

   @override
   Widget build(BuildContext context) {
     return Selector<T, int>(
            selector: (c, notifierA) => notifierA.likeCount
            builder: (context, likeCount, child) => MyLikeWidget(likeCount: likeCount),
          );
   }
 }

并像这样使用它:

return ReusableWidget<NotifierA>(
...

相关问题