Flutter应用Profile/Release模式下部分UI元素不渲染问题求助

问题描述 #

我正在开发一款Flutter应用，遇到以下问题：应用在Profile/Release模式下启动时，onboardingContainer组件无法渲染，已确认不是路由页面问题。执行flutter clean和flutter pub get后，Profile模式首次运行正常，但重启后问题复现。已尝试过升级Flutter（后因调试循环回退）、用SizedBox嵌套DecoratedBox修改UI、回退至iOS可用版本，均未解决。

涉及代码（SplashView） #

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

  @override
  State<SplashView> createState() => _SplashViewState();
}

class _SplashViewState extends State<SplashView> {
  @override
  Widget build(BuildContext context) {
    return BaseView<SplashViewModel>(
        model: SplashViewModel(),
        onModelReady: (model) async => await model.init(),
        builder: (context, model, _) {
          return Scaffold(
            body: Container(
              height: MediaQuery.sizeOf(context).height,
              width: double.infinity,
              decoration: const BoxDecoration(
                color: AppColors.primary,
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  splashLogo(),
                  80.verticalGap,
                  onboardingContainer(model),
                ],
              ),
            ),
          );
        });
  }

  Widget onboardingContainer(SplashViewModel model) {
    return Container(
      height: 390,
      padding: const EdgeInsets.symmetric(vertical: 35),
      width: model.size.width,
      decoration: const BoxDecoration(
        color: AppColors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30),
          topRight: Radius.circular(30),
        ),
      ),
      child: SingleChildScrollView(
        child: Column(
          children: [
            onboardingSlider(model),
            28.verticalGap,
            onboardingText(model),
            15.verticalGap,
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 45),
              child: AppButton.primary(
                title: "Create an account",
                onTap: () {
                  model.goToSignup(context);
                },
              ),
            ),
            6.verticalGap,
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 45),
              child: AppButton.ghostPrimary(
                  title: "Login",
                  onTap: () {
                    model.goToLogin(context);
                  }),
            ),
            35.verticalGap,
            onboardingLegalText(model)
          ],
        ),
      ),
    );
  }

  SizedBox onboardingLegalText(SplashViewModel model) {
    return SizedBox(
        width: MediaQuery.of(context).size.width * .8,
        child: RichText(
          text: TextSpan(children: [
            TextSpan(
              text:
                  "By tapping Create an account and using blue, you agree to our ",
              style:
                  AppTextStyles.smallText.copyWith(color: AppColors.textColor),
            ),
            TextSpan(
              text: "Terms ",
              recognizer: TapGestureRecognizer()..onTap = model.launchTerms,
              style: AppTextStyles.smallText.copyWith(
                fontWeight: FontWeight.w500,
                color: AppColors.primary,
              ),
            ),
            TextSpan(
              text: "and ",
              style:
                  AppTextStyles.smallText.copyWith(color: AppColors.textColor),
            ),
            TextSpan(
              text: "Privacy policy",
              recognizer: TapGestureRecognizer()..onTap = model.launchPrivacy,
              style: AppTextStyles.smallText.copyWith(
                  fontWeight: FontWeight.w500, color: AppColors.primary),
            )
          ]),
          textAlign: TextAlign.center,
        ));
  }

  Container onboardingText(SplashViewModel model) {
    return Container(
      height: 90,
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.symmetric(horizontal: model.size.width / 8),
      child: Text(
        model.onboardingText[model.index],
        style: const TextStyle(
            fontFamily: AppFonts.satoshi,
            color: AppColors.textColor,
            fontSize: 24.5,
            fontWeight: FontWeight.w600),
        textAlign: TextAlign.center,
      ),
    );
  }

  Widget onboardingSlider(SplashViewModel model) {
    return SizedBox(
      width: MediaQuery.of(context).size.width * .8,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: List.generate(model.onboardingText.length, (index) {
          return AnimatedContainer(
            duration: const Duration(milliseconds: 350),
            height: 7,
            width: (MediaQuery.of(context).size.width * .8) / 3,
            decoration: containerDecoration(index, model),
          );
        }),
      ),
    );
  }

  BoxDecoration containerDecoration(int index, SplashViewModel model) {
    return BoxDecoration(
      borderRadius: BorderRadius.only(
        topLeft:
            index > 0 ? const Radius.circular(0) : const Radius.circular(3),
        bottomLeft:
            index > 0 ? const Radius.circular(0) : const Radius.circular(3),
        topRight: index < model.index
            ? const Radius.circular(0) : const Radius.circular(3),
        bottomRight: index < model.index
            ? const Radius.circular(0) : const Radius.circular(3),
      ),
      color: model.index >= index ? AppColors.primary : AppColors.grey,
    );
  }

  Widget splashLogo() {
    return SizedBox(
      height: 70,
      child: Image.asset(
        AppAssets.images.logos.splashLogo.path,
        fit: BoxFit.contain,
      ),
    );
  }
}

排查建议 #

• 检查ViewModel初始化逻辑：onModelReady中await model.init()需确保model.size、model.onboardingText、model.index等UI依赖变量完全初始化，并调用notifyListeners()触发UI更新。若init中存在异步操作未正确等待，会导致UI使用未就绪的数据。
• 替换model.size为UI层直接获取：onboardingContainer和onboardingText中使用的model.size.width可能因ViewModel中MediaQuery获取时机问题（比如上下文未就绪）导致宽度异常。建议改为MediaQuery.sizeOf(context).width，直接在UI层获取可靠的尺寸数据。
• 修复滑块宽度的动态计算：onboardingSlider中AnimatedContainer的宽度固定除以3，若model.onboardingText.length不等于3，会导致布局异常。改为(MediaQuery.of(context).size.width * .8) / model.onboardingText.length，确保数量匹配。
• 处理GestureRecognizer的生命周期：onboardingLegalText中的TapGestureRecognizer未在组件销毁时释放，可能引发Release模式下的异常。将其定义为State成员变量，在dispose()中调用dispose()方法释放资源。
• 验证自定义字体加载：onboardingText使用的AppFonts.satoshi可能在Release模式下未正确打包。尝试替换为系统默认字体测试，若恢复正常则检查pubspec.yaml中的字体配置是否正确，文件路径是否无误。
• 使用DevTools分析布局和性能：在Profile模式下打开Flutter DevTools，通过Layout Explorer查看onboardingContainer的布局边界，确认是否存在约束冲突；通过Performance面板检查是否有UI线程阻塞或帧丢失情况。
• 排查BaseView封装问题：若BaseView是自定义状态管理组件，需确认其在Release模式下是否正确处理ViewModel生命周期。临时替换为普通StatefulWidget直接管理ViewModel，验证问题是否由BaseView导致。

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