Flutter中如何实现两个Elevated Button的互斥禁用功能？

直接用StatefulWidget配合状态变量就能实现这个需求，核心逻辑是用两个布尔值分别控制两个按钮的禁用状态，点击其中一个按钮时切换另一个按钮的禁用状态：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('互斥按钮示例')),
        body: const ButtonPair(),
      ),
    );
  }
}

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

  @override
  State<ButtonPair> createState() => _ButtonPairState();
}

class _ButtonPairState extends State<ButtonPair> {
  // 初始状态两个按钮都可用
  bool _isButtonBDisabled = false;
  bool _isButtonADisabled = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          ElevatedButton(
            onPressed: _isButtonADisabled 
                ? null 
                : () {
                    setState(() {
                      // 点击按钮A，禁用按钮B
                      _isButtonBDisabled = true;
                    });
                  },
            child: const Text('按钮A'),
          ),
          ElevatedButton(
            onPressed: _isButtonBDisabled 
                ? null 
                : () {
                    setState(() {
                      // 点击按钮B，禁用按钮A
                      _isButtonADisabled = true;
                    });
                  },
            child: const Text('按钮B'),
          ),
        ],
      ),
    );
  }
}

关键说明： #

• 按钮的禁用状态通过onPressed属性控制：当onPressed为null时，按钮自动变为禁用样式且无法点击。
• 点击按钮时通过setState()更新对应状态变量，触发UI重建，从而切换另一个按钮的禁用状态。
• 如果需要调整逻辑（比如点击按钮后自身也禁用），只需在点击事件里同步修改自身的状态变量即可。

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