Flutter如何通过代码触发按钮点击？

要实现键盘按键绑定按钮，同时触发按钮的按压视觉反馈，有两种实用方案，分别适配不同的按钮场景：

方案一：利用InkWell的simulateTap方法（原生Material视觉反馈） #

InkWell的simulateTap()方法可以直接触发按钮的水波纹动画和按压视觉状态，同时你可以同步执行按钮的点击逻辑。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: const KeyboardButtonDemo(),
      ),
    );
  }
}

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

  @override
  State<KeyboardButtonDemo> createState() => _KeyboardButtonDemoState();
}

class _KeyboardButtonDemoState extends State<KeyboardButtonDemo> {
  final GlobalKey<InkWellState> _buttonKey = GlobalKey<InkWellState>();

  void _handleKeyEvent(RawKeyEvent event) {
    // 监听A键按下事件
    if (event is RawKeyDownEvent && event.logicalKey == LogicalKeyboardKey.keyA) {
      // 触发按钮的视觉反馈
      _buttonKey.currentState?.simulateTap();
      // 执行按钮的核心逻辑
      _onButtonTriggered();
    }
  }

  void _onButtonTriggered() {
    debugPrint("按钮已被触发");
  }

  @override
  Widget build(BuildContext context) {
    return RawKeyboardListener(
      focusNode: FocusNode(),
      onKey: _handleKeyEvent,
      child: Center(
        child: InkWell(
          key: _buttonKey,
          onTap: _onButtonTriggered,
          borderRadius: BorderRadius.circular(8),
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
            decoration: BoxDecoration(
              color: Theme.of(context).primaryColor,
              borderRadius: BorderRadius.circular(8),
            ),
            child: const Text(
              "按A键触发",
              style: TextStyle(color: Colors.white, fontSize: 16),
            ),
          ),
        ),
      ),
    );
  }
}

方案二：自定义按钮状态（完全控制视觉样式） #

如果需要自定义按钮的按压效果（比如颜色深浅、阴影变化），可以手动维护一个isPressed状态变量，同步键盘按键和手动点击的状态变化。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: const CustomKeyboardButton(),
      ),
    );
  }
}

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

  @override
  State<CustomKeyboardButton> createState() => _CustomKeyboardButtonState();
}

class _CustomKeyboardButtonState extends State<CustomKeyboardButton> {
  bool _isPressed = false;

  void _handleKeyEvent(RawKeyEvent event) {
    // 监听B键的按下/抬起事件
    if (event.logicalKey == LogicalKeyboardKey.keyB) {
      setState(() {
        _isPressed = event is RawKeyDownEvent;
      });
      // 仅在按键按下时执行核心逻辑
      if (event is RawKeyDownEvent) {
        _onButtonAction();
      }
    }
  }

  void _onButtonAction() {
    debugPrint("自定义按钮已触发");
  }

  @override
  Widget build(BuildContext context) {
    return RawKeyboardListener(
      focusNode: FocusNode(),
      onKey: _handleKeyEvent,
      child: Center(
        child: GestureDetector(
          // 同步手动点击的状态变化
          onTapDown: (_) => setState(() => _isPressed = true),
          onTapUp: (_) => setState(() => _isPressed = false),
          onTapCancel: () => setState(() => _isPressed = false),
          onTap: _onButtonAction,
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
            decoration: BoxDecoration(
              // 根据按压状态切换颜色
              color: _isPressed ? Colors.blue[700] : Colors.blue,
              borderRadius: BorderRadius.circular(8),
              // 根据按压状态切换阴影
              boxShadow: _isPressed
                  ? [const BoxShadow(color: Colors.black26, blurRadius: 2, offset: Offset(0, 1))]
                  : [const BoxShadow(color: Colors.black26, blurRadius: 4, offset: Offset(0, 2))],
            ),
            child: const Text(
              "按B键触发",
              style: TextStyle(color: Colors.white, fontSize: 16),
            ),
          ),
        ),
      ),
    );
  }
}

补充说明 #

• 关于MaterialStateController：它主要用于批量管理按钮的disabled、hovered等状态，对于模拟单次点击的视觉反馈，确实不是最直接的方案，上述两种方法更贴合需求。
• 多按钮场景：如果需要绑定多个按键到不同按钮，只需要在_handleKeyEvent中判断不同的LogicalKeyboardKey，对应触发不同按钮的状态即可。

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