dart 设置行抖动中元素之间的间距

yzuktlbb  于 2023-04-27  发布在  其他
关注(0)|答案(9)|浏览(179)

验证码:

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元素并排在屏幕宽度的中心之间没有空间?

2ic8powd

2ic8powd1#

有很多方法可以做到这一点,我在这里列出几个:
1.如果要设置特定空间,请使用**SizedBox**

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

1.如果希望两者尽可能远离,请使用**Spacer**。

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

1.**mainAxisAlignment**根据您的需要使用:

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

1.使用**Wrap代替Row并给予一些spacing**

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

1.使用**Wrap而不是Row,并给予它对齐**

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

sh7euo9m

sh7euo9m2#

主轴对齐
start-将子对象尽可能靠近主轴的起点放置。

end-将子对象尽可能靠近主轴的末端放置。

center-将子对象尽可能靠近主轴的中间放置。

spaceBetween-在子对象之间均匀放置可用空间。

spaceAround-在子元素之间均匀放置可用空间,并在第一个和最后一个子元素之前和之后放置该空间的一半。

spaceEvenly-在子元素之间以及第一个和最后一个子元素之前和之后均匀放置可用空间。

  • 示例:*
child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text('Row1'),
          Text('Row2')
        ],
      )
jrcvhitl

jrcvhitl3#

删除空间-:

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),
                )
              ],
            ),
          ),
uubf1zoe

uubf1zoe4#

如果你只想在一行中的项目之间留一点间距,你可以使用Spacers。下面的例子将两个文本小部件放在一行的中间,它们之间留有一些间距。
Spacer创建了一个可调的空间隔,可用于调整Flex容器中小部件之间的间距,如RowColumn
row中,如果我们想在两个小部件之间放置空间,使其占用所有剩余空间。

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

uz75evzq5#

为了精确的间隔,我使用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'),
        ),
      )
    ],
  ),
yvgpqqbh

yvgpqqbh6#

只需添加“Container(width:5、颜色:颜色。透明)、“元素之间

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,
          )
        ],
      ),
    ),
noj0wjuj

noj0wjuj7#

Row(
 children: <Widget>[
  Flexible(
   child: TextFormField()),
  Container(width: 20, height: 20),
  Flexible(
   child: TextFormField())
 ])

这对我来说是有效的,行内有3个小部件:柔性,容器,柔性

7cjasjjr

7cjasjjr8#

我相信最初的帖子是关于 * 删除 * 一排按钮之间的空间,而不是增加空间。
诀窍是按钮之间的最小空间是由于填充内置到按钮作为材料设计规范的一部分。
所以,不要使用按钮!而是一个GestureDetector代替。这种小部件类型给予onClick/onTap功能,但没有样式。
看这篇文章的例子。
https://stackoverflow.com/a/56001817/766115

5us2dqdw

5us2dqdw9#

*这里的另一个 * 自定义方法 ,我们可以使用任何地方的 * 水平 * 和 * 垂直 * 间距

此方法用于自定义水平间距

SizedBox horizontalSpace(space) => SizedBox(width: space);

此方法用于自定义垂直间距

SizedBox verticalSpace(space) => SizedBox(height: space);

相关问题