flutter - 无法在容器中居中列

Question

我一直在尝试这样做一段时间，但我只是不工作。我尝试过使用Center()，即使没有错误也无法正常工作。我也尝试过使用

mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,

对于该列，它仍然没有工作。我以前做过这样的事情，但现在我不确定它是否因为它在一个FractionallySizedBox()，我确实需要它在那里。这是完整的代码：

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Home(),
    ));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Demo Login',
          style: TextStyle(
            color: Colors.black54,
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.blueGrey,
      ),
      body: Align(
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints contraints) {
            return AspectRatio(
              aspectRatio: 1,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  new FractionallySizedBox(
                    widthFactor: 0.7,
                    child: new Stack(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(20),
                          child: Container(
                            decoration: BoxDecoration(
                                border: Border.all(
                              color: Colors.black87,
                              width: 2,
                            )),
                            child: Image.asset(
                              'Assets/6.jpg',
                              color: Color.fromRGBO(255, 255, 255, 0.5),
                              colorBlendMode: BlendMode.modulate,
                            ),
                          ),
                        ),
                        FractionallySizedBox(
                          widthFactor: 0.85,
                          child: Center(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                SizedBox(
                                  height: 50,
                                ),
                                TextField(
                                  autofocus: false,
                                  textAlign: TextAlign.center,
                                  keyboardType: TextInputType.text,
                                  decoration: InputDecoration(
                                      prefixIcon: Icon(Icons.face),
                                      fillColor: Colors.black87,
                                      filled: true,
                                      hintText: "Enter Your Username",
                                      hintStyle: TextStyle(
                                        color: Colors.grey,
                                        fontSize: 15,
                                      ),
                                      border: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(5),
                                      ),
                                      labelText: "Username",
                                      labelStyle: TextStyle(
                                        color: Colors.grey,
                                        fontSize: 15,
                                      )),
                                ),
                                SizedBox(
                                  height: 12,
                                ),
                                TextField(
                                  keyboardType: TextInputType.visiblePassword,
                                  autocorrect: false,
                                  obscureText: true,
                                  textAlign: TextAlign.center,
                                  decoration: InputDecoration(
                                      prefixIcon: Icon(Icons.security),
                                      fillColor: Colors.black87,
                                      filled: true,
                                      hintText: "Enter Your Password",
                                      hintStyle: TextStyle(
                                        color: Colors.grey,
                                        fontSize: 15,
                                      ),
                                      border: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(5),
                                      ),
                                      labelText: "Password",
                                      labelStyle: TextStyle(
                                        color: Colors.grey,
                                        fontSize: 15,
                                      )),
                                ),
                                SizedBox(
                                  height: 20,
                                ),
                                FlatButton(
                                  onPressed: () {},
                                  color: Colors.blueGrey,
                                  height: 40,
                                  minWidth: 150,
                                  child: Text("Login"),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
      backgroundColor: Colors.grey[800],
    );
  }
}

以及在 Linux 设备上构建它的输出：

非常感谢！

标签： flutterflutter-layoutflutter-container

Answer 1

我已经清理了你的代码，我已经在 Android 表上尝试过了，它可以工作

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Home(),
    ));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Demo Login',
          style: TextStyle(
            color: Colors.black54,
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.blueGrey,
      ),
      body: Center(
        child: Stack(
          children: [
            Center(
              child: FractionallySizedBox(
                widthFactor: 0.7,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: Container(
                    decoration: BoxDecoration(
                        border: Border.all(
                      color: Colors.black87,
                      width: 2,
                    )),
                    child: Image.asset(
                      'Assets/6.jpg',
                      color: Color.fromRGBO(255, 255, 255, 0.5),
                      colorBlendMode: BlendMode.modulate,
                    ),
                  ),
                ),
              ),
            ),
            Center(
              child: FractionallySizedBox(
                widthFactor: 0.6,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      height: 50,
                    ),
                    TextField(
                      autofocus: false,
                      textAlign: TextAlign.center,
                      keyboardType: TextInputType.text,
                      decoration: InputDecoration(
                          prefixIcon: Icon(Icons.face),
                          fillColor: Colors.black87,
                          filled: true,
                          hintText: "Enter Your Username",
                          hintStyle: TextStyle(
                            color: Colors.grey,
                            fontSize: 15,
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(5),
                          ),
                          labelText: "Username",
                          labelStyle: TextStyle(
                            color: Colors.grey,
                            fontSize: 15,
                          )),
                    ),
                    SizedBox(
                      height: 12,
                    ),
                    TextField(
                      keyboardType: TextInputType.visiblePassword,
                      autocorrect: false,
                      obscureText: true,
                      textAlign: TextAlign.center,
                      decoration: InputDecoration(
                          prefixIcon: Icon(Icons.security),
                          fillColor: Colors.black87,
                          filled: true,
                          hintText: "Enter Your Password",
                          hintStyle: TextStyle(
                            color: Colors.grey,
                            fontSize: 15,
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(5),
                          ),
                          labelText: "Password",
                          labelStyle: TextStyle(
                            color: Colors.grey,
                            fontSize: 15,
                          )),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    FlatButton(
                      onPressed: () {},
                      color: Colors.blueGrey,
                      height: 40,
                      minWidth: 150,
                      child: Text("Login"),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      backgroundColor: Colors.grey[800],
    );
  }
}