flutter 切换保持页面状态

叁歲伎倆 2021-07-24 17:02 529阅读 0赞

1、页面必须是有状态组件
    
    2、继承状态类的类要with多继承AutomaticKeepAliveClientMixin
    
    3、在类中重写getter保持状态方法，返回true布尔值
      		bool get wantKeepAlive=>true;
      		
    4、设置完毕后可以保持数据状态和滚动条状态

代码示例:  
保持状态组件:

import 'package:flutter/material.dart';
    
    
    class Home3 extends StatefulWidget { 
      Home3({ Key key}) : super(key: key);
    
      @override
      _Home3State createState() => _Home3State();
    }
    
    //设置保持状态
    class _Home3State extends State<Home3> with AutomaticKeepAliveClientMixin { 
      int count=0;
    
      //getter重写保持状态方法,返回布尔值
      bool get wantKeepAlive=>true;
    
    
    
      @override
      Widget build(BuildContext context) { 
        return Container(
           child:Center(
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: <Widget>[
                 Text('数字:$count'),
                 FloatingActionButton(
                   onPressed: (){ 
                     setState(() { 
                       count=count+1;
                     });
                   },
                   child: Icon(Icons.add),
                 )
               ],
             ),
           ),
        );
      }
    
    
    }

路由导航组件:

import "package:flutter/material.dart";
    import 'package:flutter/rendering.dart';
    import "drag.dart";
    import 'dart:ui';
    
    import 'page/1.dart';
    import 'page/2.dart';
    import 'page/3.dart';
    import 'xuan.dart';
    
    void main()
    { 
      runApp(App());
    }
    class App extends StatelessWidget { 
      const App({ Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) { 
        return App2();
      }
    }
    
    class App2 extends StatefulWidget { 
      App2({ Key key}) : super(key: key);
    
      @override
      _AppState createState() => _AppState();
    }
    
    class _AppState extends State<App2> with SingleTickerProviderStateMixin { 
    
      // List _page=[Home3(),Home2(),Home4()];
      // int index=0;
      TabController con;
    
      @override
      void initState() { 
        // TODO: implement initState
        super.initState();
        con=new TabController(length: 3, vsync: this);
      }
    
      @override
      void dispose() { 
        // TODO: implement dispose
        super.dispose();
        con.dispose();
      }
    
      @override
      Widget build(BuildContext context) { 
        return  MaterialApp(
          home:Scaffold(
            appBar:AppBar(
              title: Text('小案例'),
     		  
     		  //导航栏切换
              bottom: TabBar(
                controller: this.con,
                tabs: <Widget>[
                  Tab(icon:Icon(Icons.home)),
                  Tab(icon:Icon(Icons.category)),
                  Tab(icon:Icon(Icons.people))
                ],
              ),
            ),
            
            body:TabBarView(
              controller: this.con,
              children: <Widget>[
                // Text('a'),
                Home3(),
                Home2(),
                Text('c')
              ],
            ),
    
          //去掉右上角的debug贴纸
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.blue
          ),
          );
      }
    }
    
    
    class Home extends StatefulWidget { 
    
      @override
      _HomeState createState() => _HomeState();
    }
    
    class _HomeState extends State<Home> { 
    
      Color dragColor=Colors.orange;
    
      @override
      Widget build(BuildContext context) { 
        return Container(
          // width: double.infinity,
           child:Stack(
             children: <Widget>[
               ConstrainedBox( //约束盒子,添加额外的约束条件到子组件上
                  constraints: BoxConstraints.expand(),  //随者子元素扩展
                  child: 
                  Image.asset("images/2.0x/钢铁侠4.jpg"),
    
               ),
              
               Center(
                 child: ClipRect(
                   child: BackdropFilter( //背景过滤器
                       filter: ImageFilter.blur(sigmaX:5.0,sigmaY:5.0),   
                       child: Opacity(
                         opacity: 0.5,
                         child: Container(
                           width: 200.0,
                           height: 200.0,
                           color:Colors.grey.shade200 ,
                           child: Center(
                             child: Text("大Jeff"),
                           ),
                         ),
                       ),
                   ),
                 ),
               )
             ],
           ),
           
        );
      }
    }