Flutter：如何在连续的两个按钮之间添加 space

Question

我连续创建了两个容器并希望它位于屏幕中央，所以我为它使用了填充，但它们彼此靠近，我想在它们之间添加 space。这是输出快照。

代码：

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

Answer 1

在 2 个小部件之间使用 Spacer 或 SizedBox。

其他选项是将 Row 的 mainAxisAlignment 设置为 MainAxisAlignment.spaceBetween。

Answer 2

我开始使用 Gap package 在行或列的小部件之间添加 space。基本上你只需指定 space 应该有多大，所以 8px 的差距就是 Gap(8).

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

语法易于使用，并且有针对特定用例的特殊小部件，例如 MaxGap 或 SliverGap。

Answer 3

为了居中，你可以使用 Center() 小部件而不是填充，为了在两者之间放置 space，你可以为从左边开始的第一个小部件添加边距。代码将是这样的：

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

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

Flutter：如何在连续的两个按钮之间添加 space

Flutter: How to add space between two buttons in a row

containers

space

button

flutter