对齐或定位问题 Flutter 小部件

Question

我希望连接到 Scaffold 主体的 Container 占据其子项的空间，在本例中为 Padding 小部件。

    return Scaffold(
      backgroundColor: Colors.lightBlue,
      appBar: AppBar(
        // backgroundColor: AppColors.grey,
        elevation: 0.0,
        backgroundColor: Colors.transparent,
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back,
            color: Colors.black,
          ),
          onPressed: () => Navigator.pushReplacementNamed(context, '/'),
        ),
      ),
      body: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(30.0),
            topRight: Radius.circular(30.0),
          ),
          boxShadow: kBoxShadow,
        ),
        child: Padding(
          padding: EdgeInsets.all(kSpacingUnit * 3.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              EmailSignInForm(),
              SizedBox(height: kSpacingUnit * 4.0),
              SocialMediaLoginWidget(),
            ],
          ),
        ),
      ),
    );

下面是上面代码的截图：

但我也希望将填充小部件推到屏幕底部。 为此，我将 Padding 小部件与 Expanded 小部件包装在一起，然后将 Expanded 小部件与 Column 小部件包装在一起，如下所示：

    return Scaffold(
      backgroundColor: Colors.lightBlue,
      appBar: AppBar(
        // backgroundColor: AppColors.grey,
        elevation: 0.0,
        backgroundColor: Colors.transparent,
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back,
            color: Colors.black,
          ),
          onPressed: () => Navigator.pushReplacementNamed(context, '/'),
        ),
      ),
      body: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(30.0),
            topRight: Radius.circular(30.0),
          ),
          boxShadow: kBoxShadow,
        ),
        child: Column(
          children: [
            Expanded(
              child: Padding(
                padding: EdgeInsets.all(kSpacingUnit * 3.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    EmailSignInForm(),
                    SizedBox(height: kSpacingUnit * 4.0),
                    SocialMediaLoginWidget(),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );

现在 Padding 小部件的内容已被推到屏幕底部，但 Expanded 小部件试图占据所有可用空间。 我不希望这发生。

我不想增加 Padding 小部件的高度。 下面是更新代码后的截图：

另一个与我有关的问题是，我应该在哪里添加 SingleChildScrollView，因为当用户点击 TextFormFields 输入 email 和密码时，我会遇到“底部溢出 -- px”错误。

之前我也提过这个问题，但是运气不太好，所以thought会把代码整理一下，详细解释一下，方便其他人理解和帮助。

非常感谢您的提前帮助。

应用@SoundConception 建议的解决方案后

Answer 1

尝试将其添加到您的 Column 小部件中：

crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,

Answer 2

在您的第一个代码示例中，您有：

      ...
      body: Container(
        ...
        child: Padding(
          padding: EdgeInsets.all(kSpacingUnit * 3.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              ...
            ],
          ),
        ),
      ),

mainAxisSize: MainAxisSize.min指定Column的高度应尽可能小，有效地将其收缩包裹到其子项的高度。

Padding只是在Column小部件周围添加指定的填充 dp。

这意味着Container的子项具有固定高度，等于Column项高度加上顶部和底部填充的(kSpacingUnit * 3.0) dp 的总和。 由于Container子级的高度是固定的，因此Container会根据其子级的高度调整自身的大小。

在您的第二个代码示例中，您有：

      body: Container(
        ...
        child: Column(
          children: [
            Expanded(
              child: Padding(
                padding: EdgeInsets.all(kSpacingUnit * 3.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    ...
                  ],
                ),
              ),
            ),
          ],
        ),
      ),

这里最外层的Column有一个Expanded的孩子，这意味着它将占用Column中的所有可用空间。 最里面的Column有mainAxisAlignment: MainAxisAlignment.end意味着它的孩子将对齐到Column的底部。 Padding的高度没有扩展。

您询问有关使用SingleChildScrollView的问题。 我假设您希望白色背景装饰保持静止，并且只有Column的内容应该能够滚动。 尝试以下操作：

    return Scaffold(
      ...
      body: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(30.0),
            topRight: Radius.circular(30.0),
          ),
          boxShadow: kBoxShadow,
        ),
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(kSpacingUnit * 3.0),
            child: Column(
              children: <Widget>[
                EmailSignInForm(),
                SizedBox(height: kSpacingUnit * 4.0),
                SocialMediaLoginWidget(),
              ],
            ),
          ),
        ),
      ),
    );

注意：您需要确保您的EmailSignInForm()和SocialMediaLoginWidget()没有未绑定的高度。

我的猜测是您的EmailSignInForm()可能使用了Column 。 如果是这样，将其mainAxisSize设置为min 。