flutter中TabBar和TabBarView保持状态方法

flutter使用TabBarView组件分页显示数据,来回切换页面,会触发页面的init和build,而且页面会回到最顶端,需要加个保持状态,方法共3步:

在这里插入图片描述
1.在每个页面都混入with AutomaticKeepAliveClientMixin

class MyViewPageState extends State<MyViewPage>
    with AutomaticKeepAliveClientMixin{
    }

在这里插入图片描述
2.在这些页面里重写wantKeepAlive方法,写法固定的

class MyViewPageState extends State<MyViewPage>
    with AutomaticKeepAliveClientMixin{
    @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
    }

在这里插入图片描述
3.在这些页面的build开头调用super.build()

class MyViewPageState extends State<MyViewPage>
    with AutomaticKeepAliveClientMixin{
    @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
  
 @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container();
    }

在这里插入图片描述
再来切换tab,会发现这这页面init和build不会重复调用,并且原来滚动到底端的页面,切回来还是在底端。

要从另一个页面跳转到TabBarTabBarView中的页面,您可以使用Flutter的导航机制。以下是一个简单的示例: 假设您有两个页面:HomePageTabbedPage。HomePage包含一个按钮,点击该按钮将导航到TabbedPage,TabbedPage包含TabBarTabBarView,每个标签对应一个页面。 在HomePage中,您可以使用Navigator.push方法跳转到TabbedPage: ```dart import 'package:flutter/material.dart'; import 'tabbed_page.dart'; class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home'), ), body: Center( child: RaisedButton( child: Text('Go to Tabbed Page'), onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => TabbedPage()), ); }, ), ), ); } } void main() { runApp(MaterialApp( home: HomePage(), )); } ``` 在TabbedPage中,您可以创建一个DefaultTabController来管理TabBarTabBarView,并在TabBar中定义标签。每个标签对应一个页面。 ```dart import 'package:flutter/material.dart'; import 'tab_page.dart'; class TabbedPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Tabbed Page'), bottom: TabBar( tabs: [ Tab(text: 'Page 1'), Tab(text: 'Page 2'), ], ), ), body: TabBarView( children: [ TabPage(title: 'Page 1'), TabPage(title: 'Page 2'), ], ), ); } } class TabPage extends StatelessWidget { final String title; TabPage({this.title}); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text(title), ), ); } } ``` 在上面的示例中,TabbedPage使用TabBarTabBarView来展示两个页面。每个页面由TabPage小部件表示。您可以根据实际需求自定义这些页面。 当您从HomePage点击按钮跳转到TabbedPage时,将会显示TabBarTabBarView,并且您可以在TabBar中进行不同标签页之间的切换。 希望对您有所帮助!如果有任何其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值