全栈项目开发2:主界面开发及全局尺寸适配指南

编码文章call10242025-08-05 14:18:442A⁺A^-

效果

内容

本节继上节内容后完成主界面的Tab页以及全局尺寸适配功能，以上两幅图分别是Windows平台和Android平台的界面效果，底部是自定义的导航栏，增加了中间凸起的按钮，并且具有点击切换动画效果

为了方便后续代码的结果输出，编写了一个测试界面用于展示，待功能逐渐增多之后再将其隐藏起来，目前先放在主界面的Tab页中。

全局尺寸适配指南：

flutter中默认组件尺寸单位都是dp,所以由px数据除以像素密度就可以得到dp。

计算公式：实际尺寸 = UI尺寸 * 设备宽度/设计图宽度

1px = 1 / 设备像素比

上图中Android平台是按照设计图和设备实际尺寸1：1的结果，Windows平台由于可以自由拉伸窗口，这里调整到比例接近的地方。

为了使用方便，使用Flutter2.6及以上版本的新特性extension-method为已有类增添新方法，写入以下SizeExtension类后就可以新的表达方式

extension SizeExtension on num {

  num get w => Screen.getInstance().getWidth(this);

  num get h => Screen.getInstance().getHeight(this);

  num get sp => Screen.getInstance().getSp(this);
}

如下2种表达方式具有相同的结果，假如宽度是25，但显然第一种方式较为简洁

1：25.w

2：Screen.getInstance().getWidth(25)

拓展

App生命周期监听

在Home界面使用Mixin方式混入WidgetsBindingObserver类，然后在页面初始化中使用WidgetsBinding.instance!.addObserver(this);增加对生命周期的监听，此时就可以使用以下代码完成生命周期的变化处理。一般从切换到后台再到前台的触发顺序是inactive->paused->inactive->resumed

@override //inactive->paused->inactive->resumed
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.inactive: // 处于这种状态的应用程序应该假设它们可能在任何时候暂停。
        break;
      case AppLifecycleState.resumed: // 应用程序可见，前台//进到锁屏界面
        break;
      case AppLifecycleState.paused: // 应用程序不可见，后台
        break;
      case AppLifecycleState.detached: // 申请将暂时暂停
        break;
    }
  }

注：Android和iOS平台有效

状态保留

经常在主界面使用的Tab页的布局方式，此时会发现在进行页面切换的时候页面会发生销毁重建的过程，为了能将Tab页的状态保留，在Home的状态类上Mixin
AutomaticKeepAliveClientMixin类，并实现对应的方法bool get wantKeepAlive => true;，同时build方法实现父方法 super.build(context); 除了Home的状态类，还需要在各个子Tab页的状态类上进行相同的操作。