dart - ListView.Builder 之后的底部填充

标签 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,
                      ),
                    ));
                },
              ),
            ),
          ),
        );
  }
);

问题是我在底部有巨大的空白,我现在不知道它来自哪里......正如您从屏幕截图中看到的那样:

enter image description here

如何删除这个空白并使 ListView 在其中展开?

最佳答案

使用 Expanded 小部件可以使 Row、Column 或 Flex 的子项展开以填充主轴中的可用空间(例如,水平方向用于 Row 或垂直方向用于 Column)。如果扩展了多个子项,可用空间将根据弹性因子在它们之间分配。 那可能是你的问题。删除它可能会对您有所帮助。 接下来... 使用 Flexible 小部件为 Row、Column 或 Flex 的子项提供了扩展以填充主轴中可用空间的灵 active (例如,水平方向用于行或垂直方向用于列),但是与 Expanded 不同,Flexible 不会要求 child 填满可用空间。 下一件事:

By default, ListView will automatically pad the list's scrollable extremities to avoid partial obstructions indicated by MediaQuery's padding. To avoid this behavior, override with a zero padding property.

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

第二个选项

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

抱歉Exrta解释;

关于dart - ListView.Builder 之后的底部填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54575824/

相关文章:

flutter - 合并后从List <model>中删除重复项

dart - 在 flutter 中更改标签栏的背景颜色

intellij-idea - 是否可以让pub仅使用IntelliJ IDEA提供Web/目录?

Flutter - 是否应该将 firebase_options.dart 添加到 gitignore?

flutter - 如何将文本小部件放置在具有最大宽度的容器的水平端,而不展开它

json - For循环仅返回第一个json对象Flutter

android - 在 VSCode 中使用 Flutter 时不断出现 Dart 错误

flutter - Dart 泛型类型作为类成员函数的类型

dart - 如何在 Flutter 的 TextField 中使用 onKeyUp 事件

android - 如何在 Flutter 中创建自定义形状,带圆角的四边形