Flutter 切换tabbar 视图重新渲染解决方法

>底部tabbar点击page切换时,会重新加载页面,重新请求接口浪费资源,为解决这个尴尬处境,有个简易的办法在bottomtabbar类中,对 return scaffold (body:  加入indexedstack

      body:IndexedStack(

          children: <Widget>[

              PageOne ();

              PageTwo ()

            ],

            index: currentIndex,

            )

>就这么微妙的解决了

>顶部tabbarview重新加载解决办法就是使用AutomaticKeepAliveClientMixin防止子页面重复渲染

      Class _RoomState extends    State<Room> with    AutomaticKeepAliveClientMixin{

      @override

      Widget build(BuildContext context) {

        super.build(context);

            /*

            ……

            */

        }

        @override

        bool get wantKeepAlive => true;

    }

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter 中,你可以使用 `CupertinoTabBar` 和 `CupertinoTabScaffold` 来实现带有动画的 TabBar 切换效果。下面是一个简单的示例代码: ```dart import 'package:flutter/cupertino.dart'; class MyTabScreen extends StatefulWidget { @override _MyTabScreenState createState() => _MyTabScreenState(); } class _MyTabScreenState extends State<MyTabScreen> { int _currentIndex = 0; @override Widget build(BuildContext context) { return CupertinoTabScaffold( tabBar: CupertinoTabBar( items: [ BottomNavigationBarItem( icon: Icon(CupertinoIcons.home), label: 'Home', ), BottomNavigationBarItem( icon: Icon(CupertinoIcons.search), label: 'Search', ), BottomNavigationBarItem( icon: Icon(CupertinoIcons.person), label: 'Profile', ), ], currentIndex: _currentIndex, onTap: (index) { setState(() { _currentIndex = index; }); }, ), tabBuilder: (BuildContext context, int index) { return CupertinoTabView( builder: (BuildContext context) { switch (index) { case 0: return HomeScreen(); case 1: return SearchScreen(); case 2: return ProfileScreen(); default: return Container(); } }, ); }, ); } } class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return CupertinoPageScaffold( navigationBar: CupertinoNavigationBar( middle: Text('Home'), ), child: Center( child: Text('Home Screen'), ), ); } } class SearchScreen extends StatelessWidget { @override Widget build(BuildContext context) { return CupertinoPageScaffold( navigationBar: CupertinoNavigationBar( middle: Text('Search'), ), child: Center( child: Text('Search Screen'), ), ); } } class ProfileScreen extends StatelessWidget { @override Widget build(BuildContext context) { return CupertinoPageScaffold( navigationBar: CupertinoNavigationBar( middle: Text('Profile'), ), child: Center( child: Text('Profile Screen'), ), ); } } ``` 在这个示例中,我们使用 `CupertinoTabScaffold` 和 `CupertinoTabBar` 来创建底部TabBar,然后在 `tabBuilder` 方法中根据索引值切换显示不同的页面。在 `onTap` 回调中,我们可以更新 `_currentIndex` 的值来实现切换 Tab 时的动画效果。 以上是一个基本的示例,你可以根据自己的需求进行定制和修改。希望对你有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值