You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter 3.27.3下iOS端PlatformAppBar初始透明滚动后显背景色问题

问题描述

说明:升级Flutter至3.27.3版本后出现此问题。

iOS平台下,PlatformAppBar对应的CupertinoNavigationBar在用户滚动前始终呈透明/半透明状态,滚动开始后设置的背景色才正常显示。

已尝试以下方案,均未解决问题:

  • 直接在cupertino: (_, __) => CupertinoNavigationBarData(...)中设置完全不透明的backgroundColor
  • 启用transitionBetweenRoutes: false
  • 移除多余的SafeArea组件,确保无内容重叠
  • 确认未使用大标题样式的CupertinoSliverNavigationBar
  • 禁用extendBodyBehindAppBar
  • 使用PlatformScaffold + PlatformAppBar的最小代码片段测试

即便尝试了所有步骤,导航栏初始加载时仍保持透明,直到用户开始滚动。


截图

导航栏初始透明,滚动后变为完全着色状态:

  • 滚动前
  • 滚动后

复现步骤
  1. 创建使用flutter_platform_widgets(版本7.0.1)的Flutter项目
  2. 使用以下最小代码作为首页:
import 'package:flutter/material.dart';
import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
class TestPage extends StatelessWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PlatformScaffold(
      appBar: PlatformAppBar(
        cupertino: (_, __) => CupertinoNavigationBarData(
          backgroundColor: Colors.blueGrey,
          transitionBetweenRoutes: false,
          title: const Text('iOS Title'),
        ),
      ),
      body: ListView(
        children: List.generate(
          30,
          (index) => SizedBox(
            height: 50,
            child: Center(
              child: Text('Item $index'),
            ),
          ),
        ),
      ),
    );
  }
}

环境信息
  • Flutter版本:3.27.3
  • Dart版本:3.6.1
  • flutter_platform_widgets版本:7.0.1
  • 目标平台:iOS(已在iOS模拟器及真机测试)
  • 设备/模拟器版本:iPhone 14,iOS 16(示例)

预期行为

页面加载时,导航栏应立即显示指定背景色,完全不透明且无半透明效果。


实际行为

iOS平台下,导航栏呈透明状态(可看到后方列表项),直到用户开始滚动;滚动开始后,导航栏背景色变为完全不透明。


内容的提问来源于stack exchange,提问作者Mostafa Hamed

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.14 16:52:39