Flutter技术问题：如何将按钮对齐到Row组件右侧

你的推测没错，问题核心就在Flexible组件和Row的布局逻辑上。Flexible仅让TextField占用可用空间但不会强制填满，再加上Row默认的MainAxisAlignment.start布局方式，导致右侧按钮组无法自动靠向边缘。

下面给你两种直接可行的修复方案：

方案一：拆分布局 + 用Expanded替代Flexible #

把左侧序号+TextField、右侧按钮组分别打包成两个子Row，外层Row设置MainAxisAlignment.spaceBetween，同时将TextField的Flexible换成Expanded——Expanded会强制填满左右模块间的所有剩余空间，按钮组自然就会对齐到右侧：

Widget buildParty() {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
    child: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(5)),
        border: Border.all(width: 0.7, color: Colors.black38),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          // 左侧模块：序号 + 输入框
          Row(
            children: [
              Container(
                alignment: Alignment.center,
                width: 30,
                height: 60,
                child: Text('$_prtnum'),
              ),
              Expanded(
                child: TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Participant')
                ),
              ),
            ],
          ),
          // 右侧模块：加减按钮 + 数字显示
          Row(
            children: [
              ElevatedButton(onPressed: () {
                setState(() {
                  if (_prtadd > 1)
                    --_prtadd;
                });
              }, child: Text('-', style: TextStyle(color: Colors.white),), style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.zero
                  ),
                  alignment: Alignment.center,
                  backgroundColor: Colors.green[700],
                  minimumSize: Size(34, 10),
                  padding: EdgeInsets.symmetric(vertical: 22, horizontal: 5)
              ),),
              Container(
                alignment: Alignment.center,
                width: 35,
                child: Text('$_prtadd'),
              ),
              ElevatedButton(onPressed: () {
                setState(() {
                  if (_prtadd < 8)
                    ++_prtadd;
                });
              }, child: Text('+', style: TextStyle(color: Colors.white),), style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.only(topRight: Radius.circular(5), bottomRight: Radius.circular(5.0))
                  ),
                  alignment: Alignment.center,
                  backgroundColor: Colors.green[700],
                  minimumSize: Size(34, 10),
                  padding: EdgeInsets.symmetric(vertical: 22, horizontal: 5)
              ),)
            ],
          )
        ],
      ),
    ),
  );
}

方案二：添加Spacer组件挤开按钮组 #

如果不想调整整体布局结构，直接在TextField和减按钮之间插入Spacer组件即可——Spacer会自动填满中间的剩余空间，把右侧按钮组直接挤到最右边：

Widget buildParty() {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
    child: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(5)),
        border: Border.all(width: 0.7, color: Colors.black38),
      ),
      child: Row(
        children: [
          Container(
            alignment: Alignment.center,
            width: 30,
            height: 60,
            child: Text('$_prtnum'),
          ),
          Flexible(
            child: TextField(
                decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: 'Participant')
            ),
          ),
          Spacer(), // 插入这个组件即可
          ElevatedButton(onPressed: () {
            setState(() {
              if (_prtadd > 1)
                --_prtadd;
            });
          }, child: Text('-', style: TextStyle(color: Colors.white),), style: ElevatedButton.styleFrom(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.zero
              ),
              alignment: Alignment.center,
              backgroundColor: Colors.green[700],
              minimumSize: Size(34, 10),
              padding: EdgeInsets.symmetric(vertical: 22, horizontal: 5)
          ),),
          Container(
            alignment: Alignment.center,
            width: 35,
            child: Text('$_prtadd'),
          ),
          ElevatedButton(onPressed: () {
            setState(() {
              if (_prtadd < 8)
                ++_prtadd;
            });
          }, child: Text('+', style: TextStyle(color: Colors.white),), style: ElevatedButton.styleFrom(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(topRight: Radius.circular(5), bottomRight: Radius.circular(5.0))
              ),
              alignment: Alignment.center,
              backgroundColor: Colors.green[700],
              minimumSize: Size(34, 10),
              padding: EdgeInsets.symmetric(vertical: 22, horizontal: 5)
          ),)
        ],
      ),
    ),
  );
}

两种方案都能解决你的问题，方案一布局逻辑更清晰，方案二更适合快速修改现有代码。

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