设置 Row Flutter 元素之间的空间

密码:

new Container(
alignment: FractionalOffset.center,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new FlatButton(
child: new Text('Don\'t have an account?', style: new TextStyle(color: Color(0xFF2E3233))),
),
new FlatButton(
child: new Text('Register.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
onPressed: moveToRegister,
)
],
),
),

这就是结果: https://dartpad.dev/?id=6bbfc6139bdf32aa7b47eebcdf9623ba

如何解决这两个 FlatButton元素并排没有空间之间的屏幕中心宽度？

273662 次浏览
小开
最佳答案

移除空间-:

new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
child: new Text('Don\'t have an account?',
style: new TextStyle(color: Color(0xFF2E3233))),
onTap: () {},
),
GestureDetector(
onTap: (){},
child: new Text(
'Register.',
style: new TextStyle(
color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),
))
],
),

或者

GestureDetector(
onTap: (){},
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text('Don\'t have an account?',
style: new TextStyle(color: Color(0xFF2E3233))),
new Text(
'Register.',
style: new TextStyle(
color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),
)
],
),
),
小开

有很多方法可以做到这一点，我在这里列举一些:

  1. 如果要设置特定的空间，请使用 SizedBox

    Row(
children: <Widget>[
Text("1"),
SizedBox(width: 50), // give it width
Text("2"),
],
)

    enter image description here

  1. 如果希望两者尽可能相距较远，则使用 Spacer。

    Row(
children: <Widget>[
Text("1"),
Spacer(), // use Spacer
Text("2"),
],
)

    enter image description here

  1. 根据你的需要使用 mainAxisAlignment:

    Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // use whichever suits your need
children: <Widget>[
Text("1"),
Text("2"),
],
)

    enter image description here

  1. 使用 ABC0而不是 Row并给出一些 spacing

    Wrap(
spacing: 100, // set spacing here
children: <Widget>[
Text("1"),
Text("2"),
],
)

    enter image description here

  1. 使用 ABC0而不是 Row并给它 < strong > 对齐

    Wrap(
alignment: WrapAlignment.spaceAround, // set your alignment
children: <Widget>[
Text("1"),
Text("2"),
],
)

    enter image description here

小开

主轴对准

Start -将子元素尽可能靠近主轴的起始位置。

enter image description here

End -将子元素尽可能靠近主轴的末端。

enter image description here

中心 -将孩子们尽可能靠近主轴的中间位置。

enter image description here

间距 -在孩子们之间均匀地放置自由空间。

enter image description here

把自由空间均匀地放在孩子们之间，以及第一个和最后一个孩子之前和之后的一半空间。

enter image description here

在孩子之间以及第一个和最后一个孩子之前和之后均匀地放置自由空间。

enter image description here

例如:

  child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Row1'),
Text('Row2')
],
)
小开

如果您想要的只是一行中项之间的一点间距，那么您可以使用 Spacers。下面的示例将2个文本小部件集中在一行中，并在它们之间保持一定的间距。

Spacer 创建一个可调节的空间隔，可用于调整 Flex容器(如 Row或 Column)中小部件之间的间距。

在 row中，如果我们想在两个小部件之间放置空间，以便它占用所有剩余的空间。

    widget = Row (
children: <Widget>[
Spacer(flex: 20),
Text(
"Item #1",
),
Spacer(),  // Defaults to flex: 1
Text(
"Item #2",
),
Spacer(flex: 20),
]
);
小开

我相信原帖是关于 移除的按钮之间的空间排列，没有增加空间。

技巧在于，按钮之间的最小间距是由于作为材料设计规格的一部分，按钮内置了填充物。

所以，不要用按钮！而是一个手势探测器。这种小部件类型提供了 onClick/onTap功能，但是没有样式。

请看这篇文章中的例子。

Https://stackoverflow.com/a/56001817/766115

小开

为了得到一个精确的间距，我使用了 Padding。一个有两张图片的例子:

Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Image.asset('images/user1.png'),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Image.asset('images/user2.png'),
),
)
],
),
小开

只需在元素之间添加“ Container (width: 5，color: Colors.arency)”即可

new Container(
alignment: FractionalOffset.center,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new FlatButton(
child: new Text('Don\'t have an account?', style: new TextStyle(color: Color(0xFF2E3233))),
),
Container(width: 5, color: Colors.transparent),
new FlatButton(
child: new Text('Register.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
onPressed: moveToRegister,
)
],
),
),
小开 
Row(
children: <Widget>[
Flexible(
child: TextFormField()),
Container(width: 20, height: 20),
Flexible(
child: TextFormField())
])

这对我很有用，行内有3个小部件: 灵活的，容器，灵活的


提交答案