Flutter可点击电视界面插件clickable

Flutter可点击电视界面插件clickable_tv的使用

ClickableTv 是一个适用于Android TV应用的可点击对象组件。

使用方法：

ClickableTv(
  child: ListTile(
    title: Text(list[index].itemName),
  ),
  onClick: () {
    setState(() {
      _value = list[index].itemValue;
    });
  },
);

完整示例代码

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 创建一个包含列表项的列表
  List<ListModel> list = [
    ListModel("item1", "item1 value"),
    ListModel("item2", "item2 value"),
    ListModel("item3", "item3 value"),
  ];

  // 当前选中的值
  String _value = "未点击";

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            // 构建一个列表视图
            ListView.builder(
              shrinkWrap: true,
              itemCount: list.length,
              itemBuilder: (context, index) {
                return ClickableTv(
                  child: ListTile(
                    title: Text(list[index].itemName),
                  ),
                  onClick: () {
                    // 点击时更新状态
                    setState(() {
                      _value = list[index].itemValue;
                    });
                  },
                );
              },
            ),
            // 显示当前选中的值
            Center(
              child: Padding(
                padding: const EdgeInsets.fromLTRB(0, 0, 0, 10),
                child: Text(
                  "已点击项目: $_value",
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    decoration: TextDecoration.underline,
                    fontStyle: FontStyle.italic,
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

// 列表项模型类
class ListModel {
  String itemName;
  String itemValue;
  ListModel(this.itemName, this.itemValue);
}

更多关于Flutter可点击电视界面插件clickable_tv的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

vueper 1楼

更多关于Flutter可点击电视界面插件clickable_tv的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

clickable_tv 是一个用于 Flutter 的插件，旨在帮助开发者轻松创建可点击的电视界面。它特别适用于需要在电视或大屏幕上构建交互式界面的应用场景。以下是关于如何使用 clickable_tv 插件的详细指南。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 clickable_tv 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  clickable_tv: ^0.1.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入 clickable_tv 插件。

import 'package:clickable_tv/clickable_tv.dart';

3. 使用 `ClickableTV` 组件

ClickableTV 是 clickable_tv 插件提供的一个主要组件，它允许你创建一个可点击的电视界面。

基本用法

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Clickable TV Example'),
      ),
      body: Center(
        child: ClickableTV(
          onTap: () {
            print('Item Clicked!');
          },
          child: Container(
            padding: EdgeInsets.all(20),
            color: Colors.blue,
            child: Text(
              'Click Me!',
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中，ClickableTV 包裹了一个 Container，当用户点击这个 Container 时，onTap 回调会被触发。

焦点管理

在电视界面中，焦点管理是非常重要的。ClickableTV 提供了焦点管理功能，你可以通过 focusNode 属性来手动控制焦点。

class MyHomePage extends StatelessWidget {
  final FocusNode _focusNode = FocusNode();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Clickable TV Example'),
      ),
      body: Center(
        child: ClickableTV(
          focusNode: _focusNode,
          onTap: () {
            print('Item Clicked!');
          },
          child: Container(
            padding: EdgeInsets.all(20),
            color: Colors.blue,
            child: Text(
              'Click Me!',
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}

自定义焦点样式

你可以通过 focusColor 和 unfocusColor 属性来自定义焦点和未焦点状态下的颜色。

ClickableTV(
  focusColor: Colors.red,
  unfocusColor: Colors.blue,
  onTap: () {
    print('Item Clicked!');
  },
  child: Container(
    padding: EdgeInsets.all(20),
    child: Text(
      'Click Me!',
      style: TextStyle(color: Colors.white, fontSize: 20),
    ),
  ),
)

多个可点击项

你可以在一个界面中使用多个 ClickableTV 组件来创建复杂的交互式界面。

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Clickable TV Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ClickableTV(
              onTap: () {
                print('Item 1 Clicked!');
              },
              child: Container(
                padding: EdgeInsets.all(20),
                color: Colors.blue,
                child: Text(
                  'Item 1',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
            SizedBox(height: 20),
            ClickableTV(
              onTap: () {
                print('Item 2 Clicked!');
              },
              child: Container(
                padding: EdgeInsets.all(20),
                color: Colors.green,
                child: Text(
                  'Item 2',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

4. 处理导航

在电视界面中，通常需要处理导航事件（如方向键的上下左右）。你可以使用 Focus 和 FocusScope 来管理导航。

class MyHomePage extends StatelessWidget {
  final FocusNode _focusNode1 = FocusNode();
  final FocusNode _focusNode2 = FocusNode();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Clickable TV Example'),
      ),
      body: Center(
        child: FocusScope(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ClickableTV(
                focusNode: _focusNode1,
                onTap: () {
                  print('Item 1 Clicked!');
                },
                child: Container(
                  padding: EdgeInsets.all(20),
                  color: Colors.blue,
                  child: Text(
                    'Item 1',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
              SizedBox(height: 20),
              ClickableTV(
                focusNode: _focusNode2,
                onTap: () {
                  print('Item 2 Clicked!');
                },
                child: Container(
                  padding: EdgeInsets.all(20),
                  color: Colors.green,
                  child: Text(
                    'Item 2',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

5. 处理焦点移动

你可以使用 Focus 和 FocusScope 来处理焦点移动的逻辑。例如，当用户按下方向键时，你可以将焦点从一个 ClickableTV 移动到另一个 ClickableTV。

class MyHomePage extends StatelessWidget {
  final FocusNode _focusNode1 = FocusNode();
  final FocusNode _focusNode2 = FocusNode();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Clickable TV Example'),
      ),
      body: Center(
        child: FocusScope(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ClickableTV(
                focusNode: _focusNode1,
                onTap: () {
                  print('Item 1 Clicked!');
                },
                onKey: (FocusNode node, RawKeyEvent event) {
                  if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
                    FocusScope.of(context).requestFocus(_focusNode2);
                    return true;
                  }
                  return false;
                },
                child: Container(
                  padding: EdgeInsets.all(20),
                  color: Colors.blue,
                  child: Text(
                    'Item 1',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
              SizedBox(height: 20),
              ClickableTV(
                focusNode: _focusNode2,
                onTap: () {
                  print('Item 2 Clicked!');
                },
                onKey: (FocusNode node, RawKeyEvent event) {
                  if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
                    FocusScope.of(context).requestFocus(_focusNode1);
                    return true;
                  }
                  return false;
                },
                child: Container(
                  padding: EdgeInsets.all(20),
                  color: Colors.green,
                  child: Text(
                    'Item 2',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Flutter可点击电视界面插件clickable_tv的使用