为什么图标按钮不居中？答案

【问题标题】：Why are Icon-Buttons not centered?为什么图标按钮不居中？
【发布时间】：2019-08-20 16:52:59
【问题描述】：

我正在开发一个 Flutter 应用程序，但我不知道为什么我的图标按钮没有在页面中间居中。我将我的代码包装在 Center()

这是我的页面：

这是我的代码：

import "package:flutter/material.dart";
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class LogInScreen extends StatefulWidget {
  @override
  _LogInScreenState createState() => new _LogInScreenState();
}

class _LogInScreenState extends State<LogInScreen> {
  String _email, _password;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Center(
          child: ListView(
        children: <Widget>[
          Column(children: <Widget>[
            new Container(
              padding: (EdgeInsets.only(top: 50)),
              child: Text(
                "Sign In",
                style: TextStyle(
                  fontSize: 40,
                ),
              ),
            ),
            new Container(
                padding: (EdgeInsets.only(top: 50, left: 35, right: 35)),
                child: Column(children: <Widget>[
                  new Form(
                      child: new Column(children: <Widget>[
                    Padding(
                      padding: EdgeInsets.only(top: 20),
                      child: new RaisedButton(
                        onPressed: () {},
                        color: Colors.blue,
                        textColor: Colors.white,
                        child: const Text('Login'),
                      ),
                    ),
                  ])),
                ])),
            new Container(
              padding: EdgeInsets.only(top: 40),
              child: Column(
                children: <Widget>[
                  new Text("Or login with"),
                ],
              ),
            ),
          ]),
          new Center(
              child: new Row(
            children: <Widget>[
              new IconButton(
                icon: Icon(FontAwesomeIcons.facebookF),
                color: Colors.blue,
              ),
              new IconButton(
                icon: Icon(FontAwesomeIcons.google),
                color: Colors.blue,
              ),
            ],
          )),
        ],
      )),
    );
  }
}

我删除了文本字段，以便代码适合。我希望你可以帮助我，感谢您的帮助！

【问题讨论】：

标签： user-interface flutter

【解决方案1】：

将 IconButton 的填充设置为 0，如下所示：

IconButton(
  padding: EdgeInsets.zero,
  ...
)

【讨论】：

您的回答没有为问题或其他答案提供任何有用的上下文。请考虑添加更多上下文或重新表述您的答案。
其实他的回答很准确。通过抑制 IconButton 的填充，图标看起来像在父区域的中心。
图标按钮上的默认填充使用 EdgeInsets.all()，因此它已经居中。这在大多数情况下都无济于事。

【解决方案2】：

列出的解决方案都不起作用。对我来说唯一的解决方案是将 IconButton 放在 SizedBox 中。

SizedBox(
    width: double.infinity,
    child: IconButton(
    icon: FaIcon(FontAwesomeIcons.moneyBillWave),
    iconSize: 80,    
    onPressed: () {},
   ),
  ),

【讨论】：

Icon() 和 FontAwesome 也有同样的问题，这个解决方案帮助了我。
完美！非常感谢。

【解决方案3】：

基本上Center() 小部件仅将行本身居中，而不是行内的小部件。要对齐行中的子级，请使用 mainAxisAlignment: MainAxisAlignment.center 进行水平对齐，使用 crossAxisAlignment: CrossAxisAlignment.center 进行垂直对齐，请参阅更多 here

所以对于您的代码，它将是：

`  new Center(
          child: new Row(
        mainAxisAlignment: MainAxisAlignment.center
        children: <Widget>[
          new IconButton(
            icon: Icon(FontAwesomeIcons.facebookF),
            color: Colors.blue,
          ),
          new IconButton(
            icon: Icon(FontAwesomeIcons.google),
            color: Colors.blue,
          ),
        ],
      )),`

【讨论】：

这不起作用。在 IconButton 中使用 FontAwesomeIcons 时会出现一些问题。如果它只是 Icon()，它们会居中。解决方案是在 IconButton 中包含填充：EdgeInsets.all(0)。
正如@chitgoks 所说。结合 Icons() 和 FontAwesomeIcons 时，某些手机会将图标呈现为与一侧对齐。 Padding:EdgeInsets.all(x.0) 其中 x.0 不等于 0.0 也无济于事。将所有的填充设置为 0.0 即可解决问题。
没有一个解决方案对我有用，所以我只使用了Icon 而不是IconButton 并且它居中。像这样：Icon(Icons.keyboard_arrow_down, color: AppColors.OtpColor,)

【解决方案4】：

一些变化：

将shrinkWrap true 添加到您的ListView
```
ListView(
  shrinkWrap: true,
  ...
```

将mainAxisAlignment MainAxisAlignment.center 添加到您的Row

new Center(
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new IconButton( 
              ...

【讨论】：