❌

普通视图

发现新文章，点击刷新页面。
昨天以前首页

KuiklyUI Pager 架构设计完整分析

✇掘金 前端
作者 风冷
2025年10月17日 19:39

KuiklyUI Pager 架构设计完整分析

1. 架构概述

KuiklyUI Pager是KuiklyUI框架中的核心组件，负责页面的创建、生命周期管理、视图渲染、事件分发和跨平台适配。Pager架构采用了清晰的分层设计和模块化思想，结合响应式编程模式，为跨平台应用提供统一的页面管理机制。

核心设计理念

  • 分层架构：将页面管理、视图渲染、事件处理等功能解耦为独立层次
  • 响应式编程：利用ReactiveObserver实现数据与视图的响应式更新
  • 模块化设计：支持核心模块和外部模块的注册与管理
  • 跨平台适配：通过BridgeManager实现与原生平台的通信

2. 核心组件与关系

组件概览

classDiagram
    class IPager {
        +pageData: PagerData
        +lifecycleScope: CoroutineScope
        +registerModule(module: IModule)
        +bindValueChange(observer: ReactiveObserver)
        +onCreatePager()
        +pageDidAppear()
        +pageDidDisappear()
    }
    
    class Pager {
        +pagerData: PagerData
        -modules: MutableMap<String, IModule>
        -pagerEventObservers: MutableList<IPagerEventObserver>
        +registerModule(module: IModule)
        +onCreatePager()
        +calculateLayout()
        +dispatchViewEvent()
    }
    
    class PagerManager {
        -pagerMap: MutableMap<String, IPager>
        -pagerNameMap: MutableMap<String, String>
        +createPager()
        +destroyPager()
        +getPager()
    }
    
    class PagerData {
        +platform: String
        +isAndroid: Boolean
        +isIOS: Boolean
        +safeAreaInsets: SafeAreaInsets
        +windowSize: Size
    }
    
    class IPagerEventObserver {
        +onPagerEvent(eventName: String, data: Any?)
    }
    
    class IPagerLayoutEventObserver {
        +onPagerWillCalculateLayoutFinish()
    }
    
    IPager <|-- Pager
    PagerManager "1" -- "*" IPager
    Pager "1" -- "1" PagerData
    Pager "1" -- "*" IPagerEventObserver
    IPagerEventObserver <|-- IPagerLayoutEventObserver

组件说明

IPager 接口

定义了页面的核心能力接口，包括：

  • 生命周期管理：onCreatePager、pageDidAppear、pageDidDisappear等生命周期方法
  • 模块管理：registerModule、unregisterModule、getModule等模块注册与获取方法
  • 事件处理：addViewEventObserver、dispatchViewEvent等事件观察与分发方法
  • 数据绑定：bindValueChange、unbindValueChange等响应式数据绑定方法
  • 布局操作：createBody、calculateLayout等视图创建与布局计算方法
Pager 抽象类

是IPager接口的主要实现，提供了页面管理的核心逻辑：

  • 模块管理实现：维护modules集合，处理模块的注册、初始化和销毁
  • 生命周期实现：实现页面生命周期方法，协调模块的生命周期
  • 视图事件处理：维护nativeRefViewMap，实现视图事件的分发
  • 布局计算：实现calculateLayout方法，包含布局计算循环和最大重试逻辑
  • 任务调度：利用TaskManager进行异步任务调度
PagerManager 单例

是Pager的管理中心，采用单例模式：

  • Pager实例管理：通过pagerMap和pagerNameMap管理所有Pager实例
  • 页面创建与销毁：提供createPager和destroyPager方法
  • 页面检索：提供getPager方法根据ID或名称获取Pager实例
  • 响应式观察者管理：管理全局的ReactiveObserver
  • 页面路由注册：支持页面路由信息的注册
PagerData 类

封装了页面相关的所有数据：

  • 设备信息：platform、isAndroid、isIOS等平台标识
  • 页面参数：通过params属性存储页面传递参数
  • 安全区域信息：safeAreaInsets存储刘海屏等异形屏的安全区域
  • 窗口尺寸：windowSize、screenSize等视图尺寸信息
  • 响应式属性：采用ReactiveObserver实现数据变化的响应式通知

3. 页面生命周期管理

生命周期流程

sequenceDiagram
    participant PM as PagerManager
    participant P as Pager
    participant M as Modules
    participant V as View
    
    PM->>P: createPager()
    P->>P: onCreatePager()
    P->>M: module.init()
    P->>P: createBody()
    P->>P: calculateLayout()
    P->>P: pageDidAppear()
    P->>M: module.onPageAppear()
    P->>V: renderView()
    
    Note over P: 页面处于活动状态
    
    P->>P: pageDidDisappear()
    P->>M: module.onPageDisappear()
    PM->>P: destroyPager()
    P->>M: module.destroy()

生命周期方法详解

  1. 创建阶段

    • onCreatePager()：页面创建时调用，初始化页面数据和组件
    • createBody()：创建页面的根视图节点
    • calculateLayout()：计算页面布局

  2. 可见阶段

    • pageDidAppear()：页面显示在屏幕上时调用
    • 触发所有模块的onPageAppear()方法

  3. 不可见阶段

    • pageDidDisappear()：页面从屏幕上消失时调用
    • 触发所有模块的onPageDisappear()方法

  4. 销毁阶段

    • destroyPager()：销毁页面实例
    • 释放所有资源和模块

4. 核心机制分析

4.1 模块管理机制

Pager架构的模块化设计允许灵活扩展功能，包括核心模块和外部模块：

// 模块注册示例
fun registerModule(module: IModule) {
    if (!modules.containsKey(module.moduleName)) {
        modules[module.moduleName] = module
        module.init(this)
    }
}

// 核心模块初始化
private fun initCoreModules() {
    registerModule(NotifyModule())
    registerModule(MemoryCacheModule())
    registerModule(BackPressModule())
    // ...其他核心模块
}

4.2 事件处理机制

Pager采用观察者模式实现事件分发，支持多种类型的事件：

  1. 页面事件：通过IPagerEventObserver接口分发
  2. 布局事件：通过IPagerLayoutEventObserver接口分发
  3. 视图事件：通过nativeRefViewMap分发原生视图事件
// 页面事件处理示例
fun handlePagerEvent(eventName: String, data: Any?) {
    when (eventName) {
        THEME_DID_CHANGED -> {
            // 主题变化处理
            calculateLayout()
        }
        ROOT_VIEW_SIZE_CHANGED -> {
            // 根视图尺寸变化处理
            updateWindowSize()
            calculateLayout()
        }
        // ...其他事件处理
    }
}

4.3 布局计算机制

Pager实现了一套完整的布局计算流程，包含最大重试逻辑以防止布局循环：

fun calculateLayout() {
    var retryCount = 0
    val maxRetryCount = 4
    
    while (retryCount < maxRetryCount) {
        // 布局计算逻辑
        
        if (!needRetryLayout) {
            break
        }
        retryCount++
    }
    
    // 通知观察者布局计算完成
    notifyLayoutEventObservers {
        it.onPagerWillCalculateLayoutFinish()
    }
}

4.4 响应式更新机制

Pager通过ReactiveObserver实现数据与视图的响应式更新：

// 数据绑定示例
fun bindValueChange(observer: ReactiveObserver) {
    observers.add(observer)
}

// 响应式属性更新
fun updateReactiveProperty(value: Any) {
    // 更新值
    // 通知所有观察者
    observers.forEach {
        it.onValueChanged(value)
    }
}

4.5 跨平台通信机制

Pager通过BridgeManager实现与原生平台的通信：

// 跨平台通信示例
fun callNativeMethod(methodName: String, params: Map<String, Any?>): Any? {
    return BridgeManager.callNative(methodName, params)
}

5. 视图系统交互

5.1 视图树构建

Pager通过createBody方法构建视图树：

// 视图树构建示例
override fun createBody(): FlexNode {
    return FlexNode().apply {
        style.flexDirection = FlexDirection.COLUMN
        style.width = Dimension(100f, DimensionType.PERCENT)
        style.height = Dimension(100f, DimensionType.PERCENT)
        
        // 添加子视图
        addChild(createContentNode())
    }
}

fun renderView() {
    // 将FlexNode渲染为原生视图
    // 更新nativeRefViewMap
}

5.2 原生视图引用管理

Pager维护nativeRefViewMap来管理原生视图引用，用于事件分发：

// 原生视图引用管理
private val nativeRefViewMap = mutableMapOf<String, Any>()

fun registerNativeView(refId: String, view: Any) {
    nativeRefViewMap[refId] = view
}

fun getNativeView(refId: String): Any? {
    return nativeRefViewMap[refId]
}

6. 性能优化机制

6.1 延迟加载

Pager实现了模块和视图的延迟加载机制：

// 延迟任务调度
fun scheduleLazyTask(task: () -> Unit) {
    addLazyTaskUtilEndCollectDependency(object : LazyTask {
        override fun run() {
            task()
        }
    })
}

6.2 布局优化

Pager通过最大重试次数限制布局计算循环：

// 布局计算中的最大重试逻辑
var retryCount = 0
val maxRetryCount = 4

while (retryCount < maxRetryCount && needRetryLayout) {
    // 布局计算
    retryCount++
}

6.3 模块懒加载

核心模块在页面创建时初始化，而外部模块可以按需注册：

// 核心模块初始化
private fun initCoreModules() {
    // 注册核心模块
}

// 外部模块注册接口
fun registerModule(module: IModule) {
    // 注册外部模块
}

6.4 性能监控

Pager集成了PerformanceModule进行性能监控：

// 性能监控示例
fun startPerformanceMonitor(tag: String) {
    val performanceModule = getModule<PerformanceModule>(PerformanceModule.MODULE_NAME)
    performanceModule?.startMonitor(tag)
}

fun endPerformanceMonitor(tag: String) {
    val performanceModule = getModule<PerformanceModule>(PerformanceModule.MODULE_NAME)
    performanceModule?.endMonitor(tag)
}

7. 平台适配特性

7.1 平台检测

PagerData中包含平台检测信息，方便开发者编写平台特定代码：

// 平台检测
val isAndroid = platform == PLATFORM_ANDROID
val isIOS = platform == PLATFORM_IOS
val isOhos = platform == PLATFORM_OHOS

// 使用示例
if (pagerData.isAndroid) {
    // Android平台特定代码
} else if (pagerData.isIOS) {
    // iOS平台特定代码
}

7.2 安全区域适配

PagerData包含安全区域信息，支持刘海屏等异形屏适配：

// 安全区域信息
val safeAreaInsets = SafeAreaInsets(
    top = 44f,     // iOS刘海高度
    bottom = 34f,  // iOS底部安全区高度
    left = 0f,
    right = 0f
)

// 使用示例
bodyNode.style.paddingTop = Dimension(pagerData.safeAreaInsets.top, DimensionType.POINT)

8. 开发实践与最佳实践

8.1 创建自定义页面

// 自定义页面示例
class MyCustomPage : Pager() {
    override fun onCreatePager() {
        super.onCreatePager()
        
        // 初始化页面数据
        initPageData()
        
        // 注册自定义模块
        registerModule(MyCustomModule())
    }
    
    override fun createBody(): FlexNode {
        return FlexNode().apply {
            style.flexDirection = FlexDirection.COLUMN
            style.width = Dimension(100f, DimensionType.PERCENT)
            style.height = Dimension(100f, DimensionType.PERCENT)
            
            // 构建UI
            addChild(createHeader())
            addChild(createContent())
            addChild(createFooter())
        }
    }
    
    private fun initPageData() {
        // 初始化数据
    }
    
    // 生命周期方法重写
    override fun pageDidAppear() {
        super.pageDidAppear()
        // 页面显示时的逻辑
    }
    
    override fun pageDidDisappear() {
        super.pageDidDisappear()
        // 页面隐藏时的逻辑
    }
}

8.2 使用模块系统

// 模块使用示例
class MyCustomModule : IModule {
    override val moduleName: String = "MyCustomModule"
    
    private lateinit var pager: IPager
    
    override fun init(pager: IPager) {
        this.pager = pager
        // 初始化模块资源
    }
    
    override fun onPageAppear() {
        // 页面显示时执行
    }
    
    override fun onPageDisappear() {
        // 页面隐藏时执行
    }
    
    override fun destroy() {
        // 释放模块资源
    }
}

// 在页面中使用模块
val myModule = getModule<MyCustomModule>("MyCustomModule")
myModule?.doSomething()

8.3 响应式数据绑定

// 响应式数据绑定示例
class MyData {
    var title by mutableStateOf("Default Title")
    var count by mutableStateOf(0)
}

// 在页面中绑定数据
val myData = MyData()

// 绑定到视图
bindValueChange(object : ReactiveObserver {
    override fun onValueChanged(value: Any) {
        when (value) {
            is String -> {
                // 更新标题视图
            }
            is Int -> {
                // 更新计数视图
            }
        }
    }
})

// 更新数据触发视图更新
myData.title = "New Title"
myData.count = 42

9. 总结

KuiklyUI Pager架构设计体现了现代跨平台UI框架的核心思想，通过清晰的分层设计、模块化架构、响应式编程和跨平台适配，为开发者提供了强大而灵活的页面管理能力。Pager架构的主要优势包括：

  1. 高度模块化：支持核心模块和外部模块的注册与管理，便于功能扩展
  2. 响应式更新：通过ReactiveObserver实现数据与视图的响应式更新
  3. 完善的生命周期：提供完整的页面生命周期管理
  4. 跨平台适配：支持Android、iOS、鸿蒙等多平台适配
  5. 性能优化：包含延迟加载、布局优化、性能监控等机制

通过合理利用Pager架构的特性，开发者可以构建高性能、可维护的跨平台应用。

❌
❌