使用 RefreshIndicator 从 Web 服务刷新列表视图

Question

我不明白在 Flutter 中 RefreshIndicator 的使用。我有一个诊所患者的列表视图。一旦显示在应用程序中，患者列表可能会发生变化，其他应用程序用户可能会添加新患者或删除现有患者。

我需要的是实现一种在需要时刷新患者列表的方法。

这是我显示列表项的代码片段：

//LISTA DE PACIENTES
            Expanded(
              child: Consumer(
                builder: (context, watch, child) {
                  var value = watch(clinicaIdStateProvider).state;

                  return Container(
                    child: FutureBuilder(
                      future: fetchPacientes(value),
                      builder: (context, snapshot) {

                        if (snapshot.hasData) {
                          var filteredList = snapshot.data;
                          print("a minusculas:"+_controller.text.toLowerCase());
                          filteredList = filteredList.where((element) => (
                              element.nombre_completo.toLowerCase().contains(_controller.text.toLowerCase()) ||
                                  element.NHC.toLowerCase().contains(_controller.text.toLowerCase()) ||
                                  element.apellidos.toLowerCase().contains(_controller.text.toLowerCase())
                          )).toList();

                          print("texto filtrado="+_controller.text.toLowerCase());


                          return ListView.builder(
                            itemCount: filteredList.length,
                            shrinkWrap: true,
                            itemBuilder: (BuildContext context, index) {
                              Paciente paciente = filteredList[index];
                              return new GestureDetector(
                                onTap: () {
                                  print("paciente seleccionada nbre: " +
                                      '${paciente.nombre_completo}');
                                },
                                child: new Card(

                                  elevation: 6,
                                  child: new Container(

                                    child: Column(
                                      children: [
                                        Padding(
                                          padding: const EdgeInsets.all(4.0),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: [
                                              Padding(
                                                padding:
                                                    const EdgeInsets.all(4.0),
                                                child: Text(
                                                  "${paciente.apellidos}" +
                                                      ", " +
                                                      "${paciente.nombre_completo}",
                                                  style:
                                                      TextStyle(fontSize: 18),
                                                ),
                                              ),
                                              Column(
                                                children: [
                                                  Container(
                                                    decoration: BoxDecoration(
                                                        color:
                                                            AppColors.azulCapenergy,
                                                        border: Border.all(
                                                          color: AppColors
                                                              .azulCapenergy,
                                                        ),
                                                        borderRadius:
                                                            BorderRadius.all(
                                                                Radius.circular(
                                                                    12))),
                                                    child: Padding(
                                                      padding:
                                                          const EdgeInsets.all(4.0),
                                                      child: Text(
                                                        "NHC: ${paciente.NHC}",
                                                        style: TextStyle(
                                                            color: AppColors
                                                                .blancoCapenergy,
                                                            fontSize: 16),
                                                      ),
                                                    ),

                                                  ),
                                                  SizedBox(height: 3,),
                                                  FlatButton(
                                                    onPressed: (){
                                                      print("boton agenda pulsado de ${paciente.nombre_completo}");
                                                    },
                                                    child: Container(
                                                      decoration: BoxDecoration(
                                                          color:
                                                          Colors.transparent,
                                                          border: Border.all(
                                                            color: AppColors
                                                                .azulCapenergy,
                                                          ),
                                                          borderRadius:
                                                          BorderRadius.all(
                                                              Radius.circular(
                                                                  15))),
                                                      child: Padding(
                                                        padding:
                                                        const EdgeInsets.all(8.0),
                                                        child: Image.network(
                                                          'https://.../agenda.png',
                                                          height: 25,
                                                        ),
                                                      ),

                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ],
                                          ),
                                        ),

                                      ],
                                    ),
                                  ),
                                ),
                              );
                            },
                          );
                        }

                        return Image.asset(
                          "assets/images/vacio.png",
                          fit: BoxFit.contain,
                        );
                      },
                    ),
                  );
                },
              ),
            ),

在 FutureBuilder 子项中，我正在调用填充列表视图的方法：

fetchPacientes(value)

在我当前的应用程序中实现 RefreshIndicator 的最佳方式是什么？

Answer 1

我就是这样做的..

您必须为您的 ListView.Builder

创建一个单独的 StatefulWidget

class XYZ extends StatefulWidget {
  final filteredList;

  const XYZ(this.filteredList);
  @override
  _XYZState createState() => _XYZState();
}

class _XYZState extends State<XYZ> {
  var refreshfilteredList;

  @override
  Widget build(BuildContext context) {
    var filteredList = refreshfilteredList ?? widget.filteredList;

    return RefreshIndicator(
        onRefresh: () async {
          refreshfilteredList = await fetchPacientes(value);

          refreshfilteredList = refreshfilteredList
              .where((element) => (element.nombre_completo
                      .toLowerCase()
                      .contains(_controller.text.toLowerCase()) ||
                  element.NHC
                      .toLowerCase()
                      .contains(_controller.text.toLowerCase()) ||
                  element.apellidos
                      .toLowerCase()
                      .contains(_controller.text.toLowerCase())))
              .toList();
          setState(() {});
        },
        child: ListView.builder());
  }
}

实施

 Expanded(
              child: Consumer(
                builder: (context, watch, child) {
                  var value = watch(clinicaIdStateProvider).state;

                  return Container(
                    child: FutureBuilder(
                      future: fetchPacientes(value),
                      builder: (context, snapshot) {

                        if (snapshot.hasData) {
                          var filteredList = snapshot.data;
                          print("a minusculas:"+_controller.text.toLowerCase());
                          filteredList = filteredList.where((element) => (
                              element.nombre_completo.toLowerCase().contains(_controller.text.toLowerCase()) ||
                                  element.NHC.toLowerCase().contains(_controller.text.toLowerCase()) ||
                                  element.apellidos.toLowerCase().contains(_controller.text.toLowerCase())
                          )).toList();

                          print("texto filtrado="+_controller.text.toLowerCase());


                          return XYZ(filteredList)

使用 RefreshIndicator 从 Web 服务刷新列表视图

Using RefreshIndicator to refresh listview from web service

pull-to-refresh

flutter