列的 MainAxisAlignment 在 SingleChildScollView 内不起作用

Question

我在 Scaffold 中有一个简单的表单。 LoginPage 小部件是应用脚手架的直接子代：

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
  final _formKey = GlobalKey<FormState>();
  final _userCtl = TextEditingController();
  final _passCtl = TextEditingController();
  @override
  Widget build(BuildContext context) {
    var h = MediaQuery.of(context).size.height;
    var w = MediaQuery.of(context).size.width;

    return Column(
      children: [
        Expanded(
          flex: 1,
          child: Container(),
        ),
        Expanded(
          flex: 2,
          child: Container(
            padding: const EdgeInsets.all(15),
            decoration: BoxDecoration(
                border: Border.all(width: 1, color: Colors.grey),
                borderRadius: const BorderRadius.all(Radius.circular(30))),
            width: w > breakPoint800 ? 0.5 * w : w,
            height: 0.5 * h,
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Form(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      children: [
                        const Text('Login',
                            style: TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 24)),
                        UsernameInput(_userCtl), // TextFormField 
                        PasswordInput(_passCtl), // Row of TextFormField and IconButton
                      ],
                    ),
                    ElevatedButton(
                      autofocus: true,
                      onPressed: () {
                        // Some logic here
                        }
                      },
                      child: const Text('Submit'),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(),
        )
      ],
    );
  }
}

我将 Column 包装在 SingleChildScrollView 中的原因是使其可滚动并消除窄屏幕高度下的 RenderBox 错误。

滚动问题现已解决，但mainAxisAlignment: MainAxisAlignment.spaceBetween 不起作用。即所有列的孩子都粘在一起。似乎 SingleChildScrollView 没有占用其父级的可用空间。当我删除 SingleChildScrollView 时，布局会正常，但会出现 out of RenderBox 错误。

我应该如何解决这个问题？

Answer 1

试试下面的代码希望它对你有帮助。使用 CustomScrollView 而不是 SingleChildScrollView 只需更改您的文本字段而不是我的文本字段。您还使用了SizedBox(height:20,), 也参考 CustomScrollView here

return Column(
  children: [
    Expanded(
      flex: 1,
      child: Container(),
    ),
    Expanded(
      flex: 2,
      child: Container(
        padding: const EdgeInsets.all(15),
        decoration: BoxDecoration(
            border: Border.all(width: 1, color: Colors.grey),
            borderRadius: const BorderRadius.all(Radius.circular(30))),
        child: CustomScrollView(
          scrollDirection: Axis.vertical,
          slivers: [
            SliverFillRemaining(
              child: Form(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      children: [
                        const Text('Login',
                            style: TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 24)),
                        TextField(),
                        TextField(), // Row of TextFormField and IconButton
                      ],
                    ),
                    ElevatedButton(
                      onPressed: () {},
                      child: Text('Submit'),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(),
    )
  ],
);

您的结果屏幕->