Flutter:使用GetX刷新ListView.Builder
Flutter:使用GetX刷新ListView.Builder
提问于 2021-01-12 05:11:52
我正在根据toDoId的数量创建List of Cards。
toDoController.toDo()类似于
toDo = [q1, r4, g4, d4].obs;这是我的ListView.builder()
Obx(() {
List _todo = toDoController.toDo();
return ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: _todo.length,
itemBuilder: (BuildContext context, int i) {
var _loading = true;
var _title = 'loading';
getTodoInfo() async {
_title = await toDoController
.getTodoInfo(
_todo[i]
);
_loading = false;
print(_title); // 'Clean!' <--- returns correct title
}
getTodoInfo();
return Container(
height: 150,
width: 150,
child: _loading
? Text(
_title,
)
: Text(
_title,
),
);
},
);
})我正在尝试让每个容器调用http requests来从我的数据库中获取标题。获取标题，然后更新到下面的Text()小部件。但是，在从服务器返回值之后，它不会更新。
我可以使用FutureBuilder让他们等待获取标题的请求。我也试过用FutureBuilder。然而，FutureBuilder并不是对variable的变化也有反应。所以，我在这里尝试这样做。我有点明白问题所在。widget返回后，它是不是不可更改的？有没有什么办法可以用GetX做到这一点呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-16 10:41:17
下面是一个通过Listview.builder使用GetX的示例。
这个示例使用的是GetBuilder而不是Obx，因为我不确定使用流是否会带来任何好处。如果出于某种原因需要可观察对象/流，可以将numbers更新为.obs，并且应该删除update()调用，并将GetBuilder替换为GetX或Obx。如果有人问起，我会将其添加为另一个示例。
GetBuilder包装ListView.builder，并且只重新构建ListView，而不是整个小部件树/页面。
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class ListDataX extends GetxController {
List<int> numbers = List<int>.from([0,1,2,3]);
void httpCall() async {
await Future.delayed(Duration(seconds: 1),
() => numbers.add(numbers.last + 1)
);
update();
}
void reset() {
numbers = numbers.sublist(0, 3);
update();
}
}
class GetXListviewPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
ListDataX dx = Get.put(ListDataX());
print('Page ** rebuilt');
return Scaffold(
body: SafeArea(
child: Column(
children: [
Expanded(
flex: 8,
child: GetBuilder<ListDataX>(
builder: (_dx) => ListView.builder(
itemCount: _dx.numbers.length,
itemBuilder: (context, index) {
return ListTile(
title: Text('Number: ${_dx.numbers[index]}'),
);
}),
),
),
Expanded(
flex: 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
RaisedButton(
child: Text('Http Request'),
onPressed: dx.httpCall,
),
RaisedButton(
child: Text('Reset'),
onPressed: dx.reset,
)
],
)
)
],
),
),
);
}
}Obx / Streams版本
以下是使用Rx streams和Obx小部件的上述解决方案。
class ListDataX2 extends GetxController {
RxList<int> numbers = List<int>.from([0,1,2,3]).obs;
void httpCall() async {
await Future.delayed(Duration(seconds: 1),
() => numbers.add(numbers.last + 1)
);
//update();
}
void reset() {
numbers = numbers.sublist(0, 3);
//update();
}
}
class GetXListviewPage2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
ListDataX2 dx = Get.put(ListDataX2());
print('Page ** rebuilt');
return Scaffold(
body: SafeArea(
child: Column(
children: [
Expanded(
flex: 8,
child: Obx(
() => ListView.builder(
itemCount: dx.numbers.length,
itemBuilder: (context, index) {
return ListTile(
title: Text('Number: ${dx.numbers[index]}'),
);
}),
),
),
Expanded(
flex: 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
RaisedButton(
child: Text('Http Request'),
onPressed: dx.httpCall,
),
RaisedButton(
child: Text('Reset'),
onPressed: dx.reset,
)
],
)
)
],
),
),
);
}
}Stack Overflow用户
发布于 2021-01-12 05:31:51
我没有测试它，因为我没有一个完整的样本，但我认为这是您正在寻找的：
FutureBuilder<String>(
future: toDoController.getTodoInfo(_todo[i]),
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.hasData) {
return Container(
height: 150,
width: 150,
child: Text(snapshot.data),
);
} else if (snapshot.hasError) {
return Text('Error');
} else {
return CircularProgressIndicator();
}
},
),这是您需要为列表构建器的每一项返回的代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65674589
复制相关文章
相似问题
腾讯云开发者
