flutter ScrollController 附加到多个滚动视图

Question

当渲染 widget 的多个实例并且调用 getValue 方法时，flutter 会抛出错误 ScrollController 附加到多个滚动视图。我假设这是因为它们都使用相同的控制器，但我不知道如何解决这个问题，而无需在每次使用时创建单独的小部件。有更好的方法来解决这个问题吗？

class NumScroller extends StatelessWidget{
  final int max,min;
  final double height,width;
  final TextAlign alignment;

  static ScrollController controller;

  NumScroller({this.height,this.width,this.alignment,this.min,this.max, initialOffset}){
    controller = new ScrollController(initialScrollOffset: initialOffset);
  }

  getValue() => (controller.offset~/height) + min;

  @override
  Widget build(BuildContext context) {
    return new Container(
        width: width,
        height: height,
        child: ListView.builder(itemBuilder: (context, index) {
          return new Container(height: height, child:Text((max - index).toString(),textAlign: alignment,));
          },
          itemCount: max - min+1,
          controller: controller,
          physics: PageScrollPhysics(),
          itemExtent: height,
        )
    );
  }

}

Answer 1

正如您所说multiple instances are rendered，您会收到此错误。当您ScrollController是多个（一个视图）时，您不会遇到任何问题。但是你只有一个 ScrollController （因为你有static）。

消除静电，它应该可以工作。

如果它不起作用，请告诉我。

Answer 2

您应该为每个小部件实例拥有一个控制器，而不是使用静态控制器。

不过，您不能将控制器存储在 StatelessWidget 中（即使编译器允许）。

为此，您需要一个 StatefulWidget，否则当您的小部件更新时，您将再次创建一个新的控制器。导致奇怪的行为。

这是最终的代码：

class NumScroller extends StatefulWidget{
  final int max,min;
  final double height,width;
  final TextAlign alignment;

  NumScroller({this.height,this.width,this.alignment,this.min,this.max, initialOffset});

  @override
  NumScrollerState createState() {
    return new NumScrollerState();
  }
}

class NumScrollerState extends State<NumScroller> {
  final ScrollController controller = ScrollController();

  getValue() => (controller.offset~/widget.height) + widget.min;

  @override
  Widget build(BuildContext context) {
    return new Container(
        width: widget.width,
        height: widget.height,
        child: ListView.builder(itemBuilder: (context, index) {
          return new Container(height: widget.height, child:Text((widget.max - index).toString(),textAlign: widget.alignment,));
          },
          itemCount: widget.max - widget.min+1,
          controller: controller,
          physics: PageScrollPhysics(),
          itemExtent: widget.height,
        )
    );
  }
}