Flutter 如何制作可选择/可聚焦的小部件

Question

我正在创建一个 android 电视应用程序。很长一段时间以来，我一直在努力弄清楚为什么当我单击遥控器上的向上和向下箭头按钮时它似乎什么也没做而且它没有 selecting 任何列表项。

最终我发现，如果我在列表中使用提升按钮或其他可聚焦的小部件，我可以使用箭头键并且它会正常工作。以前我使用的是包裹在手势检测器中的卡片小部件。

所以我想知道按钮和带有手势检测器的卡片之间的区别是什么阻止箭头键能够 select 项目。我怀疑是重点

这是我使用的，它不允许遥控器上的上下键 select 它：

GestureDetector(
    child: Card(
      color: color,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      elevation: 10,
      child: SizedBox(
          width: (width / numberOfCards) - padding * (numberOfCards - 1),
          height: (height / 2) - padding * 2,
          child: Center(child: Text(cardTitle, style: Theme.of(context).textTheme.bodyText1?.copyWith(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white),))),
    ),
    onTap: () => onCardTap(),
  ),

这是我用它替换的按钮，然后使上下键和 selection 起作用：

ElevatedButton(
                  onPressed: () {},
                  child: Text('Test 1', style: Theme.of(context).textTheme.bodyText1?.copyWith(color: Colors.white, fontSize: 18, fontWeight: FontWeight.normal)),
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.grey.withOpacity(0.3)),
                      minimumSize: MaterialStateProperty.all(Size(60, 60)),
                      elevation: MaterialStateProperty.all(10),
                      shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: new BorderRadius.circular(50)),)),
                ),

如果需要，这就是我用来获取按键的方法：

Shortcuts(
  shortcuts: <LogicalKeySet, Intent>{
    LogicalKeySet(LogicalKeyboardKey.select): const ActivateIntent(),
  },

谢谢

Answer 1

带有手势检测器的卡片与 ElevatedButton 的区别在于您没有 FocusNode。

如果你深入研究 ElevatedButton 的实现细节，你会发现它使用 InkWell 和 FocusNode

final Widget result = ConstrainedBox(
  constraints: effectiveConstraints,
  child: Material(
    // ...
    child: InkWell(
      // ...
      focusNode: widget.focusNode,
      canRequestFocus: widget.enabled,
      onFocusChange: updateMaterialState(MaterialState.focused),
      autofocus: widget.autofocus,
      // ...
      child: IconTheme.merge(
        // ....
        child: Padding(
          padding: padding,
          child: // ...
          ),
        ),
      ),
    ),
  ),
);

因此，如果您将 GestureDetector 替换为 Inkwell，则键盘导航将起作用。

InkWell(
  child: Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15.0),
    ),
    elevation: 10,
    child: const SizedBox(
      width: 200,
      height: 60,
      child: Center(
        child: Text(
          'Test 1',
        ),
      ),
    ),
  ),
  onTap: () {},
)

（在 Android 电视模拟器 API 30 上测试，带键盘和方向键。）

参考资料

Arrow (also D-PAD) keys don't work for focus traversal of TextFormField #49335 | github.com/flutter
Shift+Tab and arrow (also D-PAD) keys don't work for focus traversal of TextFormField | whosebug.com

Flutter 如何制作可选择/可聚焦的小部件

Flutter how to make a selectable / focusable widget

focus

d-pad

android-tv

flutter

参考资料