我的 SingleChildScrollView 在 Container 上不起作用，这是怎么回事？

Question

试图制作一个带有栏和表单的注册屏幕，但页面因溢出而显示错误。检查了如何解决这个问题，所有消息来源都说我应该将容器封装在 'SingleChildScrollView' 小部件中，但这似乎并不能解决我的问题。

这是我的代码：

class RegisterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // code for the register layout
    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.fromLTRB(47, 106, 47, 0),
          height: MediaQuery.of(context).size.height,
          child: Column(
            children: [
              Row(
                children: [
                Text(
                  'Create account',
                  style: TextStyle(color: Color(0xFFFD007C),
                    fontFamily: 'MontBlanc',
                    fontSize: 28,
                  ),
                ),
                ],
              ),
              SizedBox(height: 19),
              Row(
                children: [
                  Text(
                    'Or sign in with',
                    style: TextStyle(
                      fontFamily: 'TisaSansPro',
                      color: Color(0xFFACACAC),
                    ),
                  ),
                  SizedBox(width: 10),
                  ClipRect(
                    child: Container(
                      height: 20,
                      width: 20,
                      child: Image.asset('assets/icons8-google-48.png'),
                    ),
                  ),
                  SizedBox(width: 10),
                  Icon(
                    Icons.facebook,
                    color: Color(0xFF4267B2),
                  ),
                  SizedBox(width: 10),
                  Icon(
                    Icons.apple,
                    color: Color(0xFF555555),
                  ),
                ],
              ),
              SizedBox(height: 39),
              Form(
                child: Column(
                  children: [
                    TextFormField(
                      decoration: InputDecoration(
                        labelText: 'Email address',
                        floatingLabelBehavior: FloatingLabelBehavior.always,
                        hintText: 'abcdef@gmail.com',
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide(color: Color(0xFFECC2D6)),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide(color: Color(0xFFFD007C)),
                        ),
                      ),
                    ),
                    SizedBox(height: 36),
                    TextFormField(
                      obscureText: true,
                      decoration: InputDecoration(
                        labelText: 'Password',
                        floatingLabelBehavior: FloatingLabelBehavior.always,
                        hintText: 'Input your password',
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide(color: Color(0xFFECC2D6)),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide(color: Color(0xFFFD007C)),
                        ),
                      ),
                    ),
                    SizedBox(height: 82),
                    Container(
                      height: 45,
                      width: MediaQuery.of(context).size.width,
                      child: ElevatedButton(
                        onPressed: () => Navigator.pushNamed(context, route.loginPage),
                        style: ElevatedButton.styleFrom(primary: Color(0xFFFD007C), elevation: 4.0),
                        child: Text(
                          'Register',
                          style: TextStyle(
                            color: Colors.white,
                            fontFamily: 'TisaSansPro',
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

我查看了代码中的任何问题但看不到任何问题，我还尝试使用小部件环绕列。我在另一个页面上制作了一个较短的表格，该表格没有溢出并且有效，但这没有。

Answer 1

只需删除 SingleChildScrollView 中的 Container 小部件，如下所示：

class RegisterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 47),
          child: Column(
            children: [
              Row(
                children: const [
                  Text(
                    'Create account',
                    style: TextStyle(
                      color: Color(0xFFFD007C),
                      fontFamily: 'MontBlanc',
                      fontSize: 28,
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 19),
              Row(
                children: const [
                  Text(
                    'Or sign in with',
                    style: TextStyle(
                      color: Color(0xFFACACAC),
                    ),
                  ),
                  SizedBox(width: 10),
                  Icon(
                    Icons.facebook,
                    color: Color(0xFF4267B2),
                  ),
                  SizedBox(width: 10),
                  Icon(
                    Icons.apple,
                    color: Color(0xFF555555),
                  ),
                ],
              ),
              const SizedBox(height: 39),
              Form(
                child: Column(
                  children: [
                    TextFormField(
                      decoration: InputDecoration(
                        labelText: 'Email address',
                        floatingLabelBehavior: FloatingLabelBehavior.always,
                        hintText: 'abcdef@gmail.com',
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide:
                              const BorderSide(color: Color(0xFFECC2D6)),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide:
                              const BorderSide(color: Color(0xFFFD007C)),
                        ),
                      ),
                    ),
                    const SizedBox(height: 36),
                    TextFormField(
                      obscureText: true,
                      decoration: InputDecoration(
                        labelText: 'Password',
                        floatingLabelBehavior: FloatingLabelBehavior.always,
                        hintText: 'Input your password',
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide:
                              const BorderSide(color: Color(0xFFECC2D6)),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: const BorderSide(
                            color: Color(0xFFFD007C),
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(height: 82),
                    SizedBox(
                      height: 45,
                      width: MediaQuery.of(context).size.width,
                      child: ElevatedButton(
                        onPressed: () =>
                            Navigator.pushNamed(context, 'route.loginPage'),
                        style: ElevatedButton.styleFrom(
                          primary: const Color(0xFFFD007C),
                          elevation: 4.0,
                        ),
                        child: const Text(
                          'Register',
                          style: TextStyle(
                            color: Colors.white,
                            fontFamily: 'TisaSansPro',
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

因此，只要您的屏幕不够大，它就会启用滚动到您的注册屏幕。

Answer 2

您的代码似乎没有问题。也许您的测试设备屏幕不足以显示此处的所有内容。尝试使用更多的屏幕自适应方法。

发生这种情况可能是因为您的某些固定高度数量超出了您 defined.as 关注的 screen.Like 大小的框高度数量

SizedBox(height: 36)

要解决此问题，请尝试删除固定高度 amount.You 可以使用自适应屏幕的媒体查询，或者您可以使用更多屏幕自适应包、小部件。

    @override
  Widget build(BuildContext context) {
    double _height=MediaQuery.of(context).size.height;

定义此变量后，将其用于像这样的固定高度。

SizedBox(height: _height/50),

否则您可以使用填充、扩展小部件。

我的 SingleChildScrollView 在 Container 上不起作用，这是怎么回事？

My SingleChildScrollView does not work on Container what is wrong?

android

ios

flutter

dart

mobile-development