在 Flutter 中创建自定义控制器
Creating a custom controller in Flutter
我创建了一个名为 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
进行本地状态管理。
您可以只使用 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
});
}
}
我只是将要公开的功能传递给控制器。
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();
...
需要做一些工作来避免空异常,例如我们可以在调用函数之前检查控制器引用是否为空,然后抛出错误,但这由您决定。
我不认为@ValdaXD 的回答描述了一个好的解决方案。
通常解决这个问题的方法,在 TextField
或 ScrollController
等原生 Flutter 小部件中也是这样,是一个扩展 ChangeNotifier
.
的控制器 class
控制器将处理这些项目并提供 public 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,
);
}
}
我创建了一个博客 post,其中包含不同的示例但主题相同:自定义小部件的控制器:https://www.flutterclutter.dev/flutter/tutorials/create-a-controller-for-a-custom-widget/2021/2149/
我创建了一个名为 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
进行本地状态管理。
您可以只使用 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
});
}
}
我只是将要公开的功能传递给控制器。
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();
...
需要做一些工作来避免空异常,例如我们可以在调用函数之前检查控制器引用是否为空,然后抛出错误,但这由您决定。
我不认为@ValdaXD 的回答描述了一个好的解决方案。
通常解决这个问题的方法,在 TextField
或 ScrollController
等原生 Flutter 小部件中也是这样,是一个扩展 ChangeNotifier
.
控制器将处理这些项目并提供 public 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,
);
}
}
我创建了一个博客 post,其中包含不同的示例但主题相同:自定义小部件的控制器:https://www.flutterclutter.dev/flutter/tutorials/create-a-controller-for-a-custom-widget/2021/2149/