flutter 学习 topTapButton TapView

关键词AutomaticKeepAliveClientMixin

效果

main.dart

import 'dart:ui';

import 'package:flutter/material.dart';
import 'keep_alive_demo.dart';

void main()=>runApp(MyApp());

class  MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.lightBlue),
      home: KeepAliveDemo(),
    );
  }
}


class  KeepAliveDemo extends StatefulWidget {
  @override
  _KeepAliveDemoState createState() => _KeepAliveDemoState();
}

class _KeepAliveDemoState extends State<KeepAliveDemo> with SingleTickerProviderStateMixin{
  TabController _controller;
  @override
  void initState() { 
    super.initState();
    _controller = TabController(length: 3,vsync: this);
  }

  @override
  void dispose() {
    // TODO: implement dispose
     _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('keep alive Demo'),
        bottom: TabBar(
          controller: _controller,
          tabs: [
            Tab(icon:Icon(Icons.directions_car)),
            Tab(icon:Icon(Icons.directions_transit)),
            Tab(icon:Icon(Icons.directions_bike))
          ],
        ),
      ),
      body: TabBarView(
        controller: _controller,
        children: <Widget>[
        MyHomePage(),
        MyHomePage(),
        MyHomePage(),
        ],
      ),
    );
  }
}

keep_alive_demo.dart

保持页面存活使用方法

class _MyHomePageState extends State<MyHomePage> with AutomaticKeepAliveClientMixin {
  int _counter = 0;

  @override
  bool get wantKeepAlive => true;

import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with AutomaticKeepAliveClientMixin {
  int _counter = 0;

  @override
  bool get wantKeepAlive => true;
  void _incrementCounter(){
    setState(() {
      _counter++;
    });

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('点一次增加一个数字'),
            Text('$_counter',style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),

    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'increment',
      child: Icon(Icons.add),
    ),
    );
  }
}

AutomaticKeepAliveClientMixin源码

@optionalTypeArgs
mixin AutomaticKeepAliveClientMixin<T extends StatefulWidget> on State<T> {
  KeepAliveHandle _keepAliveHandle;

  void _ensureKeepAlive() {
    assert(_keepAliveHandle == null);
    _keepAliveHandle = KeepAliveHandle();
    KeepAliveNotification(_keepAliveHandle).dispatch(context);
  }

  void _releaseKeepAlive() {
    _keepAliveHandle.release();
    _keepAliveHandle = null;
  }

  /// Whether the current instance should be kept alive.
  ///
  /// Call [updateKeepAlive] whenever this getter's value changes.
  @protected
  bool get wantKeepAlive;

  /// Ensures that any [AutomaticKeepAlive] ancestors are in a good state, by
  /// firing a [KeepAliveNotification] or triggering the [KeepAliveHandle] as
  /// appropriate.
  @protected
  void updateKeepAlive() {
    if (wantKeepAlive) {
      if (_keepAliveHandle == null)
        _ensureKeepAlive();
    } else {
      if (_keepAliveHandle != null)
        _releaseKeepAlive();
    }
  }

  @override
  void initState() {
    super.initState();
    if (wantKeepAlive)
      _ensureKeepAlive();
  }

  @override
  void deactivate() {
    if (_keepAliveHandle != null)
      _releaseKeepAlive();
    super.deactivate();
  }

  @mustCallSuper
  @override
  Widget build(BuildContext context) {
    if (wantKeepAlive && _keepAliveHandle == null)
      _ensureKeepAlive();
    return null;
  }
}

参考资料：

https://www.youtube.com/watch?v=ybVa5mXLFSU

https://api.flutter.dev/flutter/widgets/AutomaticKeepAliveClientMixin-mixin.html