带有d-pad导航的android电视颤振网页浏览

Question

我有一个简单的颤振应用程序，它已经很好地工作在安卓电视与d-pad遥控器。可以在小部件之间导航等等..。

Webview只加载初始值，但不响应任何d-pad键。

谢谢你的帮助！

Answer 1

颤振webview不适用于d控制器。我还试图为MiBoxTv创建应用程序，该应用程序将由遥控器控制。为了控制webview，我用RawKeyboardListener包装它，并用onKey方法捕获了rawKey events。根据虚拟指针的位置，我将单击事件发送到webview的控制器。下面我将放置我的示例代码。但是，使用这种方法，的输入元素只有在鼠标指针点击后才能获得焦点。如果有人面对并解决了这个问题，请告诉我们你是如何做到的。

WebViewController _webViewController;

  int posX = 325;
  int posY = 300;
  bool topScrollBar = false;
  bool botttomScrollBar = false;

  handleKey(RawKeyEvent key, BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    if (key.runtimeType.toString() == 'RawKeyDownEvent') {
      RawKeyEventDataAndroid data = key.data as RawKeyEventDataAndroid;
      String _keyCode;
      _keyCode = data.keyCode.toString();

      context.visitChildElements((element) {
        print(element.widget.key);
      });

      switch (_keyCode) {
        case '19': //up
          setState(() {
            posY -= 5;
            if (posY < 0) {
              posY = 0;
            }
          });
          break;
        case '22': //right
          setState(() {
            posX += 5;
            if (posX > width) {
              posX = width.toInt();
            }
          });
          break;
        case '20': //down
          setState(() {
            posY += 5;
            if (posY > height) {
              posY = height.toInt();
            }
          });
          break;
        case '21': //left
          setState(() {
            posX -= 5;
            if (posX < 0) {
              posX = 0;
            }
          });
          break;
        case '23': //OK
          _webViewController.evaluateJavascript("""            
            var cb = document.elementFromPoint($posX,$posY);
            cb.click();
            cb.focus(); 
            """);       
          break;
      }
    }

    if (posY < 5) {
      setState(() {
        topScrollBar = true;
      });
      _webViewController.scrollBy(0, -20);
    } else if (posY > height - 5) {
      setState(() {
        botttomScrollBar = true;
      });
      _webViewController.scrollBy(0, 20);
    } else {
      setState(() {
        topScrollBar = false;
        botttomScrollBar = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          RawKeyboardListener(
            focusNode: new FocusNode(),
            onKey: (key) => handleKey(key, context),
            child: WebView(
              initialUrl: 'https://google.com/',
              javascriptMode: JavascriptMode.unrestricted,
              initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
              onWebViewCreated: (WebViewController webViewController) {
                _webViewController = webViewController;
              },
              userAgent:
                  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36",
            ),
          ),
          Visibility(
            visible: topScrollBar,
            child: Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: Container(
                height: 25,
                child: Center(
                  child: Icon(Icons.keyboard_arrow_up),
                ),
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Colors.blue.withOpacity(0.5),
                      Colors.white.withOpacity(0.5)
                    ],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                  ),
                  border: Border(
                    bottom: BorderSide(
                      color: Colors.black.withOpacity(0.5),
                      width: 1,
                    ),
                  ),
                ),
              ),
            ),
          ),
          Visibility(
            visible: botttomScrollBar,
            child: Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Container(
                height: 25,
                child: Center(
                  child: Icon(Icons.keyboard_arrow_down),
                ),
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Colors.blue.withOpacity(0.5),
                      Colors.white.withOpacity(0.5)
                    ],
                    begin: Alignment.bottomCenter,
                    end: Alignment.topCenter,
                  ),
                  border: Border(
                    top: BorderSide(
                      color: Colors.black.withOpacity(0.5),
                      width: 1,
                    ),
                  ),
                ),
              ),
            ),
          ),
          Positioned(
              left: posX.toDouble(),
              top: posY.toDouble(),
              child: Image.asset(
                'assets/cursor.png',
                width: 18,
                height: 18,
              ))
        ],
      ),
      resizeToAvoidBottomInset: false,
    );
  }