如何在 Flutter 的屏幕中心对齐列表视图中的所有小部件？

Question

在同一个主体中，我试图将我的所有小部件对齐到 loginpage.dart 文件的屏幕中心。但我得到的结果是一切都在顶部。我是flutter的初学者，很多东西都不懂。你能帮我处理一下代码，让我在 Listview 中的所有小部件都在中心吗？

我的代码


 // ignore_for_file: prefer_const_constructors
    import 'package:flutter/material.dart';
    
    class LoginPage extends StatefulWidget {
      @override
      State<StatefulWidget> createState() => _State();
    }
    
    class _State extends State<LoginPage> {
      TextEditingController nameController = TextEditingController();
      TextEditingController passwordController = TextEditingController();
    
      @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Scaffold(
            body: Center(
              child: new ListView(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
                    child: Text(
                      'ABC',
                      style: TextStyle(
                          color: Colors.red,
                          fontWeight: FontWeight.w500,
                          fontSize: 30),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
                    child: TextField(
                      controller: nameController,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'User Name',
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
                    child: TextField(
                      obscureText: true,
                      controller: passwordController,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Password',
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 8.0,
                    height: 8.0,
                    child: Card(child: Text('sheraspace')),
                  ),
                  Container(
                      height: 50,
                      padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                      child: ElevatedButton(
                        child: Text('Submit'),
                        onPressed: () {
                          print(nameController.text);
                          print(passwordController.text);
                        },
                      )),
                ],
              ),
            ),
          ),
        );
      }
    }

Answer 1

要垂直居中ListView Widget内的元素，我们可以使用shrinkWrap 属性:

ListView(
  shrinkWrap: true,
  children: [
    ...
  ],
),

如何在 Flutter 的屏幕中心对齐列表视图中的所有小部件？

How do I align all the widgets within list view at the center of the screen in Flutter?

flutter

flutter-layout

flutter-listview

flutter-widget

flutter-android