如何在不打乱实际布局顺序的情况下使用 ScrollView？

Question

我正在制作登录屏幕，据我所知，我需要使用 SingleChildScrollView 以防止 'yellow-stripes' 当 TextFields 聚焦时出现问题。

每当我添加 SingleChildScrollView 时，也许我会丢失任何一种小部件对齐方式，因为 MainAxisAlignment 不再工作：

SignleChildScrollView 看起来如何：Screenshot with SingleChildScrollView

应该是这样的：Screenshot without SingleChildScrollView

我什么都试过了，就是想不通。

      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                padding: EdgeInsets.only(bottom: 50),
                child: TypeScript(textTypeScript: tsLogin),
              ),
              Container(
                width: MediaQuery.of(context).size.width / 1.2,
                child: Column(
                  children: [
                    emailField,
                    SizedBox(height: 20),
                    passwordField,
                    Container(
                      height: 80,
                      padding: EdgeInsets.only(top: 10),
                      alignment: Alignment.topRight,
                      //child: passwordRecovery,
                    ),
                    Container(
                      child: loginButton,
                    ),
                    SizedBox(
                      height: 52,
                      width: MediaQuery.of(context).size.height; / 2,
                      child: orStripe,
                    ),
                    Container(
                      padding: EdgeInsets.only(bottom: 10),
                      child: signButton,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

我建议你做两件事：

1 在Line4中，尝试将Column中的mainAxisAlignment.end改为MainAxisAlignment.start

2 我在下面的代码中指出了一个错误。

检查这些并告诉我这是否解决了您的问题？

body: SafeArea(
    child: SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            padding: EdgeInsets.only(bottom: 50),
            child: TypeScript(textTypeScript: tsLogin),
          ),
          Container(
            width: MediaQuery.of(context).size.width / 1.2,
            child: Column(
              children: [
                emailField,
                SizedBox(height: 20),
                passwordField,
                Container(
                  height: 80,
                  padding: EdgeInsets.only(top: 10),
                  alignment: Alignment.topRight,
                  //child: passwordRecovery,
                ),
                Container(
                  child: loginButton,
                ),
                SizedBox(
                  height: 52,
                  width: MediaQuery.of(context).size.height / 2, //ERROR
                  child: orStripe,
                ),
                Container(
                  padding: EdgeInsets.only(bottom: 10),
                  child: signButton,
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ),

Answer 2

尝试用以下内容替换 SingleChildscrollview：

CustomScrollView(
  slivers[
    SliverFillRemaining(
      hasScrollBody: false,
      child: YourChildWidget(),
    ),
  ),
)

如何在不打乱实际布局顺序的情况下使用 ScrollView？

How to use ScrollView without messing the order of the actual layout?

alignment

dart

flutter

singlechildscrollview