堆栈内的水平Listview:水平视口被赋予无限宽度

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了堆栈内的水平Listview:水平视口被赋予无限宽度相关的知识,希望对你有一定的参考价值。

如何在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(

它表现得很好,但当然不是好事。

我能做什么?

答案

你可以尝试这个..

ListView.builder(
    shrinkWrap: true,
...

以上是关于堆栈内的水平Listview:水平视口被赋予无限宽度的主要内容,如果未能解决你的问题,请参考以下文章

如何在颤动的列表视图中嵌套列表视图?

垂直视口被赋予了无限的高度错误[重复]

Flutter:为啥我收到“垂直视口被赋予无限高度”错误?

Flutter - 具有无限高度错误的水平 ListView

水平堆栈视图内的标签宽度相等?

SingleChildScrollView 内的水平滚动 ListView.builder - 包装内容高度