flutter - flutter 如何一起使用 Stack 和 listview

Question

我在 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());
        }
      },
    );
  }

Answer 1

除了您必须将 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());
      }
    },
  );
}

希望对您有所帮助!