Flutter

Question

这里是 Flutter 新手！

目前，我的脚手架有 2 个列表视图构建器，底部的构建器给我无限高度（!constraints.hasBoundedHeight 错误）问题。

我已经尝试在所有 3 个列表视图上使用 shrinkWrap，正如类似问题中所建议的那样，但我得到了同样的错误。

唯一可行的方法是将 FutureBuilder 包裹在 SizedBox 中。但这对我来说似乎不直观，因为我希望它能够根据需要理想地扩展并且可以滚动。

My rough solution is to maybe dynamically calculate the height based on the number of items the FutureBuilder needs, but again, I feel there should be a better solution.

我的代码片段附在下面：

return Scaffold(
      appBar: AppBar(),
      body: ListView(
        children: [
          ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 2,
              itemBuilder: (context, index) {
                return const SuggestCard(
                  indexKey: 'takt',
                );
              }),
          FutureBuilder<AnimeDetails>(
            future: _animeDetail,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                    itemCount: 2, //Number of anime from list
                    itemBuilder: (context, index) {
                      var anime = snapshot.data; //Get the data from the index
                      return AnimeCard(
                        anime: anime,
                      );
                    });
              } else {
                return const Center(child: CircularProgressIndicator());
              }
            },
          ),
        ],
      ),
    );

Answer 1

根据您的评论，我认为以下 link 会对您有所帮助。

Lists

Answer 2

我刚刚将以下几行添加到您的代码中。您可以试试下面的代码。

shrinkWrap: true,
physics: const  NeverScrollableScrollPhysics(),

return Scaffold(
      appBar: AppBar(),
      body: ListView(
        children: [
          ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 2,
              shrinkWrap: true,
              physics: const  NeverScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                return const SuggestCard(
                  indexKey: 'takt',
                );
              }),
          FutureBuilder<AnimeDetails>(
            future: _animeDetail,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                    itemCount: 2, //Number of anime from list
                    shrinkWrap: true,
                    physics: const  NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      var anime = snapshot.data; //Get the data from the index
                      return AnimeCard(
                        anime: anime,
                      );
                    });
              } else {
                return const Center(child: CircularProgressIndicator());
              }
            },
          ),
        ],
      ),
    );

Answer 3

父级 ListView 处理 body 的滚动事件，而第二个 ListView 将具有固定高度，您可以这样做

  return Scaffold(
        body: LayoutBuilder(
      builder: (context, constraints) => ListView(
        children: [
          SizedBox(
            height: constraints.maxHeight * .3,
            child: ListView.builder(
              itemCount: 122,
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
              itemBuilder: (context, index) => Text("H $index"),
            ),
          ),
          ListView.builder(
            shrinkWrap: true,
            physics:
                const NeverScrollableScrollPhysics(), // parent controll the scroll event
            itemCount: 44,
            itemBuilder: (context, index) => Text("$index"),
          ),
        ],
      ),
    ));

Flutter - ListView 中的 unboundedHeight 错误

Flutter - unboundedHeight error within ListView

dart

flutter-layout