我想要一个包含ListViewSingleChildScrollView或任何滚动的高度可变的小部件。
我试着这样做:

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,那么它仍然会将父窗口小部件扩展到屏幕的整个高度。
是否可以让滚动/列表的高度自行调整到其内容,并且仅在需要时扩展到整个屏幕?

最佳答案

如果您知道footerheader小部件的大小,并使用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")),
                  ],
                );
              },
            )),
      ),
    );
  }

关于flutter - 可变大小的ListView或SingleChildScrollView,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57030736/

10-11 14:29