Flutter适配遥控器方案

我正在参加「掘金·启航计划」

前言

Flutter在桌面设备的实践，我们已经落地了多个项目，充分验证其技术和业务的可行性。同时也对Flutter提出了更多的要求，其中就包括：遥控器的适配！

很遗憾，Flutter官方根本没有考虑过遥控器的适配，甚至其焦点控制还有不少问题【比如：切换闪烁、快速操作下焦点无法响应】，因此我们必须自己打破这个壁垒。

遥控器如何玩？

遥控器在软件层面其实就是按键事件，相当于我们的键盘。Android本身有TV设备，因此已经有一套完善的控制机制。

在Android中，我们只需要对view声明可以获取焦点，指定焦点关系即可。框架会帮我们自动聚焦到对应的控件上；简单的UI状态用一个SelectDrawable就可以解决。

对比Flutter这种声明式UI，Android命名式UI有天然的优势，通过生成的R文件，框架层可以通过FocusFinder轻易的找到对应的view，处理好焦点的分发流转和事件处理。

Flutter遥控器的难点

• Flutter是声明式UI，在编译时要生成资源类本身就比较困难；
• Widget只是配置信息，我们在开发过程中想要拿到控件的信息必须通过Key值去获取Rander对象，要获取各组件的信息来确定方向、执行事件是非常麻烦的；
• 通过实践，我们发现Flutter focusNode还存在不少问题，请求过程偶发焦点重复request，快速切换焦点会响应错误；在Android设备上更加明显；
• Flutter的Material组件库有部分控件是自己持有focusNode的，默认会自身响应键盘事件，这会跟我们自己的焦点管理产生冲突。

实现原理

摒弃Flutter自带的FoucusNode流转机制，因为Flutter压根就没帮我们做好这层流转。
自行监听事件，进行焦点分发，业务端自行加入ControlManager，明确知道当前哪个焦点被触发。

实现步骤

1. 全局的遥控事件接收组件

既然Flutter无法轻松的生成焦点的流转关系，那我们就自行处理，定义一个全局的事件接收器。这个组件需要接收一个child，一般把MaterialApp传入。
组件内部接收按键事件，解析后进行事件分发。

class ControlApp extends StatelessWidget {
  ControlApp({Key? key, required this.app}) : super(key: key);

  final Widget app;

  final FocusNode remoteControl = FocusNode(debugLabel: 'Flutter遥控器');

  final EventBus _eventBus = EventBus.instance;

  @override
  Widget build(BuildContext context) {
    return RawKeyboardListener(
      onKey: (RawKeyEvent event) {
        if (event is RawKeyDownEvent) {
          RawKeyEventDataWindows rawKeyEventData =
              event.data as RawKeyEventDataWindows;
          switch (rawKeyEventData.keyCode) {
            case 38: //KEY_UP
              _eventBus.fire(EventType.up);
              break;
            case 40: //KEY_DOWN
              _eventBus.fire(EventType.down);
              break;
            case 37: //KEY_LEFT
              _eventBus.fire(EventType.left);
              break;
            case 39: //KEY_RIGHT
              _eventBus.fire(EventType.right);
              break;
            case 13: //KEY_ENTER
              _eventBus.fire(EventType.enter);
              break;
            case 8: //KEY_BACK
              _eventBus.fire(EventType.back);
              break;
            default:
              break;
          }
        }
      },
      focusNode: remoteControl,
      child: app,
    );
  }
}

2. 统一焦点接收类管理

ControlApp统一分发后，ControlManager会进行接收，同时ControlManager将管理所有的遥控器监听者，提供addListener、removeListener、syncFocusKey、changeTopFocus等接口；保证遥控事件只发送给最后加入的监听者。

final controlManager = ControlManager.instance;

class ControlManager {
  ControlManager._() {
    initEventListen();
  }

  static final ControlManager instance = ControlManager._();

  final EventBus _eventBus = EventBus.instance;

  final ObserverList<ControlListener> _listeners =
      ObserverList<ControlListener>();

  bool receiveEvents = true;

  int _currListenerIndex = 0;

  // 记录所有listener的焦点集合
  final List<List<FocusCollection>> _allCollectionList = [];

  // 记录每个listener选择的焦点集合
  final List<FocusCollection?> _selectedCollectionList = [];

  void addListener(ControlListener listener,
      {required List<FocusCollection> focusList}) {
    _listeners.add(listener);
    _allCollectionList.add(focusList);
    _currListenerIndex++;
    _selectedCollectionList.add(null);
  }

  void removeListener(ControlListener listener) {
    _listeners.remove(listener);
    _selectedCollectionList.removeLast();
    _allCollectionList.removeLast();
    _currListenerIndex--;
  }

  /// 修改顶层焦点集合
  void changeTopFocus(List<FocusCollection> focusList,
      {FocusCollection? curr}) {
    _allCollectionList.last = focusList;
    if (curr == null) {
      _selectedCollectionList[_currListenerIndex - 1] = null;
      _listeners.last.onCancelSelect();
    } else {
      _selectedCollectionList[_currListenerIndex - 1] = curr;
      _listeners.last.onWidgetSelect(curr);
    }
  }

  /// 是否暂停处理遥控器事件
  setReceiveStatus(bool isReceive) {
    receiveEvents = isReceive;
  }

  /// 同步焦点的建值
  syncFocusKey(FocusCollection focus) {
    _selectedCollectionList[_currListenerIndex - 1] = focus;
  }

  bool get focusIsEmpty => _allCollectionList[_currListenerIndex - 1].isEmpty;

  initEventListen() {
    _eventBus.on().listen((event) {
      if (!receiveEvents) return;
      switch (event) {
        case EventType.up:
        case EventType.left:
          if (focusIsEmpty) return;
          _listeners.last.onWidgetSelect(getFocusCollection(event));
          break;
        case EventType.enter:
          if (focusIsEmpty) return;
          if (_selectedCollectionList[_currListenerIndex - 1] == null) return;
          _listeners.last.onEnterEvent(getFocusCollection(event));
          break;

        case EventType.down:
        case EventType.right:
          if (focusIsEmpty) return;
          _listeners.last.onWidgetSelect(getFocusCollection(event));
          break;

        case EventType.back:
          if (focusIsEmpty) {
            _listeners.last.onBackEvent(null);
          } else {
            _listeners.last.onBackEvent(getFocusCollection(event));
          }
          break;
      }
    });
  }

  /// 获取命中的焦点集合
  FocusCollection getFocusCollection(EventType type) {
    if (_selectedCollectionList[_currListenerIndex - 1] == null) {
      var c = _allCollectionList[_currListenerIndex - 1].first;
      _selectedCollectionList[_currListenerIndex - 1] = c;
      return c;
    } else {
      FocusCollection c = _selectedCollectionList[_currListenerIndex - 1]!;
      List<FocusCollection> l = _allCollectionList[_currListenerIndex - 1];
      switch (type) {
        case EventType.up:
          if (c.up != null) c = l.firstWhere((e) => e.currKey == c.up);
          break;
        case EventType.down:
          if (c.down != null) c = l.firstWhere((e) => e.currKey == c.down);
          break;
        case EventType.left:
          if (c.left != null) c = l.firstWhere((e) => e.currKey == c.left);
          break;
        case EventType.right:
          if (c.right != null) c = l.firstWhere((e) => e.currKey == c.right);
          break;
        case EventType.enter:
        case EventType.back:
          break;
      }
      _selectedCollectionList[_currListenerIndex - 1] = c;
      return c;
    }
  }
}

3. 提供遥控器监听抽象类

需要监听遥控事件的页面（或组件），需要混入这个类，然后在对应生命钩子中调用ControlManager中的addListener和removeListener事件。

abstract class ControlListener {
  void onWidgetSelect(FocusCollection collection) {}

  void onCancelSelect() {}

  void onEnterEvent(FocusCollection collection) {}

  void onBackEvent(FocusCollection? collection) {}
}

重写ControlListener中提供的接口，就能准确接收到ControlManager发出的事件拉！

class _MyHomePageState extends State<MyHomePage> with ControlListener {
  int _counter = 0;

  String selectKey = ""; // 选择的焦点key

  // 自行维护焦点的关系
  List<FocusCollection> focusList = [
    FocusCollection("one", right: "two", down: "three"),
    FocusCollection("two", left: "three", up: "one"),
    FocusCollection("three", up: "one", right: "two")
  ];

  @override
  void initState() {
    super.initState();
    controlManager.addListener(this, focusList: focusList);
  }

  @override
  void dispose() {
    super.dispose();
    controlManager.removeListener(this);
  }

  @override
  void onWidgetSelect(FocusCollection collection) {
    super.onWidgetSelect(collection);
    setState(() {
      selectKey = collection.currKey;
    });
    print(">>>>> onWidgetSelect ${collection.currKey}");
  }

  @override
  void onBackEvent(FocusCollection? collection) {
    super.onBackEvent(collection);
    print(">>>>> onBackEvent ${collection?.currKey}");
  }

  @override
  void onEnterEvent(FocusCollection collection) {
    super.onEnterEvent(collection);
    int i = focusList.indexOf(collection);
    if (i == 2) {
      _incrementCounter();
    } else if (i == 0) {
      Navigator.push(
          context, MaterialPageRoute(builder: (context) => SecondPage()));
    }
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(children: [
        Positioned(
          top: 20,
          left: 20,
          child: FocusWidget(
            hasFocus: selectKey == "one",
            child: const Text('You have pushed the button this many times:'),
          ),
        ),
        Positioned(
          top: 60,
          right: 20,
          child: FocusWidget(
            hasFocus: selectKey == "two",
            child: Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ),
        ),
        Positioned(
          top: 60,
          left: 20,
          child: FocusWidget(
            hasFocus: selectKey == "three",
            child: GestureDetector(
              onTap: _incrementCounter,
              child: Icon(Icons.add, color: Theme.of(context).primaryColor),
            ),
          ),
        ),
      ]),
    );
  }
}

• 从上面的例子可以看到，业务端是需要提供焦点列表，自行指定好上下左右的焦点关键字；这个步骤其实就跟Android中，在xml指定焦点关系一样。

 android:nextFocusDown="@id/button1"
 android:nextFocusUp="@id/button2"
 android:nextFocusLeft="@id/button3"
 android:nextFocusRight="@id/button4"

• 同时例子中也有FocusWidget这个控件，我目前是完全摈弃了Flutter自带的这套FoucusNode，而是明确告诉Widget你被选中了、被点击了。这能解决FoucusNode本身的一些缺陷。
• 当遇到带有FocusNode的组件，比如Input、Button、InkWell等，请一定要自主传入FoucusNode，并且设置skipTraversal为true，这样这个焦点就不会自动接收键盘事件，不会导致焦点冲突。

FocusNode focusNode_1 = FocusNode(skipTraversal: true);

继续优化

在上面的方案中，我们发现一个最痛苦的点就是：接入相对复杂，特别是点击事件还要由页面级别通知到对应组件自行去执行。对于封装程度高的项目，这是很致命的。

因此我们把FocusWidget抽象出来，页面级别不再维护复杂的焦点关系列表；而是在需要处理焦点的控件外部包裹FocusWidget，传入需要的focus、nextFocusDown、nextFocusUp、nextFocusLeft、nextFocusRight；以及需要的UI状态、点击事件等。之后遥控器插件会自动找寻对应的FocusWidget，显示其选中状态，并触发传入的点击事件！

将焦点关系和事件处理完全融合在一起，不需要单独声明和维护，从而快速的让我们的应用适配遥控器 ~

写在最后

这个方案目前在业务上已经得到实践认可，但是细节以及优化方案还有很多需要注意的。
总之遥控器在Flutter上是个相对难啃的坑，只能不断往前爬，往前填。