Flutter如何实现保龄球瓶排列的悬浮按钮金字塔并修复布局偏移

• 间距错乱问题：你当前用Visibility默认配置隐藏按钮时，被隐藏的组件会完全从布局树中移除，不再占用原有空间，Row的spaceEvenly/spaceBetween会基于剩余可见元素重新计算间距，自然会出现错乱。
• 第三行布局错位问题：你给不同行设置了不同的主轴对齐规则，第一行用spaceBetween，其余行用spaceEvenly，不同对齐规则的元素排布逻辑不同，自然无法对齐成标准保龄球瓶金字塔结构。

方案1：保留隐藏按钮需求的最小修改 #

步骤1：修改Visibility配置，保留隐藏元素的占位空间 #

给Visibility添加三个属性，让按钮隐藏后依然占用原有尺寸，不会触发布局重排：

_new_button(int index){
    return Visibility(
      visible: _enable[index],
      maintainSize: true,
      maintainAnimation: true,
      maintainState: true,
      child: FloatingActionButton (
        onPressed: () => _edit_pin(index),
        heroTag: 'pin' + index.toString(),
        tooltip: index.toString(),
        child: Icon(Icons.circle, color: _pins_colors[index]),
      )
    );
  }

步骤2：统一所有行的对齐规则 #

给所有行套相同宽度的SizedBox，统一使用spaceEvenly对齐，保证每行的排布基准一致：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Enter Pins'),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          // 宽度可根据设备尺寸适配，比如用MediaQuery取屏幕宽度的90%
          SizedBox(
            width: MediaQuery.of(context).size.width * 0.9,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
              children: [_new_button(6),_new_button(7),_new_button(8),_new_button(9)]
            ),
          ),
          SizedBox(
            width: MediaQuery.of(context).size.width * 0.9,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
              children: [_new_button(3),_new_button(4),_new_button(5)]
            ),
          ),
          SizedBox(
            width: MediaQuery.of(context).size.width * 0.9,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
              children: [_new_button(1),_new_button(2)]
            ),
          ),
          SizedBox(
            width: MediaQuery.of(context).size.width * 0.9,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
              children: [_new_button(0)]
            ),
          ),
        ],
      ),
    ),
    // 原floatingActionButton代码不变
    floatingActionButton: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
      children: [
        Align(
          alignment: Alignment.bottomLeft,
          child: FloatingActionButton.extended(
            onPressed: () => _submit_turn(context),
            heroTag: 'btn1',
            label: const Text('Submit'),
            tooltip: 'Submit Pins',
          ),
        ),
        Align(
          alignment: Alignment.bottomLeft,
          child: FloatingActionButton(
            onPressed: () => Navigator.pop(context),
            heroTag: 'btn2',
            tooltip: 'Cancel Game',
            child: const Icon(Icons.delete, color: Colors.red),
          ),
        )
      ]
    )
  );
}

方案2：更优交互方案（推荐） #

保龄球瓶被击倒后不需要完全隐藏，修改样式即可，既符合用户直觉，也完全避免布局问题：

_new_button(int index){
  return FloatingActionButton (
    onPressed: () => _edit_pin(index),
    heroTag: 'pin' + index.toString(),
    tooltip: index.toString(),
    // 被击倒的按钮改成灰色半透明样式
    backgroundColor: _enable[index] ? Theme.of(context).primaryColor : Colors.grey.withOpacity(0.2),
    child: Icon(
      Icons.circle, 
      // 被击倒的图标改成灰色，也可以换成其他表示击倒的图标
      color: _enable[index] ? _pins_colors[index] : Colors.grey,
    ),
  );
}

该方案不需要修改Visibility，也不用处理占位问题，交互体验更好。

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