Flutter - 根据用户文本输入从 API 刷新列表的位置

Question

试图创建一个“作为用户类型的过滤器”列表。

我有一个“父”小部件(屏幕)

文本字段和

在单独文件中定义的“自定义小部件”类 [由 State 组成]对象和 StatefulWidget ] 基本上使用 FutureBuilder 调用 API并用结果构建一个 ListView。当屏幕首次启动时，“自定义小部件”使用 initState()进行 FutureBuilder 所依赖的异步调用。这是完美的工作，并显示未过滤的列表。

最终，我想使用“父”小部件中的文本字段来过滤自定义小部件中 API 的结果。因此，我需要一种方法让自定义小部件“接收”或“检测”文本字段的值，然后将该值包含为 GET API 的参数(用于在服务器端进行过滤)。我可以让它在文本字段作为参数传递给自定义小部件并且可由 State 对象访问(通过 widget.fieldName )的情况下工作。

问题是 initState()只调用一次。因此，当用户键入时，我不能使用它对 API 进行额外的调用。我知道 build()每次文本字段更改时都会调用(因为它是 statefulwidget 的参数)。但是，我不能使用 build()调用异步函数，因为 build() 必须返回一个小部件。调用异步函数然后返回空白/占位符小部件不是一个选项，因为列表最初是预先填充的(在 initState() 中)，没有过滤器，所以我不希望列表在 API 刷新时消失。另外，我认为这不是 build()是为了(它应该是“纯粹的”，我认为这是愚蠢的，只是反射(reflect)了在其他地方处理的状态管理的结果)。

我在寻找“介于” initState() 之间的东西和 build()每次都会调用它，但实际上并不是像 build() 那样绘制 UI 的一部分是。我知道 didChangeDependencies() ，但这不会被调用。看来我必须设置某种类型的 "Inherited Widget"我不熟悉的系统。

任何想法如何完成我正在寻找的东西？我想我理论上可以将文本字段移动到“自定义小部件”类中，看看我是否可以使用两者更接近的范围来相互影响(例如，我可以使用 TextField 的 onChanged() 直接调用异步函数FutureBuilder 依赖(因为它们在同一个类中，它可以访问它)。但是，我想将它们分开，因为将来可能有很多东西我需要/想要传递给自定义用于过滤的小部件(GPS 位置/其他首选项)并试图在自定义小部件类中包含所有内容似乎很笨重(但也许我错了)。

提前致谢!

Answer 1

也许你可以使用 callback-style在您的小部件之间进行通信的事件。 (使用 VoidCallback 和 Function(x) 与 Flutter 通信)

示例:

在这里，我们添加了一个名为 onCountChange 的新 Function(int)，我们使用我们想要传递回父级的值来调用它。

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

class Count extends StatelessWidget {
  final int count;
  final VoidCallback onCountSelected; // <<<

  final Function(int) onCountChange; //  <<<

  Count({
    @required this.count,
    @required this.onCountChange,
    this.onCountSelected,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            onCountChange(1);
          },
        ),
        FlatButton(
          child: Text("$count"),
          onPressed: () => onCountSelected(),
        ),
        IconButton(
          icon: Icon(Icons.remove),
          onPressed: () {
            onCountChange(-1);
          },
        ),
      ],
    );
  }
}

Inside of the parent we’re able to listen to this and change the value of count accordingly

class _CounterPageState extends State<CounterPage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Counter Page")),
      body: Center(
        child: Count(
          count: count,
          onCountSelected: () {//<<< Listen to the onCountSelected callback
            print("Count was selected.");
          },
          onCountChange: (int val) { // <<< return a value back to the parent
            setState(() => count += val);
          },
        ),
      ),
    );
  }
}