Flutter Android TV应用实现InkWell获焦时显示边框

你的当前实现思路是可行的，但可以优化体验并解决潜在问题，以下是几种改进方案：

方案一：添加平滑的焦点动画（推荐） #

Android TV 应用的焦点切换需要平滑过渡提升体验，将 Container 替换为 AnimatedContainer，实现边框颜色/宽度的渐变动画：

AnimatedContainer(
  duration: const Duration(milliseconds: 200), // 焦点切换动画时长
  decoration: BoxDecoration(
    border: Border.all(
      color: _focusNode.hasFocus ? Colors.black : Colors.transparent,
      width: _focusNode.hasFocus ? 2 : 0, // 可选：焦点时增加边框宽度
    ),
    borderRadius: borderRadius ?? BorderRadius.circular(50), // 与 InkWell 圆角保持一致
  ),
  child: InkWell(
    focusNode: _focusNode,
    onTap: onTap,
    onDoubleTap: onDoubleTap,
    borderRadius: borderRadius ?? BorderRadius.circular(50),
    child: child,
  ),
);

同时要正确初始化和销毁 FocusNode，避免内存泄漏：

late FocusNode _focusNode;

@override
void initState() {
  super.initState();
  _focusNode = FocusNode();
}

@override
void dispose() {
  _focusNode.dispose(); // 销毁焦点节点
  super.dispose();
}

方案二：使用 Focus 组件包裹实现焦点控制 #

通过 Focus 组件统一管理焦点状态，无需将 focusNode 传递给 InkWell：

Focus(
  focusNode: _focusNode,
  child: Container(
    decoration: BoxDecoration(
      border: Border.all(
        color: _focusNode.hasFocus ? Colors.black : Colors.transparent,
      ),
      borderRadius: borderRadius ?? BorderRadius.circular(50),
    ),
    child: InkWell(
      onTap: onTap,
      onDoubleTap: onDoubleTap,
      borderRadius: borderRadius ?? BorderRadius.circular(50),
      child: child,
    ),
  ),
);

注意事项 #

• 确保 Container 的圆角与 InkWell 的圆角一致，避免墨水效果被裁剪
• 如果需要更复杂的焦点样式（如阴影），可以在 BoxDecoration 中添加 boxShadow 属性
• 在 Android TV 场景下，建议配合 FocusableActionDetector 处理遥控器按键事件，提升交互完整性

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