SingleChildScrollView 下的 MainAxisAlignment 不起作用

Question

我开发了一个登录屏幕，当我打开键盘时首先出现渲染 flex 错误，因此我将我的小部件包装在 SingleChildScrollView 中，但是在那之后，列的 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: () {},
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ));
  }
}

Answer 1

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

Answer 2

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

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

Answer 3

你可以试试这个代码块

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)
                  ],
                ),
              ),
            ],
          ),

Answer 4

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

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