Flutter应用中两个GetXBuilder管理的特定页面卡顿（掉帧）问题排查求助

大家好，我最近碰到个棘手的问题：整个Flutter应用大部分页面运行都很流畅，但有两个通过GetXBuilder切换的Tab页面，一切过去就开始卡顿，感觉像手机卡住了一样，切回其他页面就立刻恢复正常。

目前观察到的现象 #

• 切换到这两个页面时，Logcat反复弹出掉帧警告：

  I/Choreographer( 3867): Skipped 97 frames! The application may be doing too much work on its main thread.
  

• 同时还会无休无止地打印这条重复日志：

  D/ActivityThread( 3867): Package [com.google.android.calendar] reported as REPLACED, but missing application info. Assuming REMOVED.
  

  这条日志循环出现，频率很高。

其中一个卡顿页面的完整代码（TriviaTab） #

class TriviaTab extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => triviaTab();
}

class triviaTab extends State<TriviaTab> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: double.infinity,
          decoration: BoxDecoration(
            color: whiteColor.withOpacity(0.1),
            border: Border.all(color: whiteColor.withOpacity(0.4)),
            borderRadius: BorderRadius.circular(20),
          ),
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(children: [
              Row(
                children: [
                  SvgPicture.asset(Assets.iconsWinnerIconOutline),
                  sB(w: 8),
                  commonText(text: "Timed Awards", txtSize: 18,fontWeight: FontWeight.w700)
                ],),
              sB(w: 6),
              Align(
                alignment: Alignment.centerLeft,
                child: commonText(text: 'Resets August 1st', txtSize: 14,color: textColor2)),
              sB(h: 26),
              commonText(text: Current_Reward, txtSize: 14,fontWeight: FontWeight.bold,color: yellowColor),
              sB(h: 24),
              SvgPicture.asset(Assets.iconsAwardTrophy),
              sB(h: 16),
              commonText(text: '187 points', txtSize: 20,fontWeight: FontWeight.bold),
              sB(h: 6),
              commonText(text: 'Time remaining when answering correctly', txtSize: 14,color: textColor2),
              sB(h: 24),
              Container(width: double.infinity,
                decoration: BoxDecoration(color: whiteColor.withOpacity(0.15), borderRadius: BorderRadius.circular(8), ),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(children: [
                    Row(children: [
                      commonText(text: 'Bronze (150-200)', txtSize: 12,fontWeight: FontWeight.w600),
                      Spacer(),
                      sB( h: 20, w: 15, child: SvgPicture.asset(Assets.iconsAwardTrophy))
                    ],),
                    sB(h: 8),
                    LinearProgressIndicator(
                      backgroundColor: Colors.grey
                          .withOpacity(0.4),
                      borderRadius: BorderRadius.circular(
                        25,
                      ),
                      color: whiteColor,
                      minHeight: 10,
                      value: 100 / 100,
                    ),
                    sB(h: 8),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: commonText(text: "EARNED", txtSize: 10,fontWeight: FontWeight.w600,color: Colors.yellow)),
                    sB(h:20),
                    Row(children: [
                      commonText(text: 'Silver (200-250)', txtSize: 12,fontWeight: FontWeight.w600),
                      Spacer(),
                      sB( h: 20, w: 15, child: SvgPicture.asset(Assets.iconsMyAwardSilverTrophy))
                    ],),
                    sB(h: 8),
                    LinearProgressIndicator(
                      backgroundColor: Colors.grey
                          .withOpacity(0.4),
                      borderRadius: BorderRadius.circular(
                        25,
                      ),
                      color: whiteColor,
                      minHeight: 10,
                      value: 87 / 100,
                    ),
                    sB(h: 8),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: commonText(text:'13 points to go', txtSize: 10,fontWeight: FontWeight.w500,)),
                    sB(h:20),
                    Row(children: [
                      commonText(text: 'Gold (250-300)', txtSize: 12,fontWeight: FontWeight.w600),
                      Spacer(),
                      sB( h: 20, w: 15, child: SvgPicture.asset(Assets.iconsMyAwardGoldTrophy))
                    ],),
                    sB(h: 8),
                    LinearProgressIndicator(
                      backgroundColor: Colors.grey
                          .withOpacity(0.4),
                      borderRadius: BorderRadius.circular(
                        25,
                      ),
                      color: whiteColor,
                      minHeight: 10,
                      value: 37 / 100,
                    ),
                    sB(h: 8),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: commonText(text:'63 points to go', txtSize: 10,fontWeight: FontWeight.w500,)),
                  ],),
                ),
              ),
            ],),
          ),
        ),
        sB(h: 24),
        Container(
          width: double.infinity,
          decoration: BoxDecoration(
            color: whiteColor.withOpacity(0.1),
            border: Border.all(color: whiteColor.withOpacity(0.4)),
            borderRadius: BorderRadius.circular(20),
          ),
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(children: [
              Row(
                children: [
                  SvgPicture.asset(Assets.iconsUltimatedAwards),
                  sB(w: 8),
                  commonText(text: "Untimed awards", txtSize: 18,fontWeight: FontWeight.w700)
                ],),
              sB(w: 6),
              Align(
                alignment: Alignment.centerLeft,
                child: commonText(text: 'Resets August 1st', txtSize: 14,color: textColor2)),
              sB(h: 26),
              commonText(text: Current_Reward, txtSize: 14,fontWeight: FontWeight.bold,color: yellowColor),
              sB(h: 24),
              SvgPicture.asset(Assets.iconsAwardMadel),
              sB(h: 16),
              commonText(text: '25 correct', txtSize: 20,fontWeight: FontWeight.bold),
              sB(h: 6),
              commonText(text: 'Answers regardless of time', txtSize: 14,color: textColor2),
              sB(h: 24),
              Container(width: double.infinity,
                decoration: BoxDecoration(color: whiteColor.withOpacity(0.15), borderRadius: BorderRadius.circular(8), ),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(children: [
                    Row(children: [
                      commonText(text: 'Bronze (16)', txtSize: 12,fontWeight: FontWeight.w600),
                      Spacer(),
                      // 原代码此处内容未完整提供
                    ],),
                  ],),
                ),
              ),
            ],),
          ),
        ),
      ],
    );
  }
}

我的几个疑问 #

1. 这两个页面都是通过GetXBuilder切换的，为什么只有它们会触发卡顿？其他同类型的Tab页面完全正常。
2. 那个关于com.google.android.calendar的日志，会不会和卡顿有关联？还是只是无关的系统日志？
3. 从代码看，这个页面只是展示静态内容和进度条，没有复杂计算或网络请求，为什么会导致主线程过载？

有没有大佬能帮我分析下可能的原因，或者给一些具体的排查方向？万分感谢！

内容来源于stack exchange