Flutter TV应用的开发尝试

最新推荐文章于 2024-01-29 13:39:36 发布
最新推荐文章于 2024-01-29 13:39:36 发布
阅读量2.4w 收藏 16
点赞数 10
分类专栏： Flutter Dart 文章标签： fluttertv tv dart dartv flutter_tv
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jay100500/article/details/88597780
版权

Flutter TV应用的开发尝试

Flutter主要是进行移动应用开发外，最近尝试了下Flutter开发TV应用。虽然写出来了，效果也还可以，体验流畅，自动适配。不过开发成本还是挺高的，按键监听、焦点处理和焦点框处理比较麻烦，由于Google官方并没有推出Flutter TV应用的SDK，所以暂时还是不要用Flutter编写TV应用了，使用原生leanback或者B/S结构开发吧，等官方推出后可以继续尝试对比使用。接下来，就分享下其中的技术点。本文将主要介绍：

  • Flutter TV应用开发主要难点
  • Flutter TV应用开发按键监听
  • Flutter TV应用开发焦点处理
  • Flutter TV应用开发焦点框效果处理

Flutter Dart QQ技术交流群：979966470

开发的运行效果图

由于Google官方并没有退出TV版Flutter SDK，所以用Flutter尝试编写TV应用，主要是焦点框和焦点的处理，其他的和手机应用差别不大。按键监听、焦点框和焦点处理比较麻烦，所以Flutter的TV应用开发还不成熟，体验还不错，很流畅，开发成本比较高，还是用原生leanback开发可能要快一些。

Fast to Study Flutter And Dart. QQ群：979966470

下面为效果图：

下面为效果图：
运行效果
运行效果
运行效果

手机上也可以自动适配：

手机端运行效果

运行视频：https://github.com/flutteranddart/flutterTV/blob/master/device.webm

APK下载体验地址：https://github.com/flutteranddart/flutterTV/blob/master/app-release.apk?raw=true

开发的主要难点

其实其他地方和Flutter开发移动应用基本没区别，主要就是按键监听、焦点框和焦点处理。原生Android的控件就默认有焦点的处理属性，直接配置使用即可。

//焦点处理
android:focusable="true"
//触摸模式下是否可以点击，可选可不选
android:focusableInTouchMode="true"

Flutter开发TV应用就要自己处理按键监听、焦点和焦点框了，比较的麻烦，处理好了这几个问题，开发起来也就没太大难度了。

Flutter TV应用开发按键监听

Flutter Widget能够监听到我们的遥控器或者手机端的按键事件的前提是这个Widget已经获取了焦点才可以。获取焦点后面会讲到，这里暂时不提了。
按键监听需要使用RawKeyboardListener这个Widget，构造方法如下：

const RawKeyboardListener({
    Key key,
    @required this.focusNode,//焦点结点
    @required this.onKey,//按键接收处理事件
    @required this.child,//接收焦点的子控件
  })

很简单给个例子：

FocusNode focusNode0 = FocusNode();

... ...

RawKeyboardListener(
      focusNode: focusNode0,
      child: Container(
        decoration: getCircleDecoration(color0),
        child: Padding(
          child: Card(
            elevation: 5,
            shape: CircleBorder(),
            child: CircleAvatar(
              child: Text(''),
              backgroundImage: AssetImage("assets/icon_tv.png"),
              radius: radius,
            ),
          ),
          padding: EdgeInsets.all(padding),
        ),
      ),
      onKey: (RawKeyEvent event) {
        if (event is RawKeyDownEvent && event.data is RawKeyEventDataAndroid) {
          RawKeyDownEvent rawKeyDownEvent = event;
          RawKeyEventDataAndroid rawKeyEventDataAndroid = rawKeyDownEvent.data;
          print("keyCode: ${rawKeyEventDataAndroid.keyCode}");
          switch (rawKeyEventDataAndroid.keyCode) {
            case 19: //KEY_UP
              FocusScope.of(context).requestFocus(_focusNode);
              break;
            case 20: //KEY_DOWN
              break;
            case 21: //KEY_LEFT
              FocusScope.of(context).requestFocus(focusNode4);
              break;
            case 22: //KEY_RIGHT
              FocusScope.of(context).requestFocus(focusNode1);
              break;
            case 23: //KEY_CENTER
              break;
            default:
              break;
          }
        }
      },
    )

这样就实现了我们的Card Widget监听我们的按键事件，遥控器、手机的按键都能监听到。

Flutter TV应用开发焦点处理

Flutter TV的Widget获取焦点的处理通过FocusScope这个Widget处理。
主动获取焦点代码如下：

FocusNode focusNode0 = FocusNode();
... ...
//主动获取焦点
FocusScope.of(context).requestFocus(focusNode0);
//自动获取焦点
FocusScope.of(context).autofocus(focusNode0);

这样就可以了进行焦点获取处理了。FocusNode这个类也很重要，负责监听焦点的工作。

Flutter TV应用开发焦点框效果处理

有了焦点、按键事件监听，剩下的就是选中的焦点框效果的实现了，主要原理这里使用的是用边框，然后动态设置边框颜色就实现了焦点框选中显示，移走不显示的效果。例如选中后焦点框颜色设置为黄色、未选中时就设置为透明色，通过setState({…})进行刷新页面。

  FocusNode focusNode0 = FocusNode();
  ...

//改变颜色状态，刷新页面
  _setDecorationBorder0() {
    setState(() {
      if (focusNode0.hasFocus) {
        colorB0 = Colors.orange;
      } else {
        colorB0 = Colors.transparent;
      }
    });
  }

...
//为FocusNode添加监听事件方法
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    focusNode0.addListener(_setDecorationBorder0);
  }
...
//销毁时要注销监听
  @override
  void dispose() {
    super.dispose();
    focusNode0.removeListener(_setDecorationBorder0);
    focusNode0.dispose();
  }

RawKeyboardListener(
    //焦点监听
      focusNode: focusNode0,
      child: Container(
        //这里就是设置焦点框效果的地方
        decoration: getCircleDecoration(color0),
        child: Padding(
          child: Card(
            elevation: 5,
            shape: CircleBorder(),
            child: CircleAvatar(
              child: Text(''),
              backgroundImage: AssetImage("assets/icon_tv.png"),
              radius: radius,
            ),
          ),
          padding: EdgeInsets.all(padding),
        ),
      ),
      onKey: (RawKeyEvent event) {
        print('监听');
        if (event is RawKeyDownEvent && event.data is RawKeyEventDataAndroid) {
          RawKeyDownEvent rawKeyDownEvent = event;
          RawKeyEventDataAndroid rawKeyEventDataAndroid = rawKeyDownEvent.data;
          print("keyCode: ${rawKeyEventDataAndroid.keyCode}");
          switch (rawKeyEventDataAndroid.keyCode) {
            case 19: //KEY_UP
              FocusScope.of(context).requestFocus(_focusNode);
              break;
            case 20: //KEY_DOWN
              break;
            case 21: //KEY_LEFT
              FocusScope.of(context).requestFocus(focusNode4);
              break;
            case 22: //KEY_RIGHT
              FocusScope.of(context).requestFocus(focusNode1);
              break;
            case 23: //KEY_CENTER
              break;
            default:
              break;
          }
        }
      },
    );

...
//焦点框颜色变换
Decoration getCircleDecoration(Color colors) {
  return BoxDecoration(
      border: Border.all(width: borderWidth, color: colors),
      shape: BoxShape.circle);
}

扩充一点，如果你想获取某个Widget或者布局的宽高信息，可以通过如下代码获取：

//这里的context为你要获取宽高信息的Widget的context
RenderObject renderObject = context.findRenderObject();
...
//这个context可以通过设置key来进行获取
GlobalKey _bodyKey = new GlobalKey();
...
Widget body1() {
    return Expanded(
      key: _bodyKey,
      child: Container(
          ...

我们需要在页面渲染完毕后获取Widget的宽高信息，所以还要监听页面渲染刷新完毕的事件，用with WidgetsBindingObserver来实现:

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
    ...
  @override
  void initState() {
    //注册监听
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
    //取消监听
    WidgetsBinding.instance.removeObserver(this);
  }

  @override
  void didChangeDependencies() {
    WidgetsBinding.instance.addPostFrameCallback(_onAfterRendering);
    super.didChangeDependencies();
  }

  @override
  void didUpdateWidget(Widget oldWidget) {
    WidgetsBinding.instance.addPostFrameCallback(_onAfterRendering);
    super.didUpdateWidget(oldWidget);
  }

  void _onAfterRendering(Duration timeStamp) {
    //这里编写获取元素大小和位置的方法
    RenderObject renderObject = context.findRenderObject();
    Size size = renderObject.paintBounds.size;
    print('onAfterRendering:');
    print(size.height);
    //获取对应key的context所在的Widget的宽高信息
    RenderObject _renderObject = _bodyKey.currentContext.findRenderObject();
    Size _size = _renderObject.paintBounds.size;
    print('_onAfterRendering:');
    print(_size.height);
    bodyHeight = _size.height;
    setState(() {});
  }

最后给一个完整的Flutter TV的应用开发示例代码：

/*
 * @Author: Tan Dong 
 * @Date: 2019-03-16 12:39:05 
 * @Last Modified by:   Tan Dong 
 * @Last Modified time: 2019-03-16 12:39:05 
 */
import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TV Page',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
        backgroundColor: Colors.teal,
      ),
      routes: {
        // '/home': (context) =>` VideoPlay(),
      },
      home: MyHomePage(title: 'TV Page'),
    );
  }
}

const double radius = 30;
const double padding = 2;
const double borderWidth = 2;
double itemWidth = 0;
FocusNode focusNode = null;

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  FocusNode focusNodeB0 = FocusNode();
  FocusNode focusNodeB1 = FocusNode();
  FocusNode focusNodeB2 = FocusNode();
  FocusNode focusNodeB3 = FocusNode();
  FocusNode focusNodeB4 = FocusNode();
  Color colorB0 = Colors.transparent;
  Color colorB1 = Colors.transparent;
  Color colorB2 = Colors.transparent;
  Color colorB3 = Colors.transparent;
  Color colorB4 = Colors.transparent;
  bool init = false;

   _setDecorationBorderB0() {
    setState(() {
      if (focusNodeB0.hasFocus) {
        colorB0 = Colors.orange;
      } else {
        colorB0 = Colors.transparent;
      }
    });
  }

  _setDecorationBorderB1() {
    setState(() {
      if (focusNodeB1.hasFocus) {
        colorB1 = Colors.orange;
      } else {
        colorB1 = Colors.transparent;
      }
    });
  }

  _setDecorationBorderB2() {
    setState(() {
      if (focusNodeB2.hasFocus) {
        colorB2 = Colors.orange;
      } else {
        colorB2 = Colors.transparent;
      }
    });
  }

  _setDecorationBorderB3() {
    setState(() {
      if (focusNodeB3.hasFocus) {
        colorB3 = Colors.orange;
      } else {
        colorB3 = Colors.transparent;
      }
    });
  }

  _setDecorationBorderB4() {
    setState(() {
      if (focusNodeB4.hasFocus) {
        colorB4 = Colors.orange;
      } else {
        colorB4 = Colors.transparent;
      }
    });
  }

  @override
  void initState() {
    WidgetsBinding.instance.addObserver(this);
    // SystemChrome.setEnabledSystemUIOverlays([]);
    // SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom]);
    super.initState();
    focusNodeB0.addListener(_setDecorationBorderB0);
    focusNodeB1.addListener(_setDecorationBorderB1);
    focusNodeB2.addListener(_setDecorationBorderB2);
    focusNodeB3.addListener(_setDecorationBorderB3);
    focusNodeB4.addListener(_setDecorationBorderB4);
  }

  @override
  void dispose() {
    super.dispose();
    WidgetsBinding.instance.removeObserver(this);
    focusNodeB0.removeListener(_setDecorationBorderB0);
    focusNodeB0.dispose();
    focusNodeB1.removeListener(_setDecorationBorderB1);
    focusNodeB1.dispose();
    focusNodeB2.removeListener(_setDecorationBorderB2);
    focusNodeB2.dispose();
    focusNodeB3.removeListener(_setDecorationBorderB3);
    focusNodeB3.dispose();
    focusNodeB4.removeListener(_setDecorationBorderB4);
    focusNodeB4.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    itemWidth = MediaQuery.of(context).size.width / 3;
    return Scaffold(
      backgroundColor: Color(0xff277188),
      body:
          view1(), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Widget view1() {
    return Column(
      children: <Widget>[
        SizedBox(
          height: 20,
        ),
        TopWidget(),
        body1(),
        SizedBox(
          height: 20,
        ),
        BottomWidget(focusNodeB0),
        SizedBox(
          height: 20,
        ),
      ],
    );
  }

  @override
  void didChangeDependencies() {
    WidgetsBinding.instance.addPostFrameCallback(_onAfterRendering);
    super.didChangeDependencies();
  }

  @override
  void didUpdateWidget(Widget oldWidget) {
    WidgetsBinding.instance.addPostFrameCallback(_onAfterRendering);
    super.didUpdateWidget(oldWidget);
  }

  void _onAfterRendering(Duration timeStamp) {
    //这里编写获取元素大小和位置的方法
    RenderObject renderObject = context.findRenderObject();
    Size size = renderObject.paintBounds.size;
    print('onAfterRendering:');
    print(size.height);
    RenderObject _renderObject = _bodyKey.currentContext.findRenderObject();
    Size _size = _renderObject.paintBounds.size;
    print('_onAfterRendering:');
    print(_size.height);
    bodyHeight = _size.height;
    setState(() {});
    // Navigator.of(context).push(MaterialPageRoute(builder: (_) {
    //   return PermissionSamples();
    // }));
  }

  GlobalKey _bodyKey = new GlobalKey();
  double bodyHeight = 600;
  Widget image1() {
    return RawKeyboardListener(
      focusNode: focusNodeB0,
      onKey: (event) {
        if (event is RawKeyDownEvent && event.data is RawKeyEventDataAndroid) {
          RawKeyDownEvent rawKeyDownEvent = event;
          RawKeyEventDataAndroid rawKeyEventDataAndroid = rawKeyDownEvent.data;
          print("keyCode: ${rawKeyEventDataAndroid.keyCode}");
          switch (rawKeyEventDataAndroid.keyCode) {
            case 19: //KEY_UP
              break;
            case 20: //KEY_DOWN
              FocusScope.of(context).requestFocus(focusNode);
              break;
            case 21: //KEY_LEFT
              FocusScope.of(context).requestFocus(focusNodeB4);
              break;
            case 22: //KEY_RIGHT
              FocusScope.of(context).requestFocus(focusNodeB1);
              break;
            case 23: //KEY_CENTER
              break;
            default:
              break;
          }
        }
      },
      child: Expanded(
          child: Container(
        height: bodyHeight,
        decoration: getRectangleDecoration(colorB0),
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10)),
          ),
          elevation: 10,
          child: ClipRRect(
            child: Image.asset(
              'assets/hmjz.jpg',
              fit: BoxFit.cover,
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(10),
            ),
          ),
        ),
      )),
    );
  }

  Widget body1() {
    return Expanded(
      key: _bodyKey,
      child: Container(
        margin: EdgeInsets.all(5),
        child: Row(
          children: <Widget>[
            image1(),
            Expanded(
              child: Column(
                children: <Widget>[
                  RawKeyboardListener(
                    focusNode: focusNodeB1,
                    onKey: (event) {
                      if (event is RawKeyDownEvent &&
                          event.data is RawKeyEventDataAndroid) {
                        RawKeyDownEvent rawKeyDownEvent = event;
                        RawKeyEventDataAndroid rawKeyEventDataAndroid =
                            rawKeyDownEvent.data;
                        print("keyCode: ${rawKeyEventDataAndroid.keyCode}");
                        switch (rawKeyEventDataAndroid.keyCode) {
                          case 19: //KEY_UP
                            break;
                          case 20: //KEY_DOWN
                            FocusScope.of(context).requestFocus(focusNodeB2);
                            break;
                          case 21: //KEY_LEFT
                            FocusScope.of(context).requestFocus(focusNodeB0);
                            break;
                          case 22: //KEY_RIGHT
                            FocusScope.of(context).requestFocus(focusNodeB3);
                            break;
                          case 23: //KEY_CENTER
                            break;
                          default:
                            break;
                        }
                      }
                    },
                    child: Expanded(
                        child: Container(
                      width: itemWidth,
                      decoration: getRectangleDecoration(colorB1),
                      child: Card(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                        ),
                        elevation: 10,
                        child: ClipRRect(
                          child: Image.asset(
                            'assets/zqc.jpg',
                            fit: BoxFit.cover,
                          ),
                          borderRadius: BorderRadius.all(
                            Radius.circular(10),
                          ),
                        ),
                      ),
                    )),
                  ),
                  RawKeyboardListener(
                    focusNode: focusNodeB2,
                    onKey: (event) {
                      if (event is RawKeyDownEvent &&
                          event.data is RawKeyEventDataAndroid) {
                        RawKeyDownEvent rawKeyDownEvent = event;
                        RawKeyEventDataAndroid rawKeyEventDataAndroid =
                            rawKeyDownEvent.data;
                        print("keyCode: ${rawKeyEventDataAndroid.keyCode}");
                        switch (rawKeyEventDataAndroid.keyCode) {
                          case 19: //KEY_UP
                            FocusScope.of(context).requestFocus(focusNodeB1);
                            break;
                          case 20: //KEY_DOWN
                            FocusScope.of(context).requestFocus(focusNode);
                            break;
                          case 21: //KEY_LEFT
                            FocusScope.of(context).requestFocus(focusNodeB0);
                            break;
                          case 22: //KEY_RIGHT
                            FocusScope.of(context).requestFocus(focusNodeB4);
                            break;
                          case 23: //KEY_CENTER
                            break;
                          default:
                            break;
                        }
                      }
                    },
                    child: Expanded(
                        child: Container(
                      decoration: getRectangleDecoration(colorB2),
                      width: itemWidth,
                      child: Card(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                        ),
                        elevation: 10,
                        child: ClipRRect(
                          child: Image.asset(
                            'assets/lifeandpi.jpg',
                            fit: BoxFit.cover,
                          ),
                          borderRadius: BorderRadius.all(
                            Radius.circular(10),
                          ),
                        ),
                      ),
                    )),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Column(
                children: <Widget>[
                  RawKeyboardListener(
                    focusNode: focusNodeB3,
                    onKey: (event) {
                      if (event is RawKeyDownEvent &&
                          event.data is RawKeyEventDataAndroid) {
                        RawKeyDownEvent rawKeyDownEvent = event;
                        RawKeyEventDataAndroid rawKeyEventDataAndroid =
                            rawKeyDownEvent.data;
                        print("keyCode: ${rawKeyEventDataAndroid.keyCode}");
                        switch (rawKeyEventDataAndroid.keyCode) {
                          case 19: //KEY_UP
                            break;
                          case 20: //KEY_DOWN
                            FocusScope.of(context).requestFocus(focusNodeB4);
                            break;
                          case 21: //KEY_LEFT
                            FocusScope.of(context).requestFocus(focusNodeB1);
                            break;
                          case 22: //KEY_RIGHT
                            FocusScope.of(context).requestFocus(focusNodeB0);
                            break;
                          case 23: //KEY_CENTER
                            break;
                          default:
                            break;
                        }
                      }
                    },
                    child: Expanded(
                        child: Container(
                      width: itemWidth,
                      decoration: getRectangleDecoration(colorB3),
                      child: Card(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                        ),
                        elevation: 10,
                        child: ClipRRect(
                          child: Image.asset(
                            'assets/zzx.jpg',
                            fit: BoxFit.cover,
                          ),
                          borderRadius: BorderRadius.all(
                            Radius.circular(10),
                          ),
                        ),
                      ),
                    )),
                  ),
                  RawKeyboardListener(
                    focusNode: focusNodeB4,
                    onKey: (event) {
                      if (event is RawKeyDownEvent &&
                          event.data is RawKeyEventDataAndroid) {
                        RawKeyDownEvent rawKeyDownEvent = event;
                        RawKeyEventDataAndroid rawKeyEventDataAndroid =
                            rawKeyDownEvent.data;
                        print("keyCode: ${rawKeyEventDataAndroid.keyCode}");
                        switch (rawKeyEventDataAndroid.keyCode) {
                          case 19: //KEY_UP
                            FocusScope.of(context).requestFocus(focusNodeB3);
                            break;
                          case 20: //KEY_DOWN
                            FocusScope.of(context).requestFocus(focusNode);
                            break;
                          case 21: //KEY_LEFT
                            FocusScope.of(context).requestFocus(focusNodeB2);
                            break;
                          case 22: //KEY_RIGHT
                            FocusScope.of(context).requestFocus(focusNodeB0);
                            break;
                          case 23: //KEY_CENTER
                            break;
                          default:
                            break;
                        }
                      }
                    },
                    child: Expanded(
                        child: Container(
                      width: itemWidth,
                      decoration: getRectangleDecoration(colorB4),
                      child: Card(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                        ),
                        elevation: 10,
                        child: ClipRRect(
                          child: Image.asset(
                            'assets/mgdz.jpg',
                            fit: BoxFit.cover,
                          ),
                          borderRadius: BorderRadius.all(
                            Radius.circular(10),
                          ),
                        ),
                      ),
                    )),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class TopWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TopWidgetState();
  }
}

class TopWidgetState extends State<TopWidget> {
  String time = '';
  Timer timer;
  @override
  void initState() {
    super.initState();
    var now = DateTime.now();
    timer = Timer.periodic(Duration(seconds: 1), (Timer timer) {
      now = DateTime.now();
      setState(() {
        time = now.year.toString() +
            "-" +
            now.month.toString() +
            "-" +
            now.day.toString() +
            "  " +
            now.hour.toString() +
            ":" +
            now.minute.toString() +
            ":" +
            now.second.toString() +
            "  " +
            weekFormat(now.weekday);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      child: Row(
        children: <Widget>[
          Text(
            'Page',
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),
          Expanded(
            child: Container(),
          ),
          Text(
            time,
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),
        ],
      ),
      padding: EdgeInsets.all(10),
    );
  }
}

class BottomWidget extends StatefulWidget {
  FocusNode _focusNode;

  BottomWidget(this._focusNode);

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

class BottomWidgetState extends State<BottomWidget>
    with WidgetsBindingObserver {
  FocusNode _focusNode;
  BottomWidgetState(this._focusNode);
  FocusNode focusNode0 = FocusNode();
  FocusNode focusNode1 = FocusNode();
  FocusNode focusNode2 = FocusNode();
  FocusNode focusNode3 = FocusNode();
  FocusNode focusNode4 = FocusNode();

  Color color0 = Colors.transparent;
  Color color1 = Colors.transparent;
  Color color2 = Colors.transparent;
  Color color3 = Colors.transparent;
  Color color4 = Colors.transparent;
  bool init = false;

  _setDecorationBorder0() {
    setState(() {
      if (focusNode0.hasFocus) {
        color0 = Colors.orange;
      } else {
        color0 = Colors.transparent;
      }
    });
  }

  _setDecorationBorder1() {
    setState(() {
      if (focusNode1.hasFocus) {
        color1 = Colors.orange;
      } else {
        color1 = Colors.transparent;
      }
    });
  }

  _setDecorationBorder2() {
    setState(() {
      if (focusNode2.hasFocus) {
        color2 = Colors.orange;
      } else {
        color2 = Colors.transparent;
      }
    });
  }

  _setDecorationBorder3() {
    setState(() {
      if (focusNode3.hasFocus) {
        color3 = Colors.orange;
      } else {
        color3 = Colors.transparent;
      }
    });
  }

  _setDecorationBorder4() {
    setState(() {
      if (focusNode4.hasFocus) {
        color4 = Colors.orange;
      } else {
        color4 = Colors.transparent;
      }
    });
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    focusNode0.addListener(_setDecorationBorder0);
    focusNode1.addListener(_setDecorationBorder1);
    focusNode2.addListener(_setDecorationBorder2);
    focusNode3.addListener(_setDecorationBorder3);
    focusNode4.addListener(_setDecorationBorder4);
    focusNode = focusNode0;
  }

  @override
  void dispose() {
    super.dispose();
    WidgetsBinding.instance.removeObserver(this);
    focusNode0.removeListener(_setDecorationBorder0);
    focusNode0.dispose();
    focusNode1.removeListener(_setDecorationBorder1);
    focusNode1.dispose();
    focusNode2.removeListener(_setDecorationBorder2);
    focusNode2.dispose();
    focusNode3.removeListener(_setDecorationBorder3);
    focusNode3.dispose();
    focusNode4.removeListener(_setDecorationBorder4);
    focusNode4.dispose();
  }

  @override
  void didChangeDependencies() {
    WidgetsBinding.instance.addPostFrameCallback(_onAfterRendering);
    super.didChangeDependencies();
  }

  @override
  void didUpdateWidget(Widget oldWidget) {
    WidgetsBinding.instance.addPostFrameCallback(_onAfterRendering);
    super.didUpdateWidget(oldWidget);
  }

  void _onAfterRendering(Duration timeStamp) {
    //这里编写获取元素大小和位置的方法
    RenderObject renderObject = context.findRenderObject();
    Size size = renderObject.paintBounds.size;
    print(size.height);
  }

  GlobalKey _myKey = new GlobalKey();

  @override
  Widget build(BuildContext context) {
    if (!init) {
      FocusScope.of(context).requestFocus(focusNode0);
      init = true;
    }
    final sizeM = MediaQuery.of(context).size;
    print(sizeM.width);
    print(sizeM.height);
    return Row(
      key: _myKey,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        SizedBox(
          width: 10,
          height: 2,
        ),
        Column(
          children: <Widget>[
            RawKeyboardListener(
              focusNode: focusNode0,
              child: Container(
                decoration: getCircleDecoration(color0),
                child: Padding(
                  child: Card(
                    elevation: 5,
                    shape: CircleBorder(),
                    child: CircleAvatar(
                      child: Text(''),
                      backgroundImage: AssetImage("assets/icon_tv.png"),
                      radius: radius,
                    ),
                  ),
                  padding: EdgeInsets.all(padding),
                ),
              ),
              onKey: (RawKeyEvent event) {
                print('监听');
                if (event is RawKeyDownEvent &&
                    event.data is RawKeyEventDataAndroid) {
                  RawKeyDownEvent rawKeyDownEvent = event;
                  RawKeyEventDataAndroid rawKeyEventDataAndroid =
                      rawKeyDownEvent.data;
                  print("keyCode: ${rawKeyEventDataAndroid.keyCode}");
                  switch (rawKeyEventDataAndroid.keyCode) {
                    case 19: //KEY_UP
                      FocusScope.of(context).requestFocus(_focusNode);
                      break;
                    case 20: //KEY_DOWN
                      break;
                    case 21: //KEY_LEFT
                      FocusScope.of(context).requestFocus(focusNode4);
                      break;
                    case 22: //KEY_RIGHT
                      FocusScope.of(context).requestFocus(focusNode1);
                      break;
                    case 23: //KEY_CENTER
                      break;
                    default:
                      break;
                  }
                }
              },
            ),
            Text(
              'TV',
              style:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
            ),
          ],
        ),
        Column(
          children: <Widget>[
            RawKeyboardListener(
              focusNode: focusNode1,
              child: Container(
                decoration: getCircleDecoration(color1),
                child: Padding(
                  child: Card(
                    elevation: 5,
                    shape: CircleBorder(),
                    child: CircleAvatar(
                      child: Text(''),
                      backgroundImage: AssetImage("assets/icon_voice.png"),
                      radius: radius,
                    ),
                  ),
                  padding: EdgeInsets.all(padding),
                ),
              ),
              onKey: (RawKeyEvent event) {
                if (event is RawKeyDownEvent &&
                    event.data is RawKeyEventDataAndroid) {
                  RawKeyDownEvent rawKeyDownEvent = event;
                  RawKeyEventDataAndroid rawKeyEventDataAndroid =
                      rawKeyDownEvent.data;
                  print("keyCode: ${rawKeyEventDataAndroid.keyCode}");
                  switch (rawKeyEventDataAndroid.keyCode) {
                    case 19: //KEY_UP
                      FocusScope.of(context).requestFocus(_focusNode);
                      break;
                    case 20: //KEY_DOWN
                      break;
                    case 21: //KEY_LEFT
                      FocusScope.of(context).requestFocus(focusNode0);
                      break;
                    case 22: //KEY_RIGHT
                      FocusScope.of(context).requestFocus(focusNode2);
                      break;
                    case 23: //KEY_CENTER
                      break;
                    default:
                      break;
                  }
                }
              },
            ),
            Text(
              'Voice',
              style:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
            ),
          ],
        ),
        Column(
          children: <Widget>[
            RawKeyboardListener(
              focusNode: focusNode2,
              child: Container(
                decoration: getCircleDecoration(color2),
                child: Padding(
                  child: Card(
                    elevation: 5,
                    shape: CircleBorder(),
                    child: CircleAvatar(
                      child: Text(''),
                      backgroundImage: AssetImage("assets/icon_video.png"),
                      radius: radius,
                    ),
                  ),
                  padding: EdgeInsets.all(padding),
                ),
              ),
              onKey: (RawKeyEvent event) {
                if (event is RawKeyDownEvent &&
                    event.data is RawKeyEventDataAndroid) {
                  RawKeyDownEvent rawKeyDownEvent = event;
                  RawKeyEventDataAndroid rawKeyEventDataAndroid =
                      rawKeyDownEvent.data;
                  print("keyCode: ${rawKeyEventDataAndroid.keyCode}");
                  switch (rawKeyEventDataAndroid.keyCode) {
                    case 19: //KEY_UP
                      FocusScope.of(context).requestFocus(_focusNode);
                      break;
                    case 20: //KEY_DOWN
                      break;
                    case 21: //KEY_LEFT
                      FocusScope.of(context).requestFocus(focusNode1);
                      break;
                    case 22: //KEY_RIGHT
                      FocusScope.of(context).requestFocus(focusNode3);
                      break;
                    case 23: //KEY_CENTER
                      break;
                    default:
                      break;
                  }
                }
              },
            ),
            Text(
              'Video',
              style:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
            ),
          ],
        ),
        Column(
          children: <Widget>[
            RawKeyboardListener(
              focusNode: focusNode3,
              child: Container(
                decoration: getCircleDecoration(color3),
                child: Padding(
                  child: Card(
                    elevation: 5,
                    shape: CircleBorder(),
                    child: CircleAvatar(
                      child: Text(''),
                      backgroundImage: AssetImage("assets/icon_phone.png"),
                      radius: radius,
                    ),
                  ),
                  padding: EdgeInsets.all(padding),
                ),
              ),
              onKey: (RawKeyEvent event) {
                if (event is RawKeyDownEvent &&
                    event.data is RawKeyEventDataAndroid) {
                  RawKeyDownEvent rawKeyDownEvent = event;
                  RawKeyEventDataAndroid rawKeyEventDataAndroid =
                      rawKeyDownEvent.data;
                  print("keyCode: ${rawKeyEventDataAndroid.keyCode}");
                  switch (rawKeyEventDataAndroid.keyCode) {
                    case 19: //KEY_UP
                      FocusScope.of(context).requestFocus(_focusNode);
                      break;
                    case 20: //
                      break;
                    case 21: //KEY_LEFT
                      FocusScope.of(context).requestFocus(focusNode2);
                      break;
                    case 22: //KEY_RIGHT
                      FocusScope.of(context).requestFocus(focusNode4);
                      break;
                    case 23: //KEY_CENTER
                      Navigator.of(context).pushNamed('/home');
                      break;
                    default:
                      break;
                  }
                }
              },
            ),
            Text(
              'Phone',
              style:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
            ),
          ],
        ),
        Column(
          children: <Widget>[
            RawKeyboardListener(
              focusNode: focusNode4,
              child: Container(
                decoration: getCircleDecoration(color4),
                child: Padding(
                  child: Card(
                    elevation: 5,
                    shape: CircleBorder(),
                    child: CircleAvatar(
                      child: Text(''),
                      backgroundImage: AssetImage("assets/icon_pad.png"),
                      radius: radius,
                    ),
                  ),
                  padding: EdgeInsets.all(padding),
                ),
              ),
              onKey: (RawKeyEvent event) {
                if (event is RawKeyDownEvent &&
                    event.data is RawKeyEventDataAndroid) {
                  RawKeyDownEvent rawKeyDownEvent = event;
                  RawKeyEventDataAndroid rawKeyEventDataAndroid =
                      rawKeyDownEvent.data;
                  print("keyCode: ${rawKeyEventDataAndroid.keyCode}");
                  switch (rawKeyEventDataAndroid.keyCode) {
                    case 19: //KEY_UP
                      FocusScope.of(context).requestFocus(_focusNode);
                      break;
                    case 20: //KEY_DOWN
                      break;
                    case 21: //KEY_LEFT
                      FocusScope.of(context).requestFocus(focusNode3);
                      break;
                    case 22: //KEY_RIGHT
                      FocusScope.of(context).requestFocus(focusNode0);
                      break;
                    case 23: //KEY_CENTER
                      break;
                    default:
                      break;
                  }
                }
              },
            ),
            Text(
              'Pad',
              style:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
            ),
          ],
        ),
        SizedBox(
          width: 10,
          height: 2,
        ),
      ],
    );
  }
}

Decoration getCircleDecoration(Color colors) {
  return BoxDecoration(
      border: Border.all(width: borderWidth, color: colors),
      shape: BoxShape.circle);
}

Decoration getRectangleDecoration(Color colors) {
  List<BoxShadow> boxShadows = List();
  boxShadows.add(BoxShadow(color: Colors.orange[200]));
  boxShadows.add(BoxShadow(color: Colors.yellow[100]));
  boxShadows.add(BoxShadow(color: Colors.yellow[300]));
  List<Color> colorsGradient = List();
  colorsGradient.add(Colors.teal);
  colorsGradient.add(Colors.teal[200]);

  return BoxDecoration(
    border: Border.all(width: borderWidth, color: colors),
    borderRadius: BorderRadius.all(Radius.circular(10)),
    shape: BoxShape.rectangle,
  );
}

String weekFormat(int week) {
  switch (week) {
    case 1:
      return '星期一';
      break;
    case 2:
      return '星期二';
      break;
    case 3:
      return '星期三';
      break;
    case 4:
      return '星期四';
      break;
    case 5:
      return '星期五';
      break;
    case 6:
      return '星期六';
      break;
    case 7:
      return '星期日';
      break;
  }
}

关于Flutter TV开发就讲解这么多。

在这里插入图片描述

持续学习的工程师
关注
  • 10
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
buildAPKs：在Amazon，Android，Chromebook和Windows中的手持设备（智能手机或平板电脑）上真正快速构建APK APK请参阅https：buildapks.github.iodocsBuildAPKssetup开始构建APK。
02-03
buildAPKs：在Amazon，Android，Chromebook和Windows中的手持设备（智能手机或平板电脑）上真正快速构建APK APK请参阅https：buildapks.github.iodocsBuildAPKssetup开始构建APK。
ZY-Player-TV:ZY Player TV 应用，使用 Flutter 开发
05-30
ZY-Player-TV ZY Player TV app, developed with Flutter 1. 设置Flutter环境 1.1 按着 页面的指导,先安装好Flutter和Android Studio 1.2 打开Android Studio, 依次打开Tools->AVD Manager, 生成一个新的虚拟机. 我们这里生成一个Android TV, API level=22 的一个虚拟机.点击播放按钮就会开始运行该虚拟机. 1.3 在Android Studio,当可用设备列表出现"sdk google atv x86"字样的时候,点击后边的运行按钮 一切正常的话,你会看到如下运行结果
Flutter之环境搭建(小白教程)
程邓楠的博客
01-29 2045
这个章节我们学习如何安装`Flutter`，配置 `Flutter` 、`Android Studio` 环境，做开发的前置工作。环境搭建有点麻烦，特别是Android环境的安装，没有代理简直就是噩梦，要有耐心一起加油！
Flutter 移动应用开发实战课程-视频教程网盘链接提取码下载.txt
11-03
Flutter移动应用开发实战课程是一个实用性强的课程，旨在教授学员如何使用Flutter框架开发高质量的移动应用。课程涵盖了Flutter的基础知识和核心概念，并通过实际项目实践帮助学员掌握Flutter的开发技巧和最佳实践。无论你是初学者还是有一定经验的开发者，这门课程都能帮助你快速入门Flutter开发，实现你的移动应用开发梦想。 视频大小：4.1G
flutter优缺点_「译」为 JavaScript 开发者准备的 Flutter 指南
weixin_39849254的博客
11-30 150
Flutter 是一款跨平台的移动应用 SDK，可通过同一套代码构建高性能，高保真的 iOS 和 Android 应用。文档中提到 (https://flutter.io/technical-overview/): Flutter 包括一个 react 风格的框架 , 一个 2D 渲染引擎, 现成的组件, 和开发者工具。希望这篇文章能够为大多数 JavaScript 开发者提供快速简便的介绍，并且...
Flutter TV 应用的开发尝试 | 开发者说·DTalk
谷歌开发者
09-23 1573
本文原作者: 谭东，原文发布于公众号谭东 jay: https://mp.weixin.qq.com/s/GI5g-zdeRwc8_E2zPN8pMA我们之前一直在做 F...
P3992 [BJOI2017]开车
sky123博客
04-30 2万+
题目链接 题目描述 有 nnn 辆车，分别在 a1,a2,…,ana_1, a_2, \ldots , a_na1​,a2​,…,an​ 位置和 nnn 个加油站，分别在 b1,b2,…,bnb_1, b_2, \ldots ,b_nb1​,b2​,…,bn​ 位置。 每个加油站只能支持一辆车的加油，所以你要把这些车开到不同的加油站加油。一个车从 xxx 位置开到 yyy 位置的代价为 ∣x−y∣|x-y|∣x−y∣，问如何安排车辆，使得代价之和最小。 同时你有 qqq 个操作，每次操作会修改第 iii 辆
The Differences Between Successful People and Unsuccessful People
03-20 4万+
A few weeks ago I received a postcard in the mail from the CEO of Petra Coach, the creator of Align Software and a fellow member of Entrepreneurs Organization. I've never met him, but Andy Bailey an
mx51 TVOUT分析
热门推荐
kickxxx的专栏
09-21 7万+
1397 static int __init enable_tve_setup(char *options) 1398 { 1399     g_enable_tve = true; 1400 1401     return 1; 1402 } 1403 __set
流媒体开发之-音悦台TV解析
jwzhangjie的专栏
12-07 1万+
由于工作问题写博客不能连贯，很多个人开发者开发播放器的时候，基本上都是提供播放功能，没有提供网上资源，比较维护是很麻烦的，我们可以使用网上资源，最近业余在搞音乐部分，对于资源部分我也是使用网上现有的资源，比如音悦台里面有很多TV,我们可以解析他们的网页内容。下面就是解析其中一个网页的TV 首先确定你TV要实现的内容，封装一个类内容如下： package com.pigvideo.model;
草稿
Smiorld的博客
09-30 1万+
@TOC 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全...
为Android / Fire TV构建的Flutter小部件-Flutter开发
05-28
为Android / Fire TV构建的Flutter小部件。 Flutter正式不支持android TV，并且不支持DPad控制器。 我开发了一个小部件，它支持DPad并响应所有控制器事件。 使用RawKeyboard小部件。 通过使用此功能，您可以将移动应用程序转换为电视并支持所有单击和焦点事件。 还附带了一个电视应用程序演示。 Flutter TV DPad Flutter应用程序，用于处理电视D_pad导航。 入门只需在on_dpad_clic_widget.dart文件中找到名为DpadWidget的小部件。 此小部件有两种方法：1）Function onClick该方法支持Dpad键码23和简单的键盘键66 1）Function（布尔isFocused）onFocus此方法在发生吸引作用时返回true，而在控件移开时返回false。 有关更多详细信息，请导航到lib文件夹并检查on_dpad_clic_widget.dart文件
Flutter开发之设置应用名称及图标的教程
08-19
主要介绍了Flutter设置应用名称及图标的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
flutter-tvos-demo:使用自定义Flutter引擎的Apple TV Flutter演示应用程序（tvos）
05-15
Apple TV颤振Flutter引擎+测试应用程序的修改，以演示Flutter应用程序在Apple TV上运行该项目（和所提及的Liberty Global存储库）仅用于测试目的！ Flutter和相关徽标是Google LLC的商标。我们不受Google LLC的认可...
Flutter移动应用开发实战训练介绍.rar
最新发布
04-03
Flutter作为跨平台应用开发的最热门技术，Flutter从已发布就受到广大开发者的追捧。使用Flutter技术开发的应用不仅体验上无限接近原生应用，在开发效率上也是其他技术无法比拟的。随着其开发者社区的不断壮大，...
Flutter完整开发实战详解系列.pdf
07-15
Flutter完整开发实战详解系列.pdf
flutter开发移动应用.zip
03-18
flutter开发移动应用.zip
Flutter开发之Dart语言基础
01-27
Flutter是Google开发的一款用于帮助开发者在iOS和Android两个平台构建高质量原生应用的全新移动UI框架。说到Flutter，很多同学可能会将它和下面的几个词关联起来：新兴的、移动端、动态化、跨平台、开发框架。简单来...
Flutter 跨平台应用开发简单的示例
01-13
Flutter 跨平台应用开发简单的示例，常见组件效果，路由混合开发示例
flutter 如何开发TV应用
03-14
Flutter 可以通过使用 Flutter TV 库来开发 TV 应用。Flutter TV 库提供了一些特定于 TV 的小部件和布局，以便在 TV 上构建应用程序。此外，Flutter 还提供了一个 TV 版本的模拟器，可以帮助开发人员在开发过程中测试应用程序。具体的开发步骤可以参考 Flutter 官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

持续学习的工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值