时间戳

首页 > 解决方案 > 如何在不弄乱实际布局顺序的情况下使用 ScrollView？

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

问题描述

我正在制作一个登录屏幕，据我所知，我需要使用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,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

标签： flutterdartalignmentsinglechildscrollview

解决方案

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

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

推荐阅读