Flutter中实现两个GestureDetector组件同行左右分布的解决方案

嘿，这问题我太熟了，马上帮你搞定！你现在用Column包裹两个手势检测器，而Column是垂直排列子组件的，所以它们自然会分成两行显示。要实现同一行一个居左、一个居右，只需要把Column换成Row，再调整下主轴对齐方式就行啦。

核心修改思路： #

• 把外层的Column替换为Row（Row是专门做水平布局的组件）
• 给Row设置mainAxisAlignment: MainAxisAlignment.spaceBetween，这个属性会让子组件自动靠向行的两端，中间空隙自动填充
• 删掉第一个GestureDetector里硬编码的右侧内边距（EdgeInsets.only(right: size.getWidthPx(180))），这个固定间距会破坏自适应布局
• 可以直接去掉Align组件，因为Row的对齐设置已经能满足需求，代码更简洁

修改后的完整代码： #

loginFields1() => Container(
  child: Form(
    child: Row( // 替换原来的Column为Row
      mainAxisAlignment: MainAxisAlignment.spaceBetween, // 关键：设置两端对齐
      mainAxisSize: MainAxisSize.max, // 让Row占满父容器宽度
      children: <Widget>[
        GestureDetector(
          onTap: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) => LoginPage2()));
          },
          child: Text(
            "Validate Certificate", 
            style: TextStyle(
              fontFamily: 'Exo2',
              fontSize: 14.0, 
              fontWeight: FontWeight.bold, 
              color: colorCurve2
            )
          ),
        ),
        GestureDetector(
          onTap: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) => LoginPage3()));
          },
          child: Text(
            "Reset Password", 
            style: TextStyle(
              fontFamily: 'Exo2',
              fontSize: 14.0, 
              fontWeight: FontWeight.bold, 
              color: colorCurve2
            )
          ),
        ),
      ],
    )),
);

如果需要给这一行加上下内边距，直接在Row外面套个Padding组件就行，布局会更灵活。另外mainAxisSize: MainAxisSize.max能确保Row占满父容器的宽度，让spaceBetween的两端对齐效果完全体现出来。

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