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

Question

我不理解RefreshIndicator在Flutter中的使用。我有一个诊所病人的列表。患者列表在应用程序中显示后可能会发生更改，其他应用程序用户可能会添加新患者或删除现有患者。

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

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

//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)