如何向列添加ListView？

Question

我想将我的ListView.seperated添加到列中，这样我就可以在加载更多项目时在这个列表视图下面添加CircularProgressIndex ator。我使用了如何在Flutter中将列表视图添加到列中的建议？因此我制作了结构列-

======== Exception caught by rendering library =====================================================
RenderBox was not laid out: RenderRepaintBoundary#e8fad NEEDS-LAYOUT NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1929 pos 12: 'hasSize'
The relevant error-causing widget was: 

The relevant error-causing widget was: 
  Column file:///C://lib/ui/pages/home/page/HomePage.dart:125:16
When the exception was thrown, this was the stack: 
#0      RenderFlex.performLayout.<anonymous closure> (package:flutter/src/rendering/flex.dart:926:9)
#1      RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:929:6)
#2      RenderObject.layout (package:flutter/src/rendering/object.dart:1781:7)
#3      ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:54:11)
#4      RenderFlex._computeSizes (package:flutter/src/rendering/flex.dart:829:43)

  Column file:///C:/.../.../lib/ui/pages/home/page/HomePage.dart:125:16

你能告诉我我做错了什么吗？这个AdvertisementTile构建了新的小部件，但它构建在另一个列上。也许这是错的？

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:.../ui/pages/home/page/AdvertisementCard.dart';
import 'package:.../ui/pages/home/page/model/AdvertisementList.dart';

import '../../SizedBox.dart';
import 'AdvertisementProdRepository.dart';
import 'BottomAppBar.dart';
import 'FAB.dart';
import 'model/AdvertisementList.dart';

class HomePage extends StatefulWidget {
  final String jwt;

  const HomePage(this.jwt);

  @override
  _HomePage createState() => _HomePage();

  factory HomePage.fromBase64(String jwt) => HomePage(jwt);
}

class _HomePage extends State<HomePage> {
  late final String jwt;
  late Future<AdvertisementList> _listOfItems;
  final searchTextController = TextEditingController();

  @override
  void initState() {
    super.initState();
    jwt = widget.jwt;
    _listOfItems = AdvertisementProdRepository.fetchAdvertisements(1);
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        body: Scaffold(
          backgroundColor: const Color(0xFEF9F9FC),
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
          floatingActionButton: buildFAB(),
          bottomNavigationBar: BuildBottomAppBar(),
          body: Container(
            padding: EdgeInsets.only(left: 25.0, right: 25, top: 25),
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Column(
              children: [
                TextFormField(
                  controller: searchTextController,
                  decoration: InputDecoration(
                      prefixIcon: Icon(Icons.search),
                      border: OutlineInputBorder(),
                      hintText: 'Szukaj',
                      fillColor: Color(0xffeeeeee),
                      filled: true),
                ),
                buildSizedBox(20.0),
                Padding(
                  padding: const EdgeInsets.only(left: 4),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Text(
                        'Najnowsze ogłoszenia',
                        style: TextStyle(
                            fontSize: 20, fontWeight: FontWeight.bold),
                        textAlign: TextAlign.left,
                      ),
                    ],
                  ),
                ),
                buildSizedBox(10.0),
                FutureBuilder<AdvertisementList>(
                  future: _listOfItems,
                  builder: (context, snapshot) {
                    if (!snapshot.hasData) {
                      return Center(child: CircularProgressIndicator());
                    } else {
                      return AdvertisementTile(advertisements: snapshot.data!);
                    }
                  },
                ),
              ],
            ),
          ),
        ),
      );
}

class AdvertisementTile extends StatefulWidget {
  final AdvertisementList advertisements;

  AdvertisementTile({Key? key, required this.advertisements}) : super(key: key);

  @override
  State<StatefulWidget> createState() => AdvertisementTileState();
}

class AdvertisementTileState extends State<AdvertisementTile> {
  AdvertisementLoadMoreStatus loadMoreStatus =
      AdvertisementLoadMoreStatus.STABLE;
  final ScrollController scrollController = new ScrollController();
  late List<Advertisement> advertisements;
  late int currentPageNumber;
  bool _loading = false;

  @override
  void initState() {
    advertisements = widget.advertisements.items;
    currentPageNumber = widget.advertisements.pageNumber;
    super.initState();
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener(
      onNotification: onNotification,
        child: Column(
          children: <Widget>[
            Expanded(
              child: ListView.separated(
                padding: EdgeInsets.zero,
                scrollDirection: Axis.vertical,
                controller: scrollController,
                itemCount: advertisements.length,
                physics: const AlwaysScrollableScrollPhysics(),
                itemBuilder: (_, index) {
                  return AdvertisementCard(data: advertisements[index]);
                },
                separatorBuilder: (BuildContext context, int index) {
                  return SizedBox(
                    height: 10,
                  );
                },
              ),
            ),
          ],
        ),
    );
  }
  /*child: Padding(
  padding: const EdgeInsets.only(bottom: 28.0),*/
  bool onNotification(ScrollNotification notification) {
    if (notification is ScrollUpdateNotification) {
      if (scrollController.position.maxScrollExtent > scrollController.offset &&
          scrollController.position.maxScrollExtent - scrollController.offset <=
              50) {
        if (loadMoreStatus == AdvertisementLoadMoreStatus.STABLE) {
          loadMoreStatus = AdvertisementLoadMoreStatus.LOADING;
          _loading = true;
          AdvertisementProdRepository.fetchAdvertisements(currentPageNumber + 1)
              .then((advertisementObject) {
            currentPageNumber = advertisementObject.pageNumber;
            loadMoreStatus = AdvertisementLoadMoreStatus.STABLE;
            setState(() => advertisements.addAll(advertisementObject.items));
            _loading = false;
          });
        }
      }
    }
    return true;
  }
}

enum AdvertisementLoadMoreStatus { LOADING, STABLE }

Answer 1

您应该限制Listview的高度，因为列想要获取其父级的所有可用高度（在您的情况下很可能是Scaffold）。因此，作为Listview的unbingd-高度小部件将导致这种错误。解决方案：用一定高度的容器包装Listview。

Answer 2

因此，列的行为方式是，当你给它两个子项时，颤振引擎估计单个小部件将覆盖的空间，然后它将相应地呈现这两个小部件。一个扩展的小部件告诉flatter获取一个小部件，然后覆盖该小部件可以占用的尽可能多的空间。在某些情况下，如果另一个小部件被包装在容器中，那么使用扩展的小部件是有意义的，这样一来，flatter就知道您指的是剩余的空间ListView是一个获取所有可用空间的小部件。

因此，要解决渲染问题，您可以将列表视图放入容器中，并给容器一个固定高度，然后flift知道如何管理屏幕并避免渲染问题。

如果你最终得到了一些，你仍然拥有大部分的用户界面，那么你只需要调整容器的高度。

例如

                      Container(
                        height: 400,
                        child: ListView.separated(
                            itemBuilder: (context, index) {
                              return AdvertisementCard(
                                  data: advertisements[index]);
                            },
                            separatorBuilder: (context, index) {
                              return SizedBox(
                                height: 10,
                              );
                            },
                            itemCount: reports.length),
                      )