Question

如何在Flutter中显示堆栈中的水平Listview？

Listview是另一个（垂直）Listview中卡的一部分。如果我给它固定的宽度，我可以正确显示它，但是我不可以，我希望它适应卡片的宽度。

我有以下代码：

return ListView.builder(
          itemCount: snapshot.data.length,
          itemBuilder: (context, index) {
            final PlatformModel platform = snapshot.data[index];

            final EdgeInsets padding = index == 0
                ? const EdgeInsets.only(
                    left: 16.0,
                    right: 8.0,
                    top: 8.0,
                    bottom: 8.0,
                  )
                : const EdgeInsets.only(
                    left: 8.0,
                    right: 8.0,
                    top: 8.0,
                    bottom: 8.0,
                  );

            bloc.fetchPlatformLogo(platform.platformLogo);
            String fetcher = "platforms='${platform.id}'";
            bloc.fetchGames(fetcher);

            return Padding(
              padding: padding,
              child: Card(
                child: Container(
                  height: 250.0,
                  child: Stack(
                    fit: StackFit.expand,
                    children: <Widget>[
                      Image.network(NETWORK_URL),
                      _listGames(fetcher),
                    ],
                  ),
                ),
              ),
            );
          },
        );

和

Widget _listGames(String fetcher) {
    final bloc = BlocProvider.of<GamesBloc>(context);

    return Positioned(
      bottom: 5.0,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: SizedBox(
          height: 200,
          child: StreamBuilder(
            stream: bloc.games,
            builder: (context,
                AsyncSnapshot<Map<String, Future<List<GameModel>>>> snapshot) {
              if (!snapshot.hasData) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }

              return FutureBuilder(
                future: snapshot.data[fetcher],
                builder:
                    (context, AsyncSnapshot<List<GameModel>> snapshotGames) {
                  if (!snapshot.hasData || !snapshotGames.hasData) {
                    return Center(
                      child: CircularProgressIndicator(),
                    );
                  }

                  if (snapshotGames.data.length == 0) {
                    return Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Icon(
                            Icons.warning,
                            size: 100.0,
                          ),
                          Text("Nessun gioco presente"),
                        ],
                      ),
                    );
                  }

                  return ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: snapshotGames.data.length,
                    itemBuilder: (context, index) {
                      final GameModel game = snapshotGames.data[index];
                      final lastGame = index == snapshotGames.data.length;

                      bloc.fetchGameCover(game.cover);

                      return Padding(
                        padding:
                            lastGame ? 0.0 : const EdgeInsets.only(right: 8.0),
                        child: GameCard(game: game),
                      );
                    },
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }

但是我不断收到“水平视口被赋予无限制的宽度”的信息。

例如，如果我放

        child: SizedBox(
          height: 200,
          width: 300,
          child: StreamBuilder(

它显示得很好，但是当然不好。

我该怎么办？

Answer 1

可以尝试一下吗。.

ListView.builder(
    shrinkWrap: true,
...

堆栈内的水平Listview：水平视口的宽度不受限制

1 个答案: