---

layout: post

flutter底部导航栏保存状态

subtitle: flutter底部导航栏保存状态 date: 2020-05-13 author: BY header-img: img/post-bg-kuaidi.jpg catalog: true tags: - flutter - keekalive

实际是使用的AutomaticKeepAliveClientMixin保存的每个页面的状态

• 相当于是每一个属于tab的页面都要使用AutomaticKeepAliveClientMixin

• 值得注意的是Scaffold里面body要使用PageView,因为这样的话每个页面都是按需加载的,且wantKeepAlive才会生效,否则wantKeepAlive失效,状态不能标出,或者使用IndexedStack会同时加载所有tab页面

tab实例(直接在main使用TabPage即可)

import 'package:flutter/material.dart';
// import 'package:provider/provider.dart';
// import './Store.dart';

class TabPage extends StatefulWidget {
  TabPage({Key key}) : super(key: key);

  _TabPageState createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> {
  int _selectedIndex = 0;
  PageController _pageController =
      PageController(initialPage: 0, keepPage: true);
  void _onItemTapped(int index) {
    // _pageController.jumpToPage(index);
    setState(() {
      _selectedIndex = index;
    });
    _pageController.animateToPage(_selectedIndex,
        duration: Duration(milliseconds: 500), curve: Curves.easeInOut);
  }

  final List<Widget> page = [
    Left(),
    Right(),
    Right(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('title'),
      ),
      body: PageView(
        children: page,
        controller: _pageController,
      ),
      bottomNavigationBar: BottomNavigationBar(
        // 底部导航
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(
              icon: Icon(Icons.business), title: Text('Business')),
          BottomNavigationBarItem(
              icon: Icon(Icons.school), title: Text('School')),
        ],
        currentIndex: _selectedIndex,
        fixedColor: Colors.blue,
        onTap: _onItemTapped,
        type: BottomNavigationBarType.fixed,
      ),
    );
  }
}

class Right extends StatefulWidget {
  Right({Key key}) : super(key: key);

  _RightState createState() => _RightState();
}

class _RightState extends State<Right> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;
  @override
  void initState() {
    super.initState();
    print('Right initState');
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
      child: ListView(
        children: [
          Text("文本"),
          // Text("${context.watch<Store>().getuserinfo()['name']}"),
          TextField(
            onChanged: (val) {
              print('变化' + val);
              Map info = {'name': val, 'age': 20};
              // context.read<Store>().setuserinfo(info);
              // print(context.read<Store>().getuserinfo().toString());
            },
          )
        ],
      ),
    );
  }
}

class Left extends StatefulWidget {
  Left({Key key}) : super(key: key);

  _LeftState createState() => _LeftState();
}

class _LeftState extends State<Left> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;
  @override
  void initState() {
    super.initState();
    print('Left initState');
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
      child: CustomTabBarView(),
    );
  }
}

class CustomTabBarView extends StatefulWidget {
  @override
  _CustomTabBarViewState createState() => _CustomTabBarViewState();
}

class _CustomTabBarViewState extends State<CustomTabBarView>
    with SingleTickerProviderStateMixin {
  final tabs = ['风画庭', '雨韵舍'];
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: tabs.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          _buildTabBar(),
          Container(
              color: Colors.purple,
              width: MediaQuery.of(context).size.width,
              height: 200,
              child: _buildTableBarView())
        ],
      ),
    );
  }

  Widget _buildTabBar() => TabBar(
        onTap: (tab) => print(tab),
        labelStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
        unselectedLabelStyle: TextStyle(fontSize: 16),
        isScrollable: true,
        controller: _tabController,
        labelColor: Colors.blue,
        indicatorWeight: 3,
        indicatorPadding: EdgeInsets.symmetric(horizontal: 10),
        unselectedLabelColor: Colors.grey,
        indicatorColor: Colors.orangeAccent,
        tabs: tabs.map((e) => Tab(text: e)).toList(),
      );

  Widget _buildTableBarView() {
    return TabBarView(
        controller: _tabController,
        children: tabs
            .map((e) => Center(
                    child: Text(
                  e,
                  style: TextStyle(color: Colors.white, fontSize: 20),
                )))
            .toList());
  }
}

其他

# windows杀死进程
taskkill /im dart.exe /f