After wrapping my Column widget with SingleChildScrollView widget, my screen got cut like this: enter image description here

我找不到填充最大高度或作为SingleChildScrolledView参数的东西.添加SingleChild的原因是,当我打开TextField小部件并弹出键盘时,最后一个TextField说它"溢出",作为一种解决方案,我发现应该添加TextField.提前感谢:)

class _RegisterScreenState extends State<RegisterScreen> {

  // TextFields controllers
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _confirmPasswordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.fromLTRB(36, 0, 36, 0),
        width: double.infinity,
        color: const Color(0xFF26243C),
        child: SingleChildScrollView(
          reverse: true,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              
              const SizedBox(height: 72),
          
              const Text("Get Started",
              textAlign: TextAlign.center,
              style: TextStyle(
                fontFamily: 'Chalet',
                fontSize: 48,
                fontWeight: FontWeight.w100,
                color: Color(0xFFDF862D),
                height: 1.0
              ),),
          
               Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
              const Text('Already have an account?',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Color(0xFFF6F9F8))),
          
                TextButton(
                  onPressed: () {
                    // take you to login page
                    Navigator.push(context, MaterialPageRoute(builder: (context) => const RegisterScreen()));
                  },
                    child: const Text(
                  'Sign In!',
                  style: TextStyle(
                      color: Color(0xFFF6F9F8), fontWeight: FontWeight.bold)
                ))
              ],
            ),
          
            const SizedBox(height: 65),
          
            const Text("Your e-mail",
            style: TextStyle(
              fontSize: 16,
              fontFamily: 'Montserrat',
              fontWeight: FontWeight.bold,
              color: Color(0xFFF6F9F8)
            ),),
          
            const SizedBox(height: 12),
          
            // email textField  
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.85,
              child: TextField(
                controller: _emailController,
                decoration: InputDecoration(
                  filled: true,
                  fillColor: const Color(0xFFF6F9F8),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                    borderSide: BorderSide.none
                  ),
                  hintText: 'Enter your e-mail',
                  hintStyle: const TextStyle(
                    color:Color.fromARGB(255, 174, 173, 173)
                  )
                ),
              ),
            ),
          
            const SizedBox(height: 12),
          
            const Text("Your password",
            style: TextStyle(
              fontSize: 16,
              fontFamily: 'Montserrat',
              fontWeight: FontWeight.bold,
              color: Color(0xFFF6F9F8)
            ),),
          
            const SizedBox(height: 12),
          
            // password textField  
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.85,
              child: TextField(
                controller: _passwordController,
                decoration: InputDecoration(
                  filled: true,
                  fillColor: const Color(0xFFF6F9F8),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                    borderSide: BorderSide.none
                  ),
                  hintText: 'Enter your password',
                  hintStyle: const TextStyle(
                    color:Color.fromARGB(255, 174, 173, 173)
                  )
                ),
              ),
            ),
          
            const SizedBox(height: 12),
          
            const Text("Confirm your password",
            style: TextStyle(
              fontSize: 16,
              fontFamily: 'Montserrat',
              fontWeight: FontWeight.bold,
              color: Color(0xFFF6F9F8)
            ),),
          
            const SizedBox(height: 12),
          
            // confirm password textField  
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.85,
              child: TextField(
                controller: _confirmPasswordController,
                decoration: InputDecoration(
                  filled: true,
                  fillColor: const Color(0xFFF6F9F8),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                    borderSide: BorderSide.none
                  ),
                  hintText: 'Confirm your password',
                  hintStyle: const TextStyle(
                    color:Color.fromARGB(255, 174, 173, 173)
                  )
                ),
              ),
            ),
          
            ],
          ),
        ),
      ),
    );
  }
}

将BoxConstrains.Expand()添加到My Container Constraints后,发生了以下情况:

Scaffold(
  body: Container(
    // ...
    constraints: BoxConstraints.expand(), // Added this
    child: SingleChildScrollView(
      // ...
    ),
  ),
)

enter image description here

推荐答案

包裹SingleChildScrollViewContainer被约束为与其子对象的所需高度相匹配.要使Container及其子对象扩展到Scaffold的主体,请使用constraints: BoxConstraints.expand().

Scaffold(
  body: Container(
    // ...
    constraints: BoxConstraints.expand(), // Add this constraint
    child: SingleChildScrollView(
      // ...
    ),
  ),
)

另请参阅:Understanding constraints


EDIT:你也有reverse: true组,这会颠倒滚动方向,并导致顶部的剩余空间被填满.go 掉那行.

Flutter相关问答推荐

飘动的文本用/字符绕转

使用ThemeProvider不在亮模式和暗模式之间切换

Flutter 布局-全屏幕容器

如何防止onTapCancel由子元素触发?

从外部类动态更改IconButton的图标

在Flutter 中每次点击按钮时都很难调用自定义函数

为什么在setState之后Ffltter Pageview重置为第0页

try 使用fl_Chart of Ffltter,但在导入它时遇到以下错误:Error:';TextScaler';is;t a type

如何在Date Time类中只显示日期?

如果我使用搜索栏,如何在嵌套滚动视图中停止自动滚动?

Flutter类调用另一个类中的另一个方法失败

如何在点击查看措辞下方添加句子?

使用 flutter_svg 在 flutter 中的 Canvas 上绘制 SVG 图像

有没有办法在 google_map 上移动标记(向左或向右移动一些像素)?

如何将取消图标放置在右上角

在 Flutter 中,SpinEdit 叫什么?

flutter 创建一个带有 2 个图标的按钮

如何将金钱格式化为数以百万计的Flutter 动?

避免长单词中断

既然我们已经有了 Flutter 的内置 setState,为什么还要在 Flutter 中使用 BloC 或 Provider?