我正在开发一个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,
),
],
)),
],
)),
);
}
}
我删除了文本字段,这样代码就合适了。我希望你能帮助我,谢谢你的帮助!
6条答案
按热度按时间kxxlusnw1#
将IconButton的padding设置为0,如下所示:
daupos2t2#
列出的解决方案都不起作用。对我来说唯一的解决方案是把IconButton内SizedBox.
v7pvogib3#
有几个变化:
shrinkWrap
true添加到ListView
mainAxisAlignment
www.example.com添加MainAxisAlignment.center到您的Row
kx5bkwkv4#
我同意@chitgoks的评论;用途:
wsxa1bj15#
基本上,
Center()
小部件只居中显示行本身,而不是行内的小部件。要对齐行中的子项,请使用mainAxisAlignment: MainAxisAlignment.center
进行水平对齐,使用crossAxisAlignment: CrossAxisAlignment.center
进行垂直对齐查看更多here因此对于您的代码,它将是:
brc7rcf06#
你不需要
Center
图标,因为问题是Icon
本身。也许图标设计包含填充或边距。我的问题是返回按钮:当我更改为
Icons.arrow_back_ios_new
时,它恢复正常:你需要找到一个没有填充/边距的图标。