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中，则它可以正常工作，但是如果其子级的高度例如是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")),
                  ],
                );
              },
            )),
      ),
    );
  }

Answer 2

您可以使用ConstrainedBox为小部件指定minHeight，maxHeight。请记住，您的小部件都不应具有无限的高度/宽度，这会破坏UI，也可能引发错误

大小可变的ListView或SingleChildScrollView

2 个答案: