Flutter Android TV应用导航焦点异常问题求助

针对你遇到的NavigationRail切换后ChannelsPage焦点异常、启动时GridView首个元素无法获焦的问题，可通过以下步骤修复：

1. 为ChannelsPage添加焦点自动请求与状态保持 #

页面启动时延迟请求GridView的焦点，同时保持页面状态避免切换时重建导致焦点丢失：

class ChannelsPage extends StatefulWidget {
  const ChannelsPage({super.key});

  @override
  State<ChannelsPage> createState() => _ChannelsPageState();
}

class _ChannelsPageState extends State<ChannelsPage> with AutomaticKeepAliveClientMixin {
  late FocusNode _gridFocusNode;

  @override
  bool get wantKeepAlive => true; // 保留页面状态，防止切换时重建

  @override
  void initState() {
    super.initState();
    _gridFocusNode = FocusNode();
    // 页面挂载完成后请求焦点
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (mounted) _gridFocusNode.requestFocus();
    });
  }

  @override
  void dispose() {
    _gridFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用，配合状态保持
    return Scaffold(
      body: GridView.builder(
        focusNode: _gridFocusNode,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          childAspectRatio: 1.5,
        ),
        itemCount: 20,
        itemBuilder: (context, index) {
          return Focus(
            canRequestFocus: true,
            child: InkWell(
              onTap: () {},
              focusColor: Colors.blue.withOpacity(0.3),
              child: Container(
                margin: const EdgeInsets.all(8),
                color: Colors.grey[200],
                child: Center(child: Text('Channel $index')),
              ),
            ),
          );
        },
      ),
    );
  }
}

2. 优化NavigationRail切换时的焦点转移 #

在NavigationRail的选中回调中，主动触发ChannelsPage的焦点请求（需给ChannelsPage绑定GlobalKey）：

// 全局定义ChannelsPage的Key
final _channelsPageKey = GlobalKey<_ChannelsPageState>();

class CustomNavigationRail extends StatelessWidget {
  final int selectedIndex;
  final ValueChanged<int> onDestinationSelected;

  const CustomNavigationRail({
    super.key,
    required this.selectedIndex,
    required this.onDestinationSelected,
  });

  @override
  Widget build(BuildContext context) {
    return NavigationRail(
      selectedIndex: selectedIndex,
      onDestinationSelected: (index) {
        onDestinationSelected(index);
        // 切换到ChannelsPage时（假设索引为1），请求GridView焦点
        if (index == 1) {
          _channelsPageKey.currentState?._gridFocusNode.requestFocus();
        }
      },
      destinations: const [
        NavigationRailDestination(
          icon: Icon(Icons.home),
          label: Text('Home'),
        ),
        NavigationRailDestination(
          icon: Icons.tv,
          label: Text('Channels'),
        ),
      ],
    );
  }
}

// 使用ChannelsPage时绑定Key
ChannelsPage(key: _channelsPageKey)

3. 额外注意事项 #

• 确保GridView的每个item都通过Focus组件包裹，并设置canRequestFocus: true，保证元素可被聚焦。
• 页面容器使用IndexedStack而非直接替换widget，避免页面切换时销毁重建，进一步稳定焦点状态。
• 检查AndroidManifest.xml中是否配置了TV相关属性：

  <activity
    android:name=".MainActivity"
    android:exported="true"
    android:theme="@style/LaunchTheme"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize">
    <!-- TV 配置 -->
    <intent-filter>
      <action android:name="android.intent.action.MAIN"/>
      <category android:name="android.intent.category.LEANBACK_LAUNCHER"/>
    </intent-filter>
  </activity>
  

内容的提问来源于stack exchange，提问作者Mohammed rida Zilat