Flutter问题：键盘弹出时如何阻止Widget与应用图标重建？

问题背景 #

• 最初因使用MediaQuery导致键盘弹出时Widget重建，尝试用MethodChannel获取状态栏高度替代MediaQuery设置顶部内边距，问题仍未解决
• 目前换回MediaQuery以减少冗余代码，但应用图标及相关Widget在键盘弹出时依旧会重建，使用device_apps: ^2.2.0插件展示应用列表及图标

解决方案 #

1. 隔离MediaQuery的窗口依赖 #

避免在Widget树顶层直接依赖MediaQuery，改用LayoutBuilder包裹，仅在初始化时获取一次状态栏高度，或者将高度存储在State中：

return LayoutBuilder(
  builder: (context, constraints) {
    // 仅获取一次状态栏高度，避免因窗口变化触发重建
    final statusBarHeight = MediaQueryData.fromView(View.of(context)).padding.top;
    return Padding(
      padding: EdgeInsets.only(top: statusBarHeight, left: 10, right: 10),
      child: DraggableScrollableSheet(
        initialChildSize: 1.0,
        minChildSize: 0.99,
        maxChildSize: 1.0,
        expand: true,
        snap: true,
        builder: (context, scrollController) {
          // ... 原有Sheet内容代码
        },
      ),
    );
  },
);

2. 优化子Widget为可缓存的const构造 #

确保AppGridItem和AppListItem使用const构造函数（参数需为不可变类型），让Flutter缓存这些Widget，避免不必要的重建：

// 示例：修改AppGridItem为const构造
class AppGridItem extends StatelessWidget {
  final AppInfo appls;
  final Color themeTextColor;
  final Function addToDock;
  // ... 其他参数

  const AppGridItem({
    super.key,
    required this.appls,
    required this.themeTextColor,
    required this.addToDock,
    // ... 其他必填参数
  });

  @override
  Widget build(BuildContext context) {
    // ... 原有构建逻辑
  }
}

3. 缩小setState的作用范围 #

当前在TextField的onChanged中调用setState会触发整个Widget树重建，将搜索状态提升到父Widget，或使用状态管理工具（如Provider、Riverpod），仅刷新需要更新的搜索结果区域：

// 父Widget管理搜索状态示例
class ParentDrawer extends StatefulWidget {
  @override
  State<ParentDrawer> createState() => _ParentDrawerState();
}

class _ParentDrawerState extends State<ParentDrawer> {
  final TextEditingController _textEditingController = TextEditingController();

  void _handleSearchChanged(String value) {
    setState(() {
      widget.appops.searchApp(context, value);
    });
  }

  @override
  Widget build(BuildContext context) {
    return YourCurrentWidget(
      textEditingController: _textEditingController,
      onSearchChanged: _handleSearchChanged,
      // ... 其他参数
    );
  }
}

4. 保持列表项状态 #

让AppGridItem或AppListItem混入AutomaticKeepAliveClientMixin，防止列表项因滚动或窗口变化被销毁重建：

class AppGridItem extends StatefulWidget {
  // ... 参数定义

  const AppGridItem({super.key, required this.appls, /* ... */});

  @override
  State<AppGridItem> createState() => _AppGridItemState();
}

class _AppGridItemState extends State<AppGridItem> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 启用状态保持

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用super.build
    // ... 原有图标和名称的构建逻辑
  }
}

5. 拆分DraggableScrollableSheet内容为独立Widget #

将DraggableScrollableSheet的builder内容提取为独立的Stateless/StatefulWidget，减少重建范围：

class SheetContent extends StatelessWidget {
  final ScrollController scrollController;
  final Color themeTextColor;
  final AppOps appops;
  final bool setIcon;
  // ... 其他所需参数

  const SheetContent({
    super.key,
    required this.scrollController,
    required this.themeTextColor,
    required this.appops,
    required this.setIcon,
    // ... 其他参数
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      // ... 原有Column内的搜索栏、网格/列表代码
    );
  }
}

// 使用时
DraggableScrollableSheet(
  // ... 原有参数
  builder: (context, scrollController) {
    return SheetContent(
      scrollController: scrollController,
      themeTextColor: widget.themeTextColor,
      appops: widget.appops,
      setIcon: widget.setIcon,
      // ... 传递其他参数
    );
  },
)

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