Flutter技术问题：如何在Row组件中为两个容器按钮添加间距并实现屏幕居中

嘿，我看你遇到了Row里两个容器间距太近的问题！虽然你已经设置了MainAxisAlignment.spaceEvenly，但因为Flexible和固定width的组合，导致这个布局属性没发挥出预期的效果。下面给你几个简单好用的解决办法：

方法1：直接在组件间插个SizedBox #

这是最直观的方式，在两个Flexible组件中间加一个SizedBox，指定宽度就能精准控制间距：

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))),
              ],
            ),
          ),
        ),
      ),
      // 这里加个固定宽度的SizedBox，数值可以按需调整
      SizedBox(width: 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))),
              ],
            ),
          ),
        ),
      ),
    ],
  ),
)

方法2：给容器套一层Padding #

如果想让容器本身周围都有缓冲空间，可以给每个Container单独加Padding，左右分开控制间距：

Padding(
  padding: EdgeInsets.fromLTRB(40, 250, 30, 0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      new Flexible(
        flex: 2,
        child: Padding(
          // 给左边容器加右边距
          padding: EdgeInsets.only(right: 10), 
          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: Padding(
          // 给右边容器加左边距
          padding: EdgeInsets.only(left: 10), 
          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))),
                ],
              ),
            ),
          ),
        ),
      ),
    ],
  ),
)

方法3：去掉容器固定宽度，让弹性布局生效 #

你给Container设置了固定width:190，这直接让Flexible的弹性特性和MainAxisAlignment.spaceEvenly失效了——毕竟容器已经占了固定宽度，Row没法再分配空间了。如果不需要固定宽度，去掉这个属性，Row就会自动给两个容器分配均匀的空间和间距：

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属性
          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属性
          child: Center(
            child: Column(
              children: <Widget>[
                FlatButton(onPressed: (){}, child: Text("out",style:TextStyle(fontSize: 20))),
              ],
            ),
          ),
        ),
      ),
    ],
  ),
)

小建议 #

如果你的布局需要适配不同屏幕尺寸，优先选方法1或方法3，这样布局会更灵活；方法2适合需要精准控制单个容器边距的场景，按需选就行～

内容的提问来源于stack exchange，提问作者TimeToCode