Flutter:如何在一行中的两个按钮之间添加空格

vvppvyoh  于 2022-11-17  发布在  Flutter
关注(0)|答案(4)|浏览(330)

我创建了两个容器在一行,并希望它在屏幕的中心,所以我用填充,但他们更接近对方,我想增加他们之间的空间。这里是输出的快照。

代码:

Padding(
            padding: EdgeInsets.fromLTRB(40, 250, 30, 0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                new Flexible(
                  flex: 2,
                  child: Container(
                    decoration: BoxDecoration(
                        color: Colors.pink,
                        borderRadius: BorderRadius.all(Radius.circular(3))),
                    height: 50,
                    width: 190,
                      child: Center(
                        child: Column(
                          children: <Widget>[
                            FlatButton(onPressed: (){}, child: Text("in",style:TextStyle(fontSize: 20))),
                          ],
                        ),
                      ),
                    ),
                  ),
                new Flexible(
                  flex: 2,
                  child: Container(
                    decoration: BoxDecoration(
                        color: Color(int.parse(presentcolor)),
                        borderRadius: BorderRadius.all(Radius.circular(3))),
                  height: 50,
                    width: 190,
                      child: Center(
                        child: Column(
                          children: <Widget>[
                             FlatButton(onPressed: (){}, child: Text("out",style:TextStyle(fontSize: 20))),
                          ],
                        ),
                      ),
                    ),
                  ),
xqkwcwgp

xqkwcwgp1#

在两个小工具之间使用SpacerSizedBox
另一个选项是将RowmainAxisAlignment设置为MainAxisAlignment.spaceBetween

bgibtngc

bgibtngc2#

我开始使用Gap package在行或列的小部件之间添加空格,基本上你只需要指定空格应该有多大,所以一个8px的空格就是Gap(8)。

Row(
  children: [
    widget1(),
    Gap(8),
    widget2(),
  ]);

语法很容易使用,并且有一些特殊的小部件,如MaxGap或SliverGap,用于特定的用例。

3bygqnnd

3bygqnnd3#

如果要将其居中,可以使用Center()小部件而不是填充,如果要在两者之间留出空间,可以为左起第一个添加边距。代码如下所示:

Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                new Flexible(
                  flex: 2,
                  child: Container(
                    margin: EdgeInsets.only(right: 20),
                    decoration: BoxDecoration(
                        color: Colors.pink,
                        borderRadius: BorderRadius.all(Radius.circular(3))),
                    height: 50,
                    width: 190,
                      child: Center(
                        child: Column(
                          children: <Widget>[
                            FlatButton(onPressed: (){}, child: Text("in",style:TextStyle(fontSize: 20))),
                          ],
                        ),
                      ),
                    ),
                  ),
                new Flexible(
                  flex: 2,
                  child: Container(
                    decoration: BoxDecoration(
                        color: Color(int.parse(presentcolor)),
                        borderRadius: BorderRadius.all(Radius.circular(3))),
                  height: 50,
                    width: 190,
                      child: Center(
                        child: Column(
                          children: <Widget>[
                             FlatButton(onPressed: (){}, child: Text("out",style:TextStyle(fontSize: 20))),
                          ],
                        ),
                      ),
                    ),
                  ),

您可以将右边距更改为适合您的值。

ix0qys7i

ix0qys7i4#

这是添加包含***4个空格***或***任意多个空格*“文本”**的最简单方法:

Row(
  children: [
    Flexible(),
    Text("    "),
    Flexible(),
  ]);

相关问题