flutter - 可变大小的 ListView 或 SingleChildScrollView

Question

我想要一个可变高度的小部件，其中包含一个 ListView 或一个 SingleChildScrollView 或任何滚动的东西。

我试过这样做:

Container(
    color: Colors.pink,
    child: Column(
      children: [
        Container(color: Colors.orange, child: Text("Header")),
        SingleChildScrollView(
            child: Container(
                height: 10000,
                color: Colors.green,
                child: Text("the height of this content could be anything")),
          ),

        Container(color: Colors.blue, child: Text("Footer")),
      ],
    ),
)

这会导致溢出，因为 SingleChildScrollView 扩展到 10000 像素的高度。如果我将它包含在 Expanded 中，那么它可以正常工作，但是如果它的 child 的高度是 200 而不是 10000，它仍然会将父小部件扩展到屏幕的整个高度。

是否可以让滚动条/列表的高度适应其内容并只在需要时扩展到整个屏幕？

Answer 1

如果您知道 footer 和 header 小部件的大小并使用 LayoutBuilder 小部件获取约束，您就可以做到这一点。

 @override
  Widget build(BuildContext newcontext) {
    return Center(
      child: Scaffold(
        body: Container(
            color: Colors.pink,
            child: LayoutBuilder(
              builder: (_, constraints) {

                final sizeHeader = 150.0;
                final sizeFooter = 150.0;
                final sizeList = 1000.0;
                final available =
                    constraints.maxHeight - (sizeHeader + sizeFooter);

                Widget _buildCenterWidget() {
                  return Container(
                    height: sizeList,
                    color: Colors.green,
                    child: Text("the height of this content could be anything"),
                  );
                }

                return Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Container(
                        height: sizeHeader,
                        color: Colors.orange,
                        child: Text("Header")),
                    available < sizeList
                        ? Expanded(
                            child: _buildCenterWidget(),
                          )
                        : _buildCenterWidget(),
                    Container(
                        height: sizeFooter,
                        color: Colors.blue,
                        child: Text("Footer")),
                  ],
                );
              },
            )),
      ),
    );
  }