我在 FutureBuilder
中有一个 ListView.builder
,我可以在其中获取数据库数据并将其显示到屏幕上。
数据一个接一个地显示,但我想知道如何使用 Stack 小部件来相互显示它们。
https://github.com/geekruchika/FlutterCardSwipe这就是必须定位元素的方式(向下滚动)
已解决:
@override
Widget build(BuildContext context) {
var device = MediaQuery.of(context).size;
return FutureBuilder<List<Task>>(
future: DBHelper().getTasks(),
builder: (BuildContext context, AsyncSnapshot<List<Task>> snapshot) {
if (snapshot.hasData) {
var data = snapshot.data;
return snapshot.data.length > 0
? Stack(
children: data.map((task) {
return Positioned(
child: Dismissible(
key: UniqueKey(),
crossAxisEndOffset: -0.1,
onDismissed: (direction) {
DBHelper().delete(task.id);
},
child: Container(
height: device.height * 585 / 812,
child: AddTask(null, task.name,
'Meeting with directory', null, []),
),
),
);
}).toList(),
)
: Container(
height: device.height * 585 / 812,
child: NoTasksFound(),
);
} else {
return Center(child: CircularProgressIndicator());
}
},
);
}
最佳答案
除了您必须将 Iterable
转换为 List
之外,您的尝试是正确的。
喜欢:
Widget build(BuildContext context) {
var device = MediaQuery.of(context).size;
return FutureBuilder<List<Task>>(
future: DBHelper().getTasks(),
builder: (BuildContext context, AsyncSnapshot<List<Task>> snapshot) {
if (snapshot.hasData) {
var data = snapshot.data;
return Stack(
children: snapshot.data.map((task) { // map the data
return Positioned(
child: Dismissible(
key: UniqueKey(),
crossAxisEndOffset: -0.2,
background: Container(color: Colors.red),
onDismissed: (direction) {
// DBHelper().delete(task.id);
},
child: Container(
// margin: EdgeInsets.only(bottom: 100, top: 100),
height: device.height * 585 / 812,
child: AddTask(null, 'Description',
'Meeting with directory', null, []),
),
),
);
}).toList(), // convert the mapped iterable to list
);
} else {
return Center(child: CircularProgressIndicator());
}
},
);
}
希望对您有所帮助!
关于flutter - flutter 如何一起使用 Stack 和 listview,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57410403/