Flutter高级第3篇:底部 Tab 切换保持页面状态的几种方法

移动框架:Flutter 专栏收录该内容
91 篇文章 1 订阅

一、IndexedStack 保持页面状态

IndexedStack 和 Stack 一样,都是层布局控件, 可以在一个控件上面放置另一
个控件,但唯一不同的是 IndexedStack 在同一时刻只能显示子控件中的一个控
件,通过 Index 属性来设置显示的控件。
IndexedStack 来保持页面状态的优点就是配置简单。IndexedStack 保持页面状
态的缺点就是不方便单独控制每个页面的状态。
k IndexedStack 用法:

Container(
width: double.infinity,
height: double.infinity,
child: new IndexedStack(
index: 0,
alignment: Alignment.center,
children: <Widget>[
Image.network("https://www.itying.com/images/flutter/list1.jpg",fit:
BoxFit.cover,),
Image.network("https://www.itying.com/images/flutter/list2.jpg",fit:
BoxFit.cover)
],
),
)

结合底部 tab 切换

body:IndexedStack(
children: this._pageList,
index: _currentIndex,
),

二丶 AutomaticKeepAliveClientMixin 保持页面状态

AutomaticKeepAliveClientMixin 结合 tab 切换保持页面状态相比 IndexedStack 而言配置起来稍
微有些复杂。它结合底部 BottomNavigationBar 保持页面状态的时候需要进行如下配置。

import 'package:flutter/material.dart';
import 'Home.dart';
import 'Category.dart';
import 'Cart.dart';
import 'User.dart';
class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);
  _TabsState createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
  int _currentIndex=1;
//创建页面控制器
  var _pageController;
  @override
  void initState(){
//页面控制器初始化
    _pageController = new PageController(initialPage : _currentIndex);
    super.initState();
  }

  List<Widget> _pageList=[
    HomePage(),
    CategoryPage(),
    CartPage(),
    UserPage()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("jdshop"),
        ),
//必须用 PageView 加载不同的页面
        body: PageView(
          controller: _pageController,
          children: this._pageList,
          onPageChanged: (index){
            _currentIndex = index;
          },
        ),
        bottomNavigationBar: BottomNavigationBar(
            currentIndex:this._currentIndex ,
            onTap: (index){
              setState(() {
//this._currentIndex=index;
//页面控制器进行跳转
                _pageController.jumpToPage(this._currentIndex);
              });
            },
            type:BottomNavigationBarType.fixed ,
            fixedColor:Colors.red,
            items: [
        BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text("首页")
    ),
    BottomNavigationBarItem(
    icon: Icon(Icons.category),
    title: Text("分类")
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.shopping_cart),
        title: Text("购物车")
    ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.people),
                  title: Text("我的")
              )
            ],
        ),
    );
  }
}

需要持久化的页面加入如下代码:

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin{
  @override
  bool get wantKeepAlive => true;
}
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页

打赏

王睿丶

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值