我如何实现以下布局

Question

我想构建图像中提供的布局，并且我已经完成了，但我希望 Play all 按钮也能够作为 Future 列表视图构建器滚动。但我无法做到这一点。我使用 NEstedScrollView() 环绕 DefaultTabController Widget

 @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 10, left: 10, right: 10),
            child: Row(
              children: [
                AddButton(
                    icon: Icons.play_circle_outline_rounded,
                    buttonText: 'Play all',
                    onPressed: () {})
              ],
            ),
          ),
          Expanded(
            child: FutureBuilder(
                future: GetPermissionAndSongs().getAvailableSongs(),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  Widget leading;
                  Widget artworkAvailableWidget(dynamic snapshot) {
                    return CircleAvatar(
                      backgroundImage: MemoryImage(snapshot),
                    );
                  }

                  Widget artworkUnavailableWidget(dynamic snapshot) {
                    return CircleAvatar(
                      backgroundImage: AssetImage('images/happy_music.png'),
                      backgroundColor: Colors.grey.shade100,
                    );
                  }

                  Widget artworkLoadingWidget() {
                    return CircleAvatar(
                      child: CircularProgressIndicator(),
                    );
                  }

                  FlutterAudioQuery audioQuery = new FlutterAudioQuery();
                  if (snapshot.data == null) {
                    return Container(
                      child: Center(
                        child: CircularProgressIndicator(),
                      ),
                    );
                  } else {
                    return ListView.builder(
                        itemCount: snapshot.data.length,
                        itemBuilder: (BuildContext context, int index) {
                          return SongPlayCard(
                            imagePath: snapshot.data[index].songArtwork,
                            songPath: snapshot.data[index].songPath,
                            songName: snapshot.data[index].songName,
                            onPress: () {
                              SharedPreferences.getInstance().then((value) {
                                value.setStringList('last_Played', [
                                  snapshot.data[index].songName,
                                  snapshot.data[index].songPath,
                                  snapshot.data[index].artistName,
                                  snapshot.data[index].songId,
                                ]);
                              });
                              changeName(
                                snapshot.data[index].songName,
                                snapshot.data[index].artistName,
                                snapshot.data[index].songPath,
                                snapshot.data[index].songId,
                                _leadingArtwork(leading),
                              );
                            },
                            artistName: snapshot.data[index].artistName,
                            leading: (snapshot.data[index].songArtwork == null)
                                ? FutureBuilder<dynamic>(
                                    future: audioQuery.getArtwork(
                                      type: ResourceType.SONG,
                                      id: snapshot.data[index].songId,
                                    ),
                                    builder: (_, snapshot) {
                                      if (snapshot.data == null) {
                                        leading = artworkLoadingWidget();
                                        return leading;
                                      } else {
                                        if (snapshot.data.isEmpty == false) {
                                          print(snapshot.data);
                                          leading = artworkAvailableWidget(
                                              snapshot.data);
                                          return leading;
                                        } else {
                                          leading = artworkUnavailableWidget(
                                              snapshot.data);
                                          return leading;
                                        }
                                      }
                                    },
                                  )
                                : null,
                          );
                        });
                  }
                }),
          ),
          FutureBuilder(
            future: getLastPlayed(),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              FlutterAudioQuery audioQuery = new FlutterAudioQuery();
              if (snapshot.data == null) {
                return FloatingPlayer(
                  songName: '',
                  songArtist: "",
                );
              } else {
                if (snapshot.data.isEmpty == false) {
                  String songName =
                      (updatedName == "") ? snapshot.data[0] : updatedName;
                  String artistName = (updatedArtistName == "")
                      ? snapshot.data[2]
                      : updatedArtistName;
                  String songPath = (updatedSongPath == "")
                      ? snapshot.data[1]
                      : updatedSongPath;
                  return FutureBuilder(
                    future: GetPermissionAndSongs()
                        .getLastPlayedArtworks(snapshot.data[0]),
                    builder: (BuildContext context, AsyncSnapshot snapshot) {
                      if (snapshot.data == null) {
                        return Center(
                          child: CircularProgressIndicator(),
                        );
                      } else {
                        return FloatingPlayer(
                          songName: songName,
                          iconData: iconData,
                          songArtist: artistName,
                          imagePath: snapshot.data[0].songArtwork,
                          onPlayOrPause: () {
                            playPause(songPath, null);
                          },
                          leading: (updatedLeadingArtwork == null)
                              ? (leadingArtwork == null)
                                  ? (snapshot.data[0].songArtwork == null)
                                      ? FutureBuilder(
                                          future: audioQuery.getArtwork(
                                              type: ResourceType.SONG,
                                              id: snapshot.data[0].songId),
                                          builder: (_, snapshot) {
                                            if (snapshot.data == null) {
                                              leadingArtwork = CircleAvatar(
                                                child:
                                                    CircularProgressIndicator(),
                                              );
                                              return leadingArtwork;
                                            } else {
                                              if (snapshot.data.isEmpty ==
                                                  false) {
                                                leadingArtwork = CircleAvatar(
                                                  backgroundImage: MemoryImage(
                                                      snapshot.data),
                                                );
                                                return leadingArtwork;
                                              } else {
                                                leadingArtwork = CircleAvatar(
                                                    backgroundImage: AssetImage(
                                                        'images/happy_music.png'),
                                                    backgroundColor:
                                                        Colors.teal.shade600);
                                                return leadingArtwork;
                                              }
                                            }
                                          },
                                        )
                                      : null
                                  : leadingArtwork
                              : updatedLeadingArtwork,
                        );
                      }
                    },
                  );
                } else {
                  return FloatingPlayer(
                    songName: 'Last played unavailable',
                    songArtist: "",
                  );
                }
              }
            },
          ),
        ],
      ),
    );
  }

以上代码对我没有帮助。它将未来列表视图构建器扩展到整个屏幕。我如何让它也可以滚动

Answer 1

解决此问题的一种方法是使用 SingleChildScrollView 并将 ListView 的 physics 设置为 ScrollPhysics()

SingleChildScrollView(
  child: Column(
    children: [
      PlayAllButton(),
      ListView(
        //My List View Properties
        physics: ScrollPhysics(),
      ),
    ),
  ),
)