如何在 Flutter 中使用容器占用可用空间答案

【问题标题】：How to take available space using container in Flutter如何在 Flutter 中使用容器占用可用空间
【发布时间】：2021-01-23 00:16:16
【问题描述】：

我正在尝试使用以下代码使用 SingleChildScrollView 和 ListView 制作应用程序

SingleChildScrollView(
          child: Column(
            children: [
              maintile(),
              Container(
                padding: EdgeInsets.all(15.0),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(75.0),
                  ),
                ),
                child: ListView.builder(
                  shrinkWrap: true,
                  primary: false,
                  itemCount: items.length,
                  itemBuilder: (context, index) {
                    return listitem();
                  },
                ),
              ),
            ],
          ),

但是如果我在它周围提供可扩展的列表视图容器不会占用可用空间。有什么办法可以实现Container占用可用空间？

【问题讨论】：

你应该设置 Column 的大小并将 ListView 包裹在 Expanded 中
如何知道设备的全屏高度并放到列？
MediaQuery.of(context).size 为您提供设备屏幕尺寸。
但不工作..
移除 shrinkWrap: true,

标签： flutter dart flutter-listview singlechildscrollview

【解决方案1】：

最终代码：

final screenSize = MediaQuery.of(context).size;
return SafeArea(
  child: Scaffold(
      body: Container(
        height: screenSize.height,
        width: screenSize.width,
        child: Column(
          children: [
            maintile(),
            Expanded(
              child: Container(
                padding: EdgeInsets.all(15.0),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(75.0),
                  ),
                ),
                child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                  itemCount: items.length,
                  itemBuilder: (context, index) {
                    return listitem();
                  },
                ),
              ),
            ),
          ],
        ),
      )
  ),
);

【讨论】：

如果 screenSize 不起作用，则删除 height : screenSize.height to double.infinity 和 width 相同
这不是我想要的。我想滚动包括列表视图在内的所有内容，即包括 SingleChildScrollView
那么你的根目录将首先是 SingleChildScrollView 然后是 Container
我的意思是当我滚动主磁贴和列表视图都滚动时，这就是我禁用 ListView 滚动的原因。
您是否尝试过将ListView 包裹在Expanded 中？ & 删除父 Container 周围的那个。这就是我总是让我的 ListView 填满空间的方法。

【解决方案2】：

像这样将Expanded 用作Container 父级：

Expanded(
      child: Container(
        child: Text("YOUR_WIDGET"),
      ),
    )

【讨论】：