Flutter Android TV 应用水平 ListView 点击项目问题答案

【问题标题】：Flutter Android TV app Horizontal ListView Click Item IssueFlutter Android TV 应用水平 ListView 点击项目问题
【发布时间】：2021-06-04 04:41:52
【问题描述】：

我正在开发一个在 Android TV 上使用的颤振应用。应用程序具有类似 Netflix 的 UI（如多个水平 ListView 和 Main Vertical ListView）已添加以下代码以使其与电视遥控器一起使用

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

我能够在每个 ListView 内垂直和水平滚动。问题是我无法关注特定的列表视图项目。目标是如果用户使用电视遥控器点击可聚焦项目，它应该打开新页面。

对每个订单项的 UI 使用以下代码。

Focus(
      autofocus: true,
      child: GestureDetector(
        onTap: () => Navigator.push(
          context,
          MaterialPageRoute(
            builder: (_) => VideoScreen(id: video.id),
          ),
        ),
        child:
           Container(
            margin: EdgeInsets.symmetric(horizontal: 20.0, vertical: 5.0),
            padding: EdgeInsets.all(10.0),
            height: 140.0,
            width: 200,
            decoration: BoxDecoration(
              color: Colors.black45,
              boxShadow: [
                BoxShadow(
                  color: Colors.black12,
                  offset: Offset(0, 1),
                  blurRadius: 6.0,
                ),
              ],
            ),
            child: Column(
              children: [
                Row(
                  children: <Widget>[
                    Image(
                      width: 150.0,
                      image: NetworkImage(video.thumbnailUrl),
                    )
                  ],
                ),
                Text(
                  video.title,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18.0,
                  ),
                ),
                RaisedButton(onPressed: (){


                })
              ],
            ),
        ),
      ),
    )

我也提到了下面的链接，但不知何故它不起作用： flutter android tv listview focused item change background and text

【问题讨论】：

标签： android flutter dart android-tv

【解决方案1】：

你可以用 RawKeyboardListener 代替 Shortcuts，我使用了下面的代码：

const int KEY_UP = 19;
const int KEY_DOWN = 20;
const int KEY_LEFT = 21;
const int KEY_RIGHT = 22;
const int KEY_CENTER = 23;
const int KEY_CENTER_KEYBOARD = 66;

class DpadWidget extends StatefulWidget {
  final Function onClick;
  final Function(bool isFocused) onFocus;
  final Widget child;
  final String id;

  const DpadWidget({Key key, this.onClick, this.child, this.id, this.onFocus})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return DpadWidgetState();
  }
}

class DpadWidgetState extends State<DpadWidget> {
  List<FocusNode> focusNodes = List();
  FocusNode node;
  bool isFocused = false;

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

  @override
  Widget build(BuildContext context) {
    return RawKeyboardListener(
      child: widget.child,
      focusNode: node,
      onKey: (RawKeyEvent event) {
        isFocused = !isFocused;

        if (widget.onFocus != null) widget.onFocus(isFocused);

        if (event is RawKeyDownEvent && event.data is RawKeyEventDataAndroid) {
          RawKeyDownEvent rawKeyDownEvent = event;
          RawKeyEventDataAndroid rawKeyEventDataAndroid = rawKeyDownEvent.data;
          print(rawKeyEventDataAndroid.keyCode);
          switch (rawKeyEventDataAndroid.keyCode) {
            case KEY_CENTER:
              widget.onClick();
              break;
            case KEY_CENTER_KEYBOARD:
              widget.onClick();
              break;
            case KEY_UP:
              break;
            case KEY_DOWN:
              break;
            default:
              break;
          }
        }
      },
    );
  }
}

现在，如果您想要快进或快退，只需使用带有特定大小写的 RawKeyboardListener 来处理它。

您也可以使用 D-PAD 键执行此类操作。

【讨论】：