Flutter中IndexedStack初始化时非当前页面触发键盘弹出问题求助

问题核心在于IndexedStack会一次性初始化所有子Widget，哪怕当前显示的是HomeScreen，SearchScreen也会被提前创建，其中设置了autofocus: true的TextField会直接触发键盘弹出。以下是两种针对性的解决方式：

方案一：按需延迟初始化页面Widget #

修改GetX控制器，只在第一次切换到对应页面时才创建Widget实例，从根源避免SearchScreen提前初始化：

class MainTabBarController extends GetxController {
  int pageIndex = 0;
  // 用可空列表缓存已创建的页面
  final List<Widget?> _cachedPages = List.filled(5, null);

  // 获取对应索引的页面，未创建则初始化
  Widget getTabPage(int index) {
    if (_cachedPages[index] == null) {
      switch (index) {
        case 0:
          _cachedPages[index] = HomeScreen();
          break;
        case 1:
          _cachedPages[index] = SearchScreen();
          break;
        case 2:
          _cachedPages[index] = const Placeholder(color: Colors.orange);
          break;
        case 3:
          _cachedPages[index] = const Placeholder(color: Colors.green);
          break;
        case 4:
          _cachedPages[index] = const Placeholder(color: Colors.indigo);
          break;
      }
    }
    return _cachedPages[index]!;
  }
}

然后调整页面主体的IndexedStack使用逻辑：

body: GetBuilder<MainTabBarController>(builder: (controller) {
  return IndexedStack(
    index: controller.pageIndex,
    children: List.generate(5, (index) => controller.getTabPage(index)),
  );
}),

这样SearchScreen只会在第一次切换到该标签页时被初始化，此时autofocus: true才会触发键盘弹出，完全符合预期。

方案二：动态控制TextField焦点 #

如果不想修改页面初始化逻辑，可以去掉autofocus: true，改为在页面切换到SearchScreen时手动请求焦点：

方式1：结合GetX监听页面索引变化 #

修改SearchScreen，通过监听控制器的pageIndex来控制焦点状态：

class SearchScreen extends StatelessWidget {
  const SearchScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final focusNode = FocusNode();
    final tabController = Get.find<MainTabBarController>();

    // 监听页面索引变化
    ever(tabController.pageIndex, (currentIndex) {
      if (currentIndex == 1) {
        // 延迟请求焦点，确保页面已完成渲染
        WidgetsBinding.instance.addPostFrameCallback((_) {
          focusNode.requestFocus();
        });
      } else {
        // 离开当前标签时自动失去焦点
        focusNode.unfocus();
      }
    });

    return Scaffold(
      body: TextField(
        focusNode: focusNode,
        decoration: const InputDecoration(hintText: "搜索..."),
      ),
    );
  }
}

方式2：监听页面生命周期 #

如果是StatefulWidget，可以通过生命周期监听页面可见状态来触发焦点：

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

  @override
  State<SearchScreen> createState() => _SearchScreenState();
}

class _SearchScreenState extends State<SearchScreen> with WidgetsBindingObserver {
  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 页面处于活跃状态且是当前路由时，请求焦点
    if (state == AppLifecycleState.resumed && ModalRoute.of(context)?.isCurrent == true) {
      _focusNode.requestFocus();
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TextField(
        focusNode: _focusNode,
        decoration: const InputDecoration(hintText: "搜索..."),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Sahil