嵌套CupertinoButton点击子按钮时父按钮误高亮如何解决

嵌套使用CupertinoButton时，点击内层子按钮会同步触发外层父按钮的按压高亮效果，问题复现代码如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My app'),
        ),
        body: Center(
          child: CupertinoButton(
            onPressed: () {},
            child: Container(
              height: 300,
              width: 300,
              color: Colors.red,
              child: Center(
                child: CupertinoButton(
                  onPressed: () {
                    debugPrint(
                        'Pressing this button shouldnt highlight the parent button');
                  },
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.green,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

运行后交互效果如下：

预期实现效果：按压绿色内层子按钮时，红色外层父按钮不会触发高亮状态。

CupertinoButton内部通过Listener组件监听原始指针下按事件触发高亮，不需要等待手势竞技场判定点击事件归属：只要指针按下位置落在按钮布局范围内，哪怕最终点击事件被子组件消费，按钮也会立刻触发按压高亮，属于组件本身实现逻辑导致的事件联动问题。

核心修复思路：调整按钮高亮的触发时机，仅当按钮自身赢得手势竞争、确认点击事件由自身响应时才触发高亮，替换原有「指针落入范围即高亮」的逻辑。
推荐直接使用自定义修复版按钮替换外层原有CupertinoButton，可完整保留iOS风格按钮的交互特性，同时彻底解决嵌套高亮问题，可运行示例代码如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

/// 修复嵌套高亮联动问题的Cupertino风格按钮
class FixedCupertinoButton extends StatefulWidget {
  const FixedCupertinoButton({
    super.key,
    required this.onPressed,
    required this.child,
    this.pressedOpacity = 0.4,
    this.borderRadius,
    this.color,
    this.padding = const EdgeInsets.all(16),
    this.minSize = 44.0,
  });

  final VoidCallback? onPressed;
  final Widget child;
  final double pressedOpacity;
  final BorderRadius? borderRadius;
  final Color? color;
  final EdgeInsetsGeometry padding;
  final double minSize;

  @override
  State<FixedCupertinoButton> createState() => _FixedCupertinoButtonState();
}

class _FixedCupertinoButtonState extends State<FixedCupertinoButton> {
  bool _isPressed = false;

  void _setPressedState(bool pressed) {
    if (_isPressed == pressed || widget.onPressed == null) return;
    setState(() => _isPressed = pressed);
  }

  @override
  Widget build(BuildContext context) {
    final bool isInteractive = widget.onPressed != null;
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTapDown: isInteractive ? (_) => _setPressedState(true) : null,
      onTapUp: isInteractive ? (_) => _setPressedState(false) : null,
      onTapCancel: isInteractive ? () => _setPressedState(false) : null,
      onTap: widget.onPressed,
      child: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: widget.minSize,
          minHeight: widget.minSize,
        ),
        child: Opacity(
          opacity: isInteractive && _isPressed ? widget.pressedOpacity : 1.0,
          child: Container(
            padding: widget.padding,
            decoration: BoxDecoration(
              color: widget.color,
              borderRadius: widget.borderRadius ?? BorderRadius.circular(8),
            ),
            child: Center(
              widthFactor: 1,
              heightFactor: 1,
              child: widget.child,
            ),
          ),
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My app'),
        ),
        body: Center(
          // 外层使用修复后的按钮，内层保留原有CupertinoButton即可
          child: FixedCupertinoButton(
            color: Colors.red,
            onPressed: () {},
            child: SizedBox(
              height: 300,
              width: 300,
              child: Center(
                child: CupertinoButton(
                  color: Colors.green,
                  onPressed: () {
                    debugPrint('点击子按钮时父按钮不会触发高亮');
                  },
                  child: const SizedBox(
                    width: 100,
                    height: 100,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

实现逻辑说明：

• 用GestureDetector替代原有Listener做手势监听，只有当手势竞争胜出、确认点击事件归属当前按钮时，才会触发onTapDown回调更新高亮状态
• 点击内层子按钮时，子按钮会优先赢得手势竞争，外层父按钮不会收到点击确认回调，自然不会触发高亮
• 保留了原CupertinoButton点击透明度变化、最小点击区域、圆角等基础交互特性

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