Question

我在最下面的工作表中有一个Listview。

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Directionality(
      textDirection: globals.getDirection(),
      child: Container(
        margin: EdgeInsets.only(
          right: 10.0,
          left: 10.0),
        height: MediaQuery.of(context).size.height / 2,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Flexible(
              child: TextField()
            ),
            Expanded(
              child: ListView.builder(
                shrinkWrap: false,
                itemCount: nationalities.length,
                itemBuilder: (BuildContext context, int index) {
                  return new Padding(
                    padding: EdgeInsets.only(top: 10.0),
                    child: GestureDetector(
                      onTap: () {
                        setState(() {
                          _data.nationality = nationalities[index];
                        });
                        Navigator.pop(context);
                      },
                      child: Text(
                        nationalities[index],
                        textAlign: TextAlign.center,
                      ),
                    ));
                },
              ),
            ),
          ),
        );
  }
);

问题是我底部没有很大的空白，现在我不知道它是从哪里来的..如您从屏幕快照中所见：

如何删除此空白并使listview在其中展开？

Answer 1

这是由于在同一行/列https://github.com/flutter/flutter/issues/20575中有一个Flexible小部件和一个Expanded小部件引起的错误

您可以通过删除包裹Flexible的{{1}}小部件来解决此问题。

Answer 2

使用扩展窗口小部件会使Row，Column或Flex的子级展开以填充主轴上的可用空间（例如，水平放置在行中或垂直放置在列中）。如果扩展了多个子项，则会根据伸缩因子在可用空间之间进行分配。那也许是你的问题。删除它可能会对您有所帮助。下一件事... 使用Flexible小部件可为Row，Column或Flex的子级提供扩展的灵活性，以填充主轴上的可用空间（例如，水平放置为Row或垂直放置为Column），但是与Expanded不同，Flexible不会要求孩子填补可用空间。下一件事：

默认情况下，ListView将自动填充列表的可滚动末端，以避免MediaQuery的填充指示部分障碍。为了避免这种情况，请使用零填充属性进行覆盖。

    ListView(
  padding: EdgeInsets.zero,
  ...);

第二个选项

  MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: ListView(...),
)

很抱歉对Exrta进行解释；

Answer 3

在ModalBottomSheet中使用ListView.builder（）时，我遇到了同样的问题。我必须使用Column而不是：

sortList() {
var itemList = <Widget>[
  Text('1'),
  Text('2'),
];

// for loop to add more items here 

return Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: itemList);
}

删除mainAxisSize：MainAxisSize.min将重现该问题。

ListView.Builder之后的底部填充

3 个答案: