Flutter：如何实现两列按钮点击后自动触发按键值对比？

要实现点击两列按钮后对比数值的功能，核心是保存每次点击的按钮值，并在每次点击后检查是否已收集到两列的选中值，再触发对比逻辑。具体步骤如下：

1. 添加状态变量存储选中值 #

在你的State类中定义两个可空整数变量，用来分别保存第一列和第二列的选中值：

int? _selectedFromColumn1;
int? _selectedFromColumn2;

2. 修改按钮点击处理函数 #

原来的_column1和_column2函数仅返回值，没有保存状态的逻辑，需要修改为更新状态并触发检查：

void _column1(int keyColumn1) {
  _selectedFromColumn1 = keyColumn1;
  // 每次点击后检查是否可以对比
  _triggerComparison();
}

void _column2(int keyColumn2) {
  _selectedFromColumn2 = keyColumn2;
  _triggerComparison();
}

3. 编写触发对比的逻辑 #

新增一个函数，判断两列是否都已选中值，若都有值则执行对比，对比完成后可重置选中值以便下次操作：

void _triggerComparison() {
  // 确保两列都已选中值
  if (_selectedFromColumn1 != null && _selectedFromColumn2 != null) {
    _unionKeyFunction(_selectedFromColumn1!, _selectedFromColumn2!);
    // 可选：对比后清空选中值，支持下一轮点击对比
    _selectedFromColumn1 = null;
    _selectedFromColumn2 = null;
  }
}

4. 保留原对比函数 #

你的_unionKeyFunction可以直接沿用，无需修改：

void _unionKeyFunction(int key1ForUnion, int key2ForUnion){
  if( key1ForUnion == key2ForUnion ) {
     print("Equal");
  }
  else {
    print("Not equal");
  }
}

完整示例代码 #

整合后的完整State类示例：

class YourWidget extends StatefulWidget {
  const YourWidget({super.key});

  @override
  State<YourWidget> createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget> {
  int? _selectedFromColumn1;
  int? _selectedFromColumn2;

  void _column1(int keyColumn1) {
    _selectedFromColumn1 = keyColumn1;
    _triggerComparison();
  }

  void _column2(int keyColumn2) {
    _selectedFromColumn2 = keyColumn2;
    _triggerComparison();
  }

  void _triggerComparison() {
    if (_selectedFromColumn1 != null && _selectedFromColumn2 != null) {
      _unionKeyFunction(_selectedFromColumn1!, _selectedFromColumn2!);
      _selectedFromColumn1 = null;
      _selectedFromColumn2 = null;
    }
  }

  void _unionKeyFunction(int key1ForUnion, int key2ForUnion){
    if( key1ForUnion == key2ForUnion ) {
       print("Equal");
    }
    else {
      print("Not equal");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Row( 
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children:[
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () =>_column1(1), 
              child: const Text("1")),
            const SizedBox(height: 40,),
            ElevatedButton(
              onPressed: () =>_column1(2), 
              child: const Text("2")),
          ],
        ),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: ()=>_column2(2), 
              child: const Text("2")),
            const SizedBox(height: 40,),
            ElevatedButton(
              onPressed: ()=>_column2(1), 
              child: const Text("1")),
          ],
        ),
      ]
    );
  }
}

逻辑说明 #

• 每次点击任意一列的按钮，都会先把对应的值存入状态变量，然后检查是否两列都有选中值。
• 当两列都有选中值时，自动触发对比函数，输出结果后重置状态，等待下一轮点击。

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