SingleChildScrollView ，子列上的空格问题

Posted 2023-02-23

【中文标题】SingleChildScrollView ，子列上的空格问题

【英文标题】：SingleChildScrollView , Problem with spaces on the child Column

【发布时间】：2020-11-30 14:07:47

【问题描述】：

当我尝试打开手机键盘时，BOTTOM OVERFLOWED BY ** PIXELS 所以我将 Column 包裹在 SingleChildScrollView 但不知何故它被推到了顶部并且 MainAxisAlignment.spaceEvenly 停止工作，所以我使用 SizedBox 在它们之间留出了一些空间 我的问题是：这是一个好方法吗？实现小部件之间的空间，它是否适用于不同的手机尺寸

我的代码：

第二个问题：当我像下图一样打开键盘时，如何将所有列推到顶部直到最后一项显示不滚动

【参考方案1】：

要使MainAxisAlignment.spaceEvenly 再次工作，您需要将ConstrainedBox 包裹在内部，如下所示：

SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            maxHeight: MediaQuery.of(context).size.height,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text('data'),
              Text('HelloWorld'),
            ],
          ),
        ),
      ),

要滚动到表单的末尾，请将 ScrollController 用于 SingleChildScrollView 并像这样动画到列表的末尾：

   controller.animateTo(
      controller.position.maxScrollExtent,
      duration: const Duration(milliseconds: 500),
      curve: Curves.easeOut,
    );

SizedBox 用于空格是可以的，一个小提示：记得在它之前设置const 以提高您的应用程序的性能，因为这样 Flutter 不会在每次重建您的小部件时重建 sizedBox 小部件

希望对您有所帮助 =D

【讨论】：

嗨，我们如何防止列溢出？我已按照您的回答进行操作，但是当我的文本足够长以致溢出时，会出现边缘情况。

你试过用expaned 小部件包装你的文本吗？

不幸的是，问题不在于文本。它是关于一个列中的孩子会打破列的。但我通过用expanded Widget 包装SingleChildScrollView 找到了解决方案。感谢您的回复。

【参考方案2】：

通常您应该使用ListView，这应该可以解决键盘隐藏表单字段的问题。

关于SizedBox和你的widget的分布问题，那是因为通常当你创建一个列时，它会使用父级的整个高度，但在SingleChildScrollView的情况下，它不会有一个尺寸给你，因此专栏不知道如何分配你的孩子。

最后，我看到很多开发人员使用SizedBox 来创建间距，所以我认为使用它没有什么问题。您还可以创建一个ListView.separated (official docs)，它将添加一个相同的小部件（您提供的）作为分隔符。