flutter开发实战-当前界面无操作60s返回主页实现

flutter开发实战-当前界面无操作60s返回主页实现

当前界面无操作60s返回主页实现,主要是通过Timer来控制,当监听界面是否有pointerDown时候,如果超过60s仍没有操作,则返回主页。

一、Listener

Listener是用来用于调用回调以响应常见的指针事件

Listener的属性如下

复制代码
const Listener({
    super.key,
    this.onPointerDown,
    this.onPointerMove,
    this.onPointerUp,
    this.onPointerHover,
    this.onPointerCancel,
    this.onPointerPanZoomStart,
    this.onPointerPanZoomUpdate,
    this.onPointerPanZoomEnd,
    this.onPointerSignal,
    this.behavior = HitTestBehavior.deferToChild,
    super.child,
  }) : assert(behavior != null);

可以看出,我们可以通过onPointerDown来判断用户是否触摸到屏幕。

二、新增ListenerTouchTimerWrapper

为Widget添加Timer控制,当触摸了屏幕,取消Timer,重新倒计时。倒计时结束之后,可以执行callback。

复制代码
void updateTouch() {
    _timer?.cancel();

    if (timeoutCallback != null) {
      _timer = Timer(Duration(milliseconds: milliseconds), timeoutCallback!);
    }
  }

完整代码如下

复制代码
class ListenerTouchTimer {
  final int milliseconds;
  Timer? _timer;
  VoidCallback? timeoutCallback;

  ListenerTouchTimer({
    required this.milliseconds,
  });

  void startListener({required VoidCallback timeoutCallback}) {
    this.timeoutCallback = timeoutCallback;
    updateTouch();
  }

  void updateTouch() {
    _timer?.cancel();

    if (timeoutCallback != null) {
      _timer = Timer(Duration(milliseconds: milliseconds), timeoutCallback!);
    }
  }

  void dispose() {
    _timer?.cancel();
  }
}

为widget创建Wrapper

复制代码
/// 无操作回主页
class ListenerTouchTimerWrapper extends StatelessWidget {
  const ListenerTouchTimerWrapper({
    super.key,
    required this.child,
    this.listenerTouchTimer,
  });

  final Widget child;
  final ListenerTouchTimer? listenerTouchTimer;

  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerDown: (event) {
        if (listenerTouchTimer != null) {
          listenerTouchTimer!.updateTouch();
        }
      },
      child: child,
    );
  }
}

三、使用ListenerTouchTimerWrapper

在界面的外层使用ListenerTouchTimerWrapper进行包裹一下。

复制代码
class DemoPage extends StatefulWidget {
  const DemoPage({
    Key? key,
    required this.arguments,
  }) : super(key: key);

  final Map<String, dynamic> arguments;

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  /// 超出60秒自动返回首页
  ListenerTouchTimer? listenerTouchTimer;
  @override
  void initState() {
    // TODO: implement initState
    getAppConfigFromNative();
    
    listenerTouchTimer = ListenerTouchTimer(milliseconds: 6000);
    super.initState();
    loggerInfo("ChangeClothe initState");
    if (listenerTouchTimer != null) {
      listenerTouchTimer!.startListener(timeoutCallback: () {
        print("_ChangeClotheWaitPageState 超出60秒自动返回首页");
        if (mounted ) {
          navigatorBack();
        }
      });
    }
  }

  @override
  void dispose() {
    // TODO: implement dispose
    loggerInfo("ChangeClothe dispose");
    listenerTouchTimer?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListenerTouchTimerWrapper(
      listenerTouchTimer: listenerTouchTimer,
      child: Scaffold(
        body: Container(),
      ),
    );
  }

  void navigatorBack() {
    NavigatorPageRouter.pop();
  }
}

四、小结

flutter开发实战-当前界面无操作60s返回主页实现

学习记录,每天不停进步。

相关推荐
QuantumLeap丶1 小时前
《Flutter全栈开发实战指南:从零到高级》- 05 - 基础组件实战:构建登录界面
flutter·ios
黄毛火烧雪下1 小时前
(四)Flutter插件之IOS插件开发
flutter·ios
西西学代码2 小时前
Flutter---弹窗
flutter
RaidenLiu2 小时前
告别陷阱:精通Flutter Signals的生命周期、高级API与调试之道
前端·flutter·前端框架
—Qeyser4 小时前
Flutter字体引用与使用指南
flutter
I烟雨云渊T5 小时前
iOS原生与Flutter的交互编程
flutter·ios·交互
恋猫de小郭8 小时前
第一台 Andriod XR 设备发布,Jetpack Compose XR 有什么不同?对原生开发有何影响?
android·前端·flutter
未来猫咪花9 小时前
对 signals.dart 细粒度更新的误解
flutter
阿啄debugIT11 小时前
HashMap为什么线程不安全? ConcurrentHashMap如何保证线程安全? AQS如何实现锁的获取与释放?用男女关系进行解释,一看就懂
经验分享·职场和发展·系统架构·软件工程·1024程序员节
—Qeyser1 天前
使用 Flutter 的 Positioned 控件实现精准布局
flutter