4

我创建了一个名为的小部件InfiniteScroll，它处理异步加载的数据并使用ListView.builder. 但是，我无法为其创建控制器（例如，用于清除所有加载的数据）。我通读了现有控制器的实现，例如，TextEditingController但我似乎无法理解它。这是我要实现的目标的示例：

// I have
InfiniteScroll(
  fetchMore: () async {}, // fetching more data
  builder: (data) {}, // building an item
)

// need
InfiniteScroll(
  controller: _infiniteScrollController,
  fetchMore: () async {}, // fetching more data
  builder: (data) {} // building an item
)
// later
_infiniteScrollController.clearItems();

如何创建这样的控制器？如果这很重要，我将flutter_hooks用于本地状态管理。

4

3 回答 3

12

我不认为@ValdaXD 的答案描述了一个好的解决方案。

通常解决这个问题的方式，也是在原生 Flutter 小部件中，比如TextField或者ScrollController是一个扩展的控制器类ChangeNotifier。

控制器将处理这些项目并提供一个公共 API 来清除它们：

class InfiniteScrollController extends ChangeNotifier {
  List<Widget> items = [];

  void clearItems() {
    items.clear();
    notifyListeners();
  }
}

然后小部件可以通过注入的控制器显示项目：

class InfiniteScroll extends StatefulWidget {
  InfiniteScroll({
    required this.controller
  });

  final InfiniteScrollController controller;

  @override
  State<StatefulWidget> createState() {
    return _InfiniteScrollState();
  }
}

class _InfiniteScrollState extends State<InfiniteScroll> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: widget.controller.items,
    );
  }
}

我创建了一篇博客文章，其中包含不同的示例但主题相同：自定义小部件的控制器：https ://www.flutterclutter.dev/flutter/tutorials/create-a-controller-for-a-custom-widget/ 2021/2149/

于 2021-03-07T22:22:15.027 回答
8

我只是将要公开的功能传递给控制器​​。

typedef MyTypedef(int value);

class MyController {
  VoidCallback myFunction;
  VoidCallback mySecondFunction;
  MyTypedef functionThatReturns;

  void dispose() {
    //Remove any data that's will cause a memory leak/render errors in here
    myFunction = null;
    mySecondFunction = null;
    functionThatReturns = null;
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({this.controller});
  final MyController controller;
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  void initState() {
    super.initState();
    MyController _controller = widget.controller;
    if (_controller != null) {
      _controller.myFunction = firstFunction;
      _controller.mySecondFunction = secondFunction;
      _controller.functionThatReturns = functionWithInt;
    }
  }

  void firstFunction() {
    print('Calling first function');
  }

  void secondFunction() {
    print('Calling second function');
  }

  void functionWithInt(int value) {
    print('Calling third function with value $value');
  }

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

然后使用很简单

//We create a variable somewhere
  ...
  MyController controller;
  ...

  //We initialize it
  ...
  controller = MyController();
  ...

  //We assign it
  @override
  Widget build(BuildContext context) {
    return MyWidget(controller: controller);
  }
}

//When we cant to call a function
...
controller.myFunction();
...

//When we want to dispose it
...
controller.dispose();
...

需要做一些工作来避免空异常，例如，我们可以在调用函数之前检查控制器引用是否为空，并抛出错误，但这取决于您决定。

于 2020-09-18T14:58:04.293 回答
0

您可以只使用 GlobalKey。我真的不知道如何制作控制器，但这将是我的解决方案。它与 GlobalKey 非常相似，但我希望它对你有用。但我没有找到关于如何做控制器的任何事情……是的。

class InfiniteScroll extends StatefulWidget {
  InfiniteScrollController controller;
  InfiniteScroll({@required this.controller}) {}

  InfiniteScrollState createState() => InfiniteScrollState(controller);
}

class InfiniteScrollState extends State<InfiniteScroll> {
  InfiniteScrollController controller;

  InfiniteScrollState(this.controller) {
    this.controller.setParent(this);
  }

  Widget build(BuildContext context) {}
}


class InfiniteScrollController {
  InfiniteScrollState infiniteScroll;

  void setParent(InfiniteScrollState infiniteScroll) {
    this.infiniteScroll = infiniteScroll;
  }

  void clearItems() {
    infiniteScroll.setState(() {
      //clear Items
    });
  }

}
于 2020-09-18T14:14:52.263 回答