flutter 为什么图标按钮不居中?

gkl3eglg  于 2023-05-29  发布在  Flutter
关注(0)|答案(6)|浏览(303)

我正在开发一个Flutter应用程序,我不明白为什么我的图标按钮不在页面中间。我将代码 Package 在Center()
这是我的页面:
https://imgur.com/a/YlCW3Xu
这是我的代码:

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,
              ),
            ],
          )),
        ],
      )),
    );
  }
}

我删除了文本字段,这样代码就合适了。我希望你能帮助我,谢谢你的帮助!

kxxlusnw

kxxlusnw1#

将IconButton的padding设置为0,如下所示:

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

daupos2t2#

列出的解决方案都不起作用。对我来说唯一的解决方案是把IconButton内SizedBox.

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

v7pvogib3#

有几个变化:

  • shrinkWrap true添加到ListView
ListView(
  shrinkWrap: true,
  ...
  • mainAxisAlignment www.example.com添加MainAxisAlignment.center到您的Row
new Center(
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new IconButton( 
              ...
kx5bkwkv

kx5bkwkv4#

我同意@chitgoks的评论;用途:

padding: EdgeInsets.all(0.0)
wsxa1bj1

wsxa1bj15#

基本上,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,
          ),
        ],
      )),`
brc7rcf0

brc7rcf06#

你不需要Center图标,因为问题是Icon本身。也许图标设计包含填充或边距。我的问题是返回按钮:

Container(
  color: Colors.lightGreen,
  child: Icon(
    Icons.arrow_back_ios,
    color: Colors.black,
    size: 15,
  ),
),

当我更改为Icons.arrow_back_ios_new时,它恢复正常:

Container(
  color: Colors.lightGreen,
  child: Icon(
    Icons.arrow_back_ios_new,
    color: Colors.black,
    size: 15,
  ),
),

你需要找到一个没有填充/边距的图标。

相关问题