Flutter Tizen原生TV应用：网页视图遥控导航光标添加求助

1. 启用WebView光标与焦点导航 #

使用tizen_webview插件时，在初始化WebViewController的WebSettings中开启光标和焦点导航支持，这会让WebView显示类似系统浏览器的光标，并支持通过按键移动焦点：

WebViewController youtubeController = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(Uri.parse('https://youtube.com'))
  ..setSettings(WebSettings(
    enableMousePointer: true, // 启用光标显示
    enableFocusNavigation: true, // 启用按键焦点导航
    enableJavaScript: true,
  ));

WebViewController netflixController = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(Uri.parse('https://netflix.com'))
  ..setSettings(WebSettings(
    enableMousePointer: true,
    enableFocusNavigation: true,
    enableJavaScript: true,
  ));

2. 映射遥控器按键到WebView操作 #

Tizen TV遥控器的方向键、确认键需要手动映射为WebView能识别的按键事件，通过Flutter的onKeyEvent监听全局按键，再分发给对应的WebView：

@override
Widget build(BuildContext context) {
  WebViewController activeController = youtubeController; // 默认焦点在左侧WebView
  return Scaffold(
    body: Row(
      children: [
        Expanded(child: WebView(controller: youtubeController)),
        Expanded(child: WebView(controller: netflixController)),
      ],
    ),
    onKeyEvent: (KeyEvent event) {
      if (event is KeyDownEvent) {
        switch (event.logicalKey) {
          case LogicalKeyboardKey.arrowUp:
          case LogicalKeyboardKey.arrowDown:
          case LogicalKeyboardKey.arrowLeft:
          case LogicalKeyboardKey.arrowRight:
            activeController.dispatchKeyEvent(event);
            return KeyEventResult.handled;
          case LogicalKeyboardKey.select: // 遥控器确认键映射为回车键
            activeController.dispatchKeyEvent(
              KeyEvent(type: KeyEventType.down, logicalKey: LogicalKeyboardKey.enter),
            );
            return KeyEventResult.handled;
          case LogicalKeyboardKey.backspace: // 用返回键切换两个WebView的焦点
            activeController = activeController == youtubeController 
                ? netflixController 
                : youtubeController;
            return KeyEventResult.handled;
        }
      }
      return KeyEventResult.ignored;
    },
  );
}

3. 验证依赖与权限 #

• 确保pubspec.yaml中依赖最新版本的tizen_webview：

  dependencies:
    flutter:
      sdk: flutter
    tizen_webview: ^2.0.0
  

• 确认tizen-manifest.xml中已添加互联网权限：

  <privileges>
    <privilege>http://tizen.org/privilege/internet</privilege>
  </privileges>
  

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