[Flutter翻译]将Android TV支持添加到您的Flutter应用中

2,473 阅读4分钟

原文地址:medium.com/@pcmushthaq…

原文作者:medium.com/@pcmushthaq…

发布时间:2020年8月15日-4分钟阅读

安装在安卓电视模拟器上的应用程序示例

在本文中,您可以了解如何为您现有的应用程序添加支持,以便在Android电视上运行,以及如何使用遥控器实现导航。

注意:本文是为已经熟悉flutter基础知识的开发者准备的。

在这里,我们将以Flutter自带的演示计数器应用的修改版为例。


这是我们将工作的代码,如果你不熟悉它。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage(title: 'Flutter Demo Home Page'),
      );
    
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton:
            FloatingActionButton(
              focusColor: Colors.green,
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            
        ));
  }
}

如果你能在Android电视设备或模拟器上安装这个应用程序,你可能可以运行该应用程序。但是,该应用程序将不会响应您的远程选择按钮。为了让这个问题得到解决,我们必须用Shortcuts Widget来包装MaterialApp,它允许我们为按下的按钮指定一个动作。

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

现在,让我们为我们的App增加一个功能,以便更好地理解App在电视设备上的工作。我们将添加一个函数来递减计数器。

void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

而我们再增加一个浮动动作按钮来触发这个功能。因此,我们将用一个包含两个浮动动作按钮的Row来替换原来的FloatingActionButton。我们将使用一个SizedBox来提供一些padding。

floatingActionButton: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            FloatingActionButton(
              focusColor: Colors.green,
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
            SizedBox(
              width: 10,
            ),
            FloatingActionButton(
              focusColor: Colors.red,
              onPressed: _decrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.remove),
            ),
          ],
        )

注意:请注意,我们添加了focusColor属性。这在电视应用中是很重要的,因为它们可以帮助用户识别当前选择的是哪个按钮。

现在我们已经完成了Dart代码的编写,但我们仍然需要修改一些安卓项目的设置。


配置电视应用

电视设备在主屏幕上显示一个横幅而不是应用图标。因此,我们必须创建一个320x180 px大小的横幅,将其命名为banner.png,并将其复制到android/app/src/main/res/drawable文件夹。

要将横幅添加到你的应用程序中,在AndroidManifest.xml中对横幅进行如下描述。

<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="mytv"
    android:banner="@drawable/banner"
    android:icon="@mipmap/ic_launcher" >

    ...
</application>

一个打算在电视设备上运行的应用程序必须在其清单中声明一个电视的启动器活动。它使用LEANBACK_LAUNCHER意图过滤器来实现这一点。该过滤器将您的应用程序识别为已启用电视,并让Google Play将其识别为电视应用程序。当用户在电视主屏幕上选择您的应用时,该意图会识别要启动的活动。

要启用该功能,请在AndroidManifest.xml文件中添加粗体字行到int-filter块。

<intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LEANBACK_LAUNCHER"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>

现在声明你的应用使用Android TV所要求的Leanback用户界面。如果你开发的应用既能在移动设备(手机、可穿戴设备、平板电脑等)上运行,也能在Android TV上运行,请将required属性值设置为false。如果你将required属性值设置为true,你的应用将只在使用Leanback UI的设备上运行。

<manifest>
    <uses-feature android:name="android.software.leanback"
        android:required="false" />
    ...
</manifest>

打算在电视设备上运行的应用程序不依赖触摸屏进行输入。为了明确这一点,您的电视应用的清单必须声明不需要 android.hardware.touchscreen 功能。此设置可确定您的应用程序能够在电视设备上运行,并且是您的应用程序在 Google Play 中被视为电视应用程序的必要条件。

<manifest>
    <uses-feature android:name="android.hardware.touchscreen"
              android:required="false" />
    ...
</manifest>

就是这样,你已经完成了对Android TV应用的设置。你已经完成了Android TV的应用设置。要了解更多关于android TV开发的信息,请查看这里的官方文档。

你可以在这里看到示例项目。


通过( www.DeepL.com/Translator )(免费版)翻译