无法居中列小部件

Posted 2023-02-23

【中文标题】无法居中列小部件

【英文标题】：Cannot Center Column Widget

【发布时间】：2019-05-04 00:51:43

【问题描述】：

我是 Flutter 的新手，我正在尝试将所有小部件置于列小部件的中心，但它不起作用。我尝试将列封装到中心小部件中，但它仍然相同并与屏幕顶部对齐。下面是我的代码，请看一下，让我知道我做错了什么。谢谢:)

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

class SignIn extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Material(
      child: Padding(
        padding: EdgeInsets.all(15.0),
        child: Column(
          children: <Widget>[
            Text(
              'SignIn Screen',
              style: TextStyle(fontSize: 26.0),
            ),
            Padding(
              padding: EdgeInsets.only(top: 30.0),
            ),
            TextField(
              maxLength: 25,
              decoration: InputDecoration(
                hintText: 'Enter username',
              ),
            ),
            TextField(
              maxLength: 25,
              decoration: InputDecoration(
                hintText: 'Enter password',
              ),
            ),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  RaisedButton(
                    child: Text('SignIn'),
                    onPressed: _signIn,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  

  Future _signIn() async 
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setBool('isLoggedIn', true);
  

【参考方案1】：

添加MainAxisAlignment.center 并删除Expanded

class SignIn extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Material(
      child: Padding(
        padding: EdgeInsets.all(15.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Text(
              'SignIn Screen',
              style: TextStyle(fontSize: 26.0),
            ),
            Padding(
              padding: EdgeInsets.only(top: 30.0),
            ),
            TextField(
              maxLength: 25,
              decoration: InputDecoration(
                hintText: 'Enter username',
              ),
            ),
            TextField(
              maxLength: 25,
              decoration: InputDecoration(
                hintText: 'Enter password',
              ),
            ),
            RaisedButton(
                    child: Text('SignIn'),
                    onPressed: _signIn,
                  ),
          ],
        ),
      ),
    );
  

【参考方案2】：

垂直居中

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[ ... ],
)

水平居中

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[ ... ],
)

但如果列包含其内容，则只需将其包装在 Center 小部件中

Center(
  child: Column(
    children: <Widget>[ ... ],
  ),
)

【讨论】：

为什么最后一个代码 sn-p 中需要Center 小部件？在谈到 Flutter 时，我认为自己不仅仅是一个新手，这个非常基本的布局问题仍然让我感到困惑。

@jaredbaszler 如果列宽已经尽可能窄，因为它正在拥抱它的元素，那么尝试在列宽内居中元素将无济于事。 Center 小部件在 Center 小部件的父级中将其子级居中，假设父级大于 Center 的子级。因此，如果 Column 小部件的宽度小于 Center 小部件的父级宽度，则使用 Center 将使 Column 居中，进而将列元素居中。

知道了 - 感谢您的解释。所以我认为您在第 3 次 sn-p 中的评论需要阅读“不拥抱”？

@jaredbaszler，不，我的意思是拥抱。也就是说，列宽与其元素的宽度相同，但与父元素的宽度不同。这是使用Center 的唯一方法。