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

Question

我正在制作一个登录屏幕，据我所知，我需要使用SingleChildScrollView以防止在 TextFields 聚焦时出现“黄色条纹”问题。

每当我添加SingleChildScrollView时，也许我会丢失任何类型的小部件对齐，因为 MainAxisAlignment 不再起作用：

SignleChildScrollView的外观如何：SingleChildScrollView 的屏幕截图

它应该是什么样子：没有 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

尝试将 SingleChildscrollview 替换为以下内容：

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

Answer 2

我会向你建议两件事：

1 In Line4，尝试将mainAxisAlignment.endinside更改Column为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,
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ),