Flutter Tab Bar Page白色闪烁oninit

Question

我在我的应用中使用 TabBarView 是这样的:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          TabBarView(
            controller: _controller,
            physics: const NeverScrollableScrollPhysics(),
            children: const [
              WishlistsView(),
              FriendsView(),
              EventsView(),
              InboxView(),
              ProfileView(),
            ],
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: BottomNavBar(
              initialIndex: widget.navBarOption.index,
              onPageChanged: (index) => _tap(context, index),
            ),
          ),
        ],
      ),
    );
  }

  void _tap(BuildContext context, int index) => context.go(
        '/home/${BottomNavBarOption.values[index].name}',
      );

现在的问题是，当我第一次进入另一个页面时，在页面实际显示之前有一个非常短的白屏。

Here为了更好的理解是一个ScreenVideo。这在 Web 和 iOS 上都会发生。

为什么会这样？我可以避免吗？如您所见， View 不是很重。

他们所拥有的基本上就是一个SVGPicture.asset:

class _WishlistsViewState extends State<WishlistsView>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: Stack(
        children: const [
          BackgroundImage(option: BackgroundImageOption.wishlists),
        ],
      ),
    );
  }
}

Answer 1

第一次加载 svg 并缓存它以便稍后显示它可能需要时间。您可以尝试 OffStage Widget，它应该加载 UI 而只是不显示它。

class _WishlistsViewState extends State<WishlistsView>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: Offstage(
      offStage: false,
       child: Stack(
        children: const [
          BackgroundImage(option: BackgroundImageOption.wishlists),
        ],
      ),
     ),
    );
  }
}