ListView.Builder 后的底部填充

mrs*_*tat 7 dart flutter

我在底部工作表中有一个 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,
                      ),
                    ));
                },
              ),
            ),
          ),
        );
  }
);
Run Code Online (Sandbox Code Playgroud)

我在底部有巨大的空白的问题我现在不知道它来自哪里......正如你从截图中看到的:

在此处输入图片说明

如何删除此空白区域并使列表视图在其中展开?

Sca*_*dio 21

使用 Expanded 小部件可以使 Row、Column 或 Flex 的子项扩展以填充主轴上的可用空间(例如,水平用于行或垂直用于列)。如果扩展了多个子项,则根据弹性系数在它们之间分配可用空间。那可能是你的问题。删除它可能会对您有所帮助。下一件事......使用灵活的小部件为行、列或 Flex 的子项提供了扩展以填充主轴上可用空间的灵活性(例如,水平用于行或垂直用于列),但是,与扩展,灵活不需要孩子填充可用空间。下一件事:

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

    ListView(
  padding: EdgeInsets.zero,
  ...);
Run Code Online (Sandbox Code Playgroud)

第二种选择

  MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: ListView(...),
)
Run Code Online (Sandbox Code Playgroud)

对不起,Exrta 解释;


Jor*_*ies 4

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

您可以通过删除Flexible包装您的TextField.