SingleChildScrollView 下的 MainAxisAlignment 不起作用答案

【问题标题】：MainAxisAlignment under SingleChildScrollView is not workingSingleChildScrollView 下的 MainAxisAlignment 不起作用
【发布时间】：2020-04-29 19:42:50
【问题描述】：

我开发了一个登录屏幕，首先我在打开键盘时收到渲染 flex 错误，因此我将我的小部件包装在 SingleChildScrollView 中，但之后 Column 的 mainAxisAlignment 不起作用但是当我删除 SingleChildScrollView 时一切正常除了渲染 flex 错误。我不知道该怎么做请帮忙。以下是代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class LoginScreenOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
          child: Stack(
            children: [
              Container(
                height: double.infinity,
                width: double.infinity,
                color: Colors.blue,
              ),
              SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      width: double.infinity,
                      child: Padding(
                        padding: const EdgeInsets.only(top: 70, left: 20),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Icon(
                              Icons.keyboard_arrow_up,
                              size: 30,
                              color: Colors.white,
                            ),
                            Text(
                              "Login Screen",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 24,
                                  fontWeight: FontWeight.bold),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Container(
                      width: double.infinity,
                      height: MediaQuery.of(context).size.height * 0.6,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(30),
                          topRight: Radius.circular(30),
                        ),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(top: 50, left: 20),
                            child: Text(
                              "Welcome",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 20),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: TextField(
                              decoration: InputDecoration(
                                  icon: Icon(Icons.email),
                                  hintText: "Enter User Name"),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: TextField(
                              obscureText: true,
                              decoration: InputDecoration(
                                  icon: Icon(Icons.vpn_key),
                                  hintText: "Enter Password"),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: Container(
                              width: double.infinity,
                              height: 50,
                              child: FlatButton(
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(15),
                                    side: BorderSide(width: 2, color: Colors.blue)),
                                textColor: Colors.blue,
                                child: Text(
                                  "Sign In",
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold, fontSize: 16),
                                ),
                                onPressed: () {},
                              ),
                            ),
                          ),
                          Center(
                            child: Text(
                              "Forgot Password",
                              style: TextStyle(color: Colors.grey),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: Container(
                              width: double.infinity,
                              height: 50,
                              child: FlatButton(
                                textColor: Colors.white,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(15)
                                ),
                                child: Text("Create Account"),
                                color: Colors.blue,
                                onPressed: () {},
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ));
  }
}

【问题讨论】：

你得到“render flex error”的原因是因为`height: MediaQuery.of(context).size.height * 0.6`。您将它与太小的 double 值相乘。看看这个，stackoverflow.com/questions/49704497/…
高度在模拟器上运行良好，但是当我在物理设备上运行时，它给了我渲染 flex 错误
那是因为不同的屏幕设备不同。

标签： flutter dart flutter-layout

【解决方案1】：

你可以试试这个代码块

CustomScrollView(
            scrollDirection: Axis.vertical,
            slivers: [
              SliverFillRemaining(
                hasScrollBody: false,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('test'),
                    for (int i = 0; i < 10; i++) const FlutterLogo(size: 80)
                  ],
                ),
              ),
            ],
          ),

【讨论】：

【解决方案2】：

use Column in Container and Container in SingleChildScrollView, give 
height: MediaQuery.of(context).size.height to Continer ;
SingleChildScrollView(
  child : Container(
    height: MediaQuery.of(context).size.height,
    child :Column()
    )
)

【讨论】：

这非常有效。不过，你为什么要从高度中减去 50？
这是我的错，对不起
如果您在 SafeArea 下有 SingleChildScrollView，您应该从高度进行顶部和底部填充。 "高度：MediaQuery.of(context).size.height-MediaQuery.of(context).padding.top-MediaQuery.of(context).padding.bottom"

【解决方案3】：

设置外层容器的对齐方式，然后用 singleChildScrollView 包裹列。

Container(
  alignment: Alignment.center, //Set container alignment  then wrap the column with singleChildScrollView
  child: SingleChildScrollView(
     child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: []
),
);

【讨论】：

【解决方案4】：

用SingleChildScrollView 包裹Column 后用Center 小部件包裹它。

【讨论】：

【解决方案5】：

是的，当您将“Column”包装在“SingleChildScrollView”中时，“Column”的 MainAxisAlignment 属性不起作用。我不知道原因，但就是这样。

当我绝对需要滚动视图时，我使用“SizedBox(height: xx)”在“列”内的小部件之间留出空间，否则我倾向于不使用“SingleChildScrollView”。

【讨论】：

但是当我使用带有硬编码高度的大小框时，它在模拟器上工作正常，但在我的物理设备上它给了我渲染 flex 错误

【解决方案6】：

您可以使用 Container 进行 Column wrap...

完整代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class LoginScreenOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
          child: Stack(
            children: [
              Container(
                height: double.infinity,
                width: double.infinity,
                color: Colors.blue,
              ),
              SingleChildScrollView(
                child: Container(
                  child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      width: double.infinity,
                      child: Padding(
                        padding: const EdgeInsets.only(top: 70, left: 20),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Icon(
                              Icons.keyboard_arrow_up,
                              size: 30,
                              color: Colors.white,
                            ),
                            Text(
                              "Login Screen",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 24,
                                  fontWeight: FontWeight.bold),
                            ),
                          ],
                        ),
                      ),
                    ),
                    ),
                    Container(
                      width: double.infinity,
                      height: MediaQuery.of(context).size.height * 0.6,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(30),
                          topRight: Radius.circular(30),
                        ),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(top: 50, left: 20),
                            child: Text(
                              "Welcome",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 20),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: TextField(
                              decoration: InputDecoration(
                                  icon: Icon(Icons.email),
                                  hintText: "Enter User Name"),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: TextField(
                              obscureText: true,
                              decoration: InputDecoration(
                                  icon: Icon(Icons.vpn_key),
                                  hintText: "Enter Password"),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: Container(
                              width: double.infinity,
                              height: 50,
                              child: FlatButton(
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(15),
                                    side: BorderSide(width: 2, color: Colors.blue)),
                                textColor: Colors.blue,
                                child: Text(
                                  "Sign In",
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold, fontSize: 16),
                                ),
                                onPressed: () {},
                              ),
                            ),
                          ),
                          Center(
                            child: Text(
                              "Forgot Password",
                              style: TextStyle(color: Colors.grey),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: Container(
                              width: double.infinity,
                              height: 50,
                              child: FlatButton(
                                textColor: Colors.white,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(15)
                                ),
                                child: Text("Create Account"),
                                color: Colors.blue,
                                onPressed: () {},
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ));
  }
}

【讨论】：

【解决方案7】：

这会起作用...

设置外层容器的对齐方式为alignment.bottomCenter，然后用singleChildScrollView包裹列。它肯定会奏效。谢谢。

【讨论】：