jsbox-cview 1.6.7 → 1.6.9

package/dist/components/dialogs/dialog-sheet.js

@@ -20,7 +20,7 @@ const single_views_1 = require("../single-views");
 class DialogSheet extends sheet_1.Sheet {
     constructor(props) {
         super({
-            presentMode: props.presentMode || ($device.isIpad ? 2 : 1),
+            presentMode: props.presentMode ?? ($device.isIpad ? 2 : 1),
             bgcolor: props.bgcolor,
         });
         this._props = props;

package/dist/components/dynamic-itemsize-section-matrix.d.ts

@@ -4,29 +4,52 @@ export interface DynamicItemSizeSectionMatrixSection {
     title: string;
     items: Record<string, unknown>[];
 }
-export interface DynamicItemSizeSectionMatrixProps extends Omit<UiTypes.MatrixProps, "data" | "itemSize" | "autoItemSize" | "estimatedItemSize" | "columns" | "square" | "waterfall" | "reorder" | "menu"> {
-    data?: DynamicItemSizeSectionMatrixSection[];
+export interface DynamicItemSizeSectionMatrixCustomSection {
+    title: Record<string, unknown>;
+    titleHeight: number;
+    items: Record<string, unknown>[];
+}
+export type DynamicItemSizeSectionMatrixAnySection = DynamicItemSizeSectionMatrixSection | DynamicItemSizeSectionMatrixCustomSection;
+export type DynamicItemSizeSectionMatrixTitleTemplate = NonNullable<UiTypes.MatrixProps["template"]>;
+interface BaseProps extends Omit<UiTypes.MatrixProps, "data" | "itemSize" | "autoItemSize" | "estimatedItemSize" | "columns" | "square" | "waterfall" | "reorder" | "menu"> {
     fixedItemHeight?: number;
     minItemWidth?: number;
     maxColumns?: number;
     spacing?: number;
 }
+type TitleProps<T extends DynamicItemSizeSectionMatrixAnySection> = [T] extends [
+    DynamicItemSizeSectionMatrixCustomSection
+] ? {
+    sectionTitleTemplate: DynamicItemSizeSectionMatrixTitleTemplate;
+} : [T] extends [DynamicItemSizeSectionMatrixSection] ? {
+    sectionTitleTemplate?: never;
+} : never;
+export type DynamicItemSizeSectionMatrixProps<T extends DynamicItemSizeSectionMatrixAnySection = DynamicItemSizeSectionMatrixSection> = BaseProps & TitleProps<T> & {
+    data?: T[];
+};
 export interface DynamicItemSizeSectionMatrixEvents extends Omit<UiTypes.MatrixEvents, "itemSize" | "reorderBegan" | "reorderMoved" | "canMoveItem" | "reorderFinished"> {
     itemHeight?: (width: number) => number;
 }
 /**
  * # CView Dynamic ItemSize Section Matrix
  *
- * 此组件是为了在 Dynamic ItemSize Matrix 的基础上添加 SectionTitle
+ * 此组件是为了在 Dynamic ItemSize Matrix 的基础上添加 SectionTitle。
+ * SectionTitle 实际上是一个位于每个 section 首位的全宽 header cell，为兼容现有API继续使用title命名。
  *
- * - 使用此组件必须在每个section中添加title，如果title为空字符串，依然添加高度35的空格(包含spacing)
- * - sectionTitle的字体为font(13)，左右边距为16（不含spacing），即总宽度为 totalWidth - 2 * spacing - 32
- * - 由于它必然和底下的item会有spacing，所以不建议spacing设的太大，那样会很违和
- * - sectionTitle会使得section之间的间隔增加自身的高度
- * - matrix事件会自动调整indexPath，包括didSelect、didLongPress、forEachItem
- * - matrix的方法都在该组件中重新实现，自动调整indexPath
- * - 不支持matrix原有的重新排序、自动大小功能，为防止sectionTitle暴露，也不支持menu
- * - 不支持Dynamic ItemSize Matrix的dynamicHeightEnabled、heightToWidth
+ * 注意事项：
+ * 1. 默认模式中每个section的title为字符串；空字符串依然添加高度35的空格(该高度包含spacing)
+ * 2. 默认title的字体为font(13)，左右边距为10，即文本宽度为 totalWidth - 2 * spacing - 20
+ * 3. 提供sectionTitleTemplate后进入自定义模式，title为模板数据，titleHeight为标题cell的实际高度（不包含spacing）
+ * 4. sectionTitle会使得section之间的间隔增加自身的高度
+ * 5. 由于sectionTitle必然和底下的item会有spacing，所以不建议spacing设的太大，那样会很违和
+ * 6. 每个section会使用不可见item补齐最后一行，避免原生Flow Layout将未满行居中排列
+ * 7. matrix事件会自动过滤sectionTitle和不可见item，并调整indexPath，包括didSelect、didLongPress、forEachItem
+ * 8. matrix的方法都在该组件中重新实现，自动调整indexPath
+ *
+ * 不支持：
+ * 1. 不支持matrix原有的重新排序、自动大小功能
+ * 2. 为防止sectionTitle暴露，也不支持menu
+ * 3. 不支持Dynamic ItemSize Matrix的dynamicHeightEnabled、heightToWidth
  *
  * ## 动态调整 itemSize
  *
@@ -48,11 +71,15 @@ export interface DynamicItemSizeSectionMatrixEvents extends Omit<UiTypes.MatrixE
  *
  * 可以使用 matrix 的全部属性。
  *
- * 但data的类型调整为：
+ * 默认模式的data类型为：
  * { title: string; items: Record<string, unknown>[] }
  *
+ * 提供sectionTitleTemplate后，自定义模式的data类型为：
+ * { title: Record<string, unknown>; titleHeight: number; items: Record<string, unknown>[] }
+ *
  * 特殊属性:
  *
+ * - sectionTitleTemplate 自定义section title模板；是否提供该属性即为模式开关
  * - fixedItemHeight 固定 itemSize 高度
  * - minItemWidth 最小的 itemSize 宽度
  * - maxColumns 最大列数
@@ -60,7 +87,7 @@ export interface DynamicItemSizeSectionMatrixEvents extends Omit<UiTypes.MatrixE
  *
  * events:
  *
- * 可以使用 matrix 除 itemSize 以外的全部事件
+ * 可以使用 matrix 事件，但不包括 itemSize 以及与重新排序相关的事件
  *
  * 其他特殊事件:
  *
@@ -77,11 +104,12 @@ export interface DynamicItemSizeSectionMatrixEvents extends Omit<UiTypes.MatrixE
  * - cell(indexPath: NSIndexPath): AllUIView;
  * - scrollTo(args: { indexPath: NSIndexPath; animated?: boolean }): void;
  */
-export declare class DynamicItemSizeSectionMatrix extends Base<UIView, UiTypes.ViewOptions> {
+export declare class DynamicItemSizeSectionMatrix<TSection extends DynamicItemSizeSectionMatrixAnySection = DynamicItemSizeSectionMatrixSection> extends Base<UIView, UiTypes.ViewOptions> {
     _defineView: () => UiTypes.ViewOptions;
     private _props;
     private _data;
     private _events;
+    private _sectionTitleTemplate?;
     private _itemSizeWidth;
     private _itemSizeHeight;
     private _totalWidth;
@@ -92,14 +120,16 @@ export declare class DynamicItemSizeSectionMatrix extends Base<UIView, UiTypes.V
     private _spacing;
     matrix: Matrix;
     constructor({ props, layout, events, }: {
-        props: DynamicItemSizeSectionMatrixProps;
+        props: DynamicItemSizeSectionMatrixProps<TSection>;
         layout: (make: MASConstraintMaker, view: UIView) => void;
         events: DynamicItemSizeSectionMatrixEvents;
     });
+    private _isOriginalItem;
+    private _getSectionTitleHeight;
     private _mapData;
     private _mapTemplate;
-    get data(): DynamicItemSizeSectionMatrixSection[];
-    set data(data: DynamicItemSizeSectionMatrixSection[]);
+    get data(): TSection[];
+    set data(data: TSection[]);
     reload(): void;
     object(indexPath: NSIndexPath): Record<string, unknown>;
     insert({ indexPath, value }: {
@@ -113,3 +143,4 @@ export declare class DynamicItemSizeSectionMatrix extends Base<UIView, UiTypes.V
         animated?: boolean;
     }): void;
 }
+export {};

package/dist/components/dynamic-itemsize-section-matrix.js

@@ -25,19 +25,27 @@ function _getTextHeight(text, width) {
         inset: 0,
     });
 }
+const _defaultSectionTitleHorizontalInset = 10;
 /**
  * # CView Dynamic ItemSize Section Matrix
  *
- * 此组件是为了在 Dynamic ItemSize Matrix 的基础上添加 SectionTitle
+ * 此组件是为了在 Dynamic ItemSize Matrix 的基础上添加 SectionTitle。
+ * SectionTitle 实际上是一个位于每个 section 首位的全宽 header cell，为兼容现有API继续使用title命名。
  *
- * - 使用此组件必须在每个section中添加title，如果title为空字符串，依然添加高度35的空格(包含spacing)
- * - sectionTitle的字体为font(13)，左右边距为16（不含spacing），即总宽度为 totalWidth - 2 * spacing - 32
- * - 由于它必然和底下的item会有spacing，所以不建议spacing设的太大，那样会很违和
- * - sectionTitle会使得section之间的间隔增加自身的高度
- * - matrix事件会自动调整indexPath，包括didSelect、didLongPress、forEachItem
- * - matrix的方法都在该组件中重新实现，自动调整indexPath
- * - 不支持matrix原有的重新排序、自动大小功能，为防止sectionTitle暴露，也不支持menu
- * - 不支持Dynamic ItemSize Matrix的dynamicHeightEnabled、heightToWidth
+ * 注意事项：
+ * 1. 默认模式中每个section的title为字符串；空字符串依然添加高度35的空格(该高度包含spacing)
+ * 2. 默认title的字体为font(13)，左右边距为10，即文本宽度为 totalWidth - 2 * spacing - 20
+ * 3. 提供sectionTitleTemplate后进入自定义模式，title为模板数据，titleHeight为标题cell的实际高度（不包含spacing）
+ * 4. sectionTitle会使得section之间的间隔增加自身的高度
+ * 5. 由于sectionTitle必然和底下的item会有spacing，所以不建议spacing设的太大，那样会很违和
+ * 6. 每个section会使用不可见item补齐最后一行，避免原生Flow Layout将未满行居中排列
+ * 7. matrix事件会自动过滤sectionTitle和不可见item，并调整indexPath，包括didSelect、didLongPress、forEachItem
+ * 8. matrix的方法都在该组件中重新实现，自动调整indexPath
+ *
+ * 不支持：
+ * 1. 不支持matrix原有的重新排序、自动大小功能
+ * 2. 为防止sectionTitle暴露，也不支持menu
+ * 3. 不支持Dynamic ItemSize Matrix的dynamicHeightEnabled、heightToWidth
  *
  * ## 动态调整 itemSize
  *
@@ -59,11 +67,15 @@ function _getTextHeight(text, width) {
  *
  * 可以使用 matrix 的全部属性。
  *
- * 但data的类型调整为：
+ * 默认模式的data类型为：
  * { title: string; items: Record<string, unknown>[] }
  *
+ * 提供sectionTitleTemplate后，自定义模式的data类型为：
+ * { title: Record<string, unknown>; titleHeight: number; items: Record<string, unknown>[] }
+ *
  * 特殊属性:
  *
+ * - sectionTitleTemplate 自定义section title模板；是否提供该属性即为模式开关
  * - fixedItemHeight 固定 itemSize 高度
  * - minItemWidth 最小的 itemSize 宽度
  * - maxColumns 最大列数
@@ -71,7 +83,7 @@ function _getTextHeight(text, width) {
  *
  * events:
  *
- * 可以使用 matrix 除 itemSize 以外的全部事件
+ * 可以使用 matrix 事件，但不包括 itemSize 以及与重新排序相关的事件
  *
  * 其他特殊事件:
  *
@@ -96,6 +108,7 @@ class DynamicItemSizeSectionMatrix extends base_1.Base {
         this._props = props;
         this._data = this._props.data ?? [];
         this._events = events;
+        this._sectionTitleTemplate = props.sectionTitleTemplate;
         this._itemSizeWidth = 0;
         this._itemSizeHeight = 0;
         this._fixedItemHeight = this._props.fixedItemHeight ?? 96;
@@ -103,9 +116,11 @@ class DynamicItemSizeSectionMatrix extends base_1.Base {
         this._maxColumns = this._props.maxColumns ?? 5;
         this._spacing = this._props.spacing ?? 6;
         const { itemHeight, didSelect, didLongPress, forEachItem, ...otherEvents } = this._events;
+        const { sectionTitleTemplate, ...matrixProps } = props;
         this.matrix = new single_views_1.Matrix({
             props: {
-                ...props,
+                ...matrixProps,
+                spacing: this._spacing,
                 data: this._mapData(this._data),
                 template: this._mapTemplate(props.template),
             },
@@ -118,8 +133,7 @@ class DynamicItemSizeSectionMatrix extends base_1.Base {
                     }
                     if (indexPath.item === 0) {
                         const width = Math.max(this._totalWidth - 2 * this._spacing, 32);
-                        const textHeight = _getTextHeight(this._data[indexPath.section].title, width - 32);
-                        const height = textHeight + 35 - this._spacing * (indexPath.section === 0 ? 1 : 2);
+                        const height = this._getSectionTitleHeight(indexPath.section, width);
                         return $size(width, height);
                     }
                     else {
@@ -128,32 +142,23 @@ class DynamicItemSizeSectionMatrix extends base_1.Base {
                 },
                 didSelect: didSelect
                     ? (sender, indexPath) => {
-                        if (indexPath.item === 0) {
+                        if (!this._isOriginalItem(indexPath))
                             return;
-                        }
-                        else {
-                            didSelect(sender, $indexPath(indexPath.section, indexPath.item - 1), this._data[indexPath.section].items[indexPath.item - 1]);
-                        }
+                        didSelect(sender, $indexPath(indexPath.section, indexPath.item - 1), this._data[indexPath.section].items[indexPath.item - 1]);
                     }
                     : undefined,
                 didLongPress: didLongPress
                     ? (sender, indexPath) => {
-                        if (indexPath.item === 0) {
+                        if (!this._isOriginalItem(indexPath))
                             return;
-                        }
-                        else {
-                            didLongPress(sender, $indexPath(indexPath.section, indexPath.item - 1), this._data[indexPath.section].items[indexPath.item - 1]);
-                        }
+                        didLongPress(sender, $indexPath(indexPath.section, indexPath.item - 1), this._data[indexPath.section].items[indexPath.item - 1]);
                     }
                     : undefined,
                 forEachItem: forEachItem
                     ? (sender, indexPath) => {
-                        if (indexPath.item === 0) {
+                        if (!this._isOriginalItem(indexPath))
                             return;
-                        }
-                        else {
-                            forEachItem(sender, $indexPath(indexPath.section, indexPath.item - 1));
-                        }
+                        forEachItem(sender, $indexPath(indexPath.section, indexPath.item - 1));
                     }
                     : undefined,
             },
@@ -174,36 +179,68 @@ class DynamicItemSizeSectionMatrix extends base_1.Base {
                             return;
                         this._totalWidth = sender.frame.width;
                         const { columns, itemSizeWidth } = _getColumnsAndItemSizeWidth(this._totalWidth, this._minItemWidth, this._maxColumns, this._spacing);
+                        const columnsChanged = columns !== this._columns;
                         this._columns = columns;
                         this._itemSizeWidth = itemSizeWidth;
                         this._itemSizeHeight = this._events.itemHeight
                             ? this._events.itemHeight(this._itemSizeWidth)
                             : this._fixedItemHeight;
+                        if (columnsChanged) {
+                            this.matrix.view.data = this._mapData(this._data);
+                        }
                         this.matrix.view.reload();
                     },
                 },
             };
         };
     }
+    _isOriginalItem(indexPath) {
+        const itemCount = this._data[indexPath.section]?.items.length ?? 0;
+        return indexPath.item > 0 && indexPath.item <= itemCount;
+    }
+    _getSectionTitleHeight(section, width) {
+        const sectionData = this._data[section];
+        if (this._sectionTitleTemplate) {
+            return Math.max(sectionData.titleHeight, 1);
+        }
+        const textHeight = _getTextHeight(sectionData.title, width - _defaultSectionTitleHorizontalInset * 2);
+        return textHeight + 35 - this._spacing * (section === 0 ? 1 : 2);
+    }
     _mapData(data) {
         return data.map((n) => {
             const mappedItems = n.items.map((n) => {
                 return {
                     __section_title__: { hidden: true },
+                    __placeholder__: { hidden: true },
                     __original_template__: { hidden: false },
                     ...n,
                 };
             });
+            const placeholderCount = (this._columns - (n.items.length % this._columns)) % this._columns;
+            const placeholders = Array.from({ length: placeholderCount }, () => ({
+                __section_title__: { hidden: true },
+                __placeholder__: { hidden: false },
+                __original_template__: { hidden: true },
+            }));
+            const titleData = this._sectionTitleTemplate
+                ? {
+                    ...n.title,
+                    __section_title__: { hidden: false },
+                    __placeholder__: { hidden: true },
+                    __original_template__: { hidden: true },
+                }
+                : {
+                    __section_title__: { hidden: false },
+                    __placeholder__: { hidden: true },
+                    __section_title_label__: {
+                        hidden: false,
+                        text: n.title,
+                    },
+                    __original_template__: { hidden: true },
+                };
             return {
                 title: "",
-                items: [
-                    {
-                        __section_title__: { hidden: false },
-                        __section_title_label__: { text: n.title },
-                        __original_template__: { hidden: true },
-                    },
-                    ...mappedItems,
-                ],
+                items: [titleData, ...mappedItems, ...placeholders],
             };
         });
     }
@@ -218,6 +255,46 @@ class DynamicItemSizeSectionMatrix extends base_1.Base {
                         id: "__section_title__",
                     },
                     layout: $layout.fill,
+                    views: this._sectionTitleTemplate
+                        ? [
+                            {
+                                type: "view",
+                                props: this._sectionTitleTemplate.props ?? {},
+                                layout: $layout.fill,
+                                views: this._sectionTitleTemplate.views,
+                            },
+                        ]
+                        : [
+                            {
+                                type: "label",
+                                props: {
+                                    id: "__section_title_label__",
+                                    bgcolor: $color("clear"),
+                                    font: $font(13),
+                                    textColor: $color("secondaryText"),
+                                    lines: 0,
+                                },
+                                layout: (make, view) => {
+                                    make.left.right.inset(_defaultSectionTitleHorizontalInset);
+                                    make.bottom.inset(0);
+                                },
+                            },
+                            {
+                                // 在这里放一个透明且无效果的button，从而取消item自己的highlight效果
+                                type: "button",
+                                props: {
+                                    bgcolor: $color("clear"),
+                                },
+                                layout: $layout.fill,
+                            },
+                        ],
+                },
+                {
+                    type: "view",
+                    props: {
+                        id: "__placeholder__",
+                    },
+                    layout: $layout.fill,
                     views: [
                         {
                             // 在这里放一个透明且无效果的button，从而取消item自己的highlight效果
@@ -227,20 +304,6 @@ class DynamicItemSizeSectionMatrix extends base_1.Base {
                             },
                             layout: $layout.fill,
                         },
-                        {
-                            type: "label",
-                            props: {
-                                id: "__section_title_label__",
-                                bgcolor: $color("clear"),
-                                font: $font(13),
-                                textColor: $color("secondaryText"),
-                                lines: 0,
-                            },
-                            layout: (make, view) => {
-                                make.left.right.inset(16);
-                                make.bottom.inset(0);
-                            },
-                        },
                     ],
                 },
                 {

package/dist/components/pageviewer.js

@@ -89,13 +89,22 @@ class PageViewer extends base_1.Base {
         return this._props.page;
     }
     set page(page) {
-        this._props.page = page;
-        if (this.scroll.view.contentOffset.x !== page * this._pageWidth)
+        if (this.scroll.view.contentOffset.x !== page * this._pageWidth) {
             this.scroll.view.contentOffset = $point(page * this._pageWidth, 0);
+        }
+        if (this._props.page !== page) {
+            this._props.page = page;
+            if (this._events.changed)
+                this._events.changed(this, page);
+        }
     }
     scrollToPage(page) {
         this.scroll.view.scrollToOffset($point(page * this._pageWidth, 0));
-        this._props.page = page;
+        if (this._props.page !== page) {
+            this._props.page = page;
+            if (this._events.changed)
+                this._events.changed(this, page);
+        }
     }
 }
 exports.PageViewer = PageViewer;

package/dist/controller/base-controller.d.ts

@@ -1,21 +1,5 @@
 import { Base } from "../components/base";
 import { ContentView } from "../components/single-views";
-/**
- * status
- *   - created = 0 被创建，未被加载
- *   - loaded = 1 被加载，显示状态未知
- *   - appeared= 2 处于可显示状态
- *   - disappeared = 3 处于不显示状态
- *   - removed = 4 根视图被移除
- * 其中只有 2 和 3 可以相互转化，其他不可以
- */
-export declare const controllerStatus: {
-    created: number;
-    loaded: number;
-    appeared: number;
-    disappeared: number;
-    removed: number;
-};
 export declare class ControllerRootView extends ContentView {
     constructor({ props, layout, events, }: {
         props: {
@@ -33,7 +17,6 @@ export interface BaseControllerProps {
     bgcolor?: UIColor;
 }
 export interface BaseControllerEvents {
-    didCreate?: (controller: BaseController) => void;
     didLoad?: (controller: BaseController) => void;
     didAppear?: (controller: BaseController) => void;
     didDisappear?: (controller: BaseController) => void;

package/dist/controller/base-controller.js

@@ -1,26 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseController = exports.ControllerRootView = exports.controllerStatus = void 0;
+exports.BaseController = exports.ControllerRootView = void 0;
 const base_1 = require("../components/base");
 const single_views_1 = require("../components/single-views");
 const cvid_1 = require("../utils/cvid");
 const controller_router_1 = require("./controller-router");
-/**
- * status
- *   - created = 0 被创建，未被加载
- *   - loaded = 1 被加载，显示状态未知
- *   - appeared= 2 处于可显示状态
- *   - disappeared = 3 处于不显示状态
- *   - removed = 4 根视图被移除
- * 其中只有 2 和 3 可以相互转化，其他不可以
- */
-exports.controllerStatus = {
-    created: 0,
-    loaded: 1,
-    appeared: 2,
-    disappeared: 3,
-    removed: 4,
-};
+const controller_status_1 = require("./controller-status");
 class ControllerRootView extends single_views_1.ContentView {
     constructor({ props, layout, events, }) {
         super({ props, layout, events });
@@ -102,7 +87,7 @@ class BaseController {
         this._props = props || {};
         this._events = events;
         this.id = this._props.id || cvid_1.cvid.newId;
-        this._status = exports.controllerStatus.created; // status使用额外的get来使其只读
+        this._status = controller_status_1.controllerStatus.created; // status使用额外的get来使其只读
         this.rootView = new ControllerRootView({
             props: {
                 bgcolor: this._props.bgcolor || $color("primarySurface"),
@@ -116,38 +101,38 @@ class BaseController {
     }
     load() {
         // 只有status为created才可以运行
-        if (this._status !== exports.controllerStatus.created)
+        if (this._status !== controller_status_1.controllerStatus.created)
             return;
-        this._status = exports.controllerStatus.loaded;
+        this._status = controller_status_1.controllerStatus.loaded;
         if (this._events.didLoad)
             this._events.didLoad(this);
         controller_router_1.router.add(this);
     }
     appear() {
         // 只有status为loaded或者disappeared，才可以运行
-        if (this._status !== exports.controllerStatus.loaded && this._status !== exports.controllerStatus.disappeared)
+        if (this._status !== controller_status_1.controllerStatus.loaded && this._status !== controller_status_1.controllerStatus.disappeared)
             return;
         if (this._events.didAppear)
             this._events.didAppear(this);
-        this._status = exports.controllerStatus.appeared;
+        this._status = controller_status_1.controllerStatus.appeared;
     }
     disappear() {
         // 只有status为loaded或者appeared，才可以运行
-        if (this._status !== exports.controllerStatus.loaded && this._status !== exports.controllerStatus.appeared)
+        if (this._status !== controller_status_1.controllerStatus.loaded && this._status !== controller_status_1.controllerStatus.appeared)
             return;
         if (this._events.didDisappear)
             this._events.didDisappear(this);
-        this._status = exports.controllerStatus.disappeared;
+        this._status = controller_status_1.controllerStatus.disappeared;
     }
     // 此方法不能用于移除rootView，其作用是将控制器从Router中移除，并触发didRemove事件
     remove() {
         // 如果已经移除，不可以再次运行
-        if (this._status === exports.controllerStatus.removed)
+        if (this._status === controller_status_1.controllerStatus.removed)
             return;
         if (this._events.didRemove)
             this._events.didRemove(this);
         controller_router_1.router.delete(this);
-        this._status = exports.controllerStatus.removed;
+        this._status = controller_status_1.controllerStatus.removed;
     }
     uirender(props) {
         controller_router_1.router.root = this;

package/dist/controller/controller-router.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.router = void 0;
+const controller_status_1 = require("./controller-status");
 /**
  * 控制器的路由器，用于管理控制器的集合和操作。
  *
@@ -52,7 +53,7 @@ class Router {
     get appeared() {
         const appearedControllers = [];
         for (const c of this._set) {
-            if (c.status === 2)
+            if (c.status === controller_status_1.controllerStatus.appeared)
                 appearedControllers.push(c);
         }
         return appearedControllers;

package/dist/controller/controller-status.d.ts

@@ -0,0 +1,16 @@
+/**
+ * status
+ *   - created = 0 被创建，未被加载
+ *   - loaded = 1 被加载，显示状态未知
+ *   - appeared= 2 处于可显示状态
+ *   - disappeared = 3 处于不显示状态
+ *   - removed = 4 根视图被移除
+ * 其中只有 2 和 3 可以相互转化，其他不可以
+ */
+export declare const controllerStatus: {
+    readonly created: 0;
+    readonly loaded: 1;
+    readonly appeared: 2;
+    readonly disappeared: 3;
+    readonly removed: 4;
+};

package/dist/controller/controller-status.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.controllerStatus = void 0;
+/**
+ * status
+ *   - created = 0 被创建，未被加载
+ *   - loaded = 1 被加载，显示状态未知
+ *   - appeared= 2 处于可显示状态
+ *   - disappeared = 3 处于不显示状态
+ *   - removed = 4 根视图被移除
+ * 其中只有 2 和 3 可以相互转化，其他不可以
+ */
+exports.controllerStatus = {
+    created: 0,
+    loaded: 1,
+    appeared: 2,
+    disappeared: 3,
+    removed: 4,
+};

package/dist/controller/pageviewer-controller.js

@@ -5,6 +5,7 @@ const base_controller_1 = require("./base-controller");
 const pageviewer_1 = require("../components/pageviewer");
 const pageviewer_titlebar_1 = require("../components/pageviewer-titlebar");
 const custom_navigation_bar_1 = require("../components/custom-navigation-bar");
+const controller_status_1 = require("./controller-status");
 /**
  * # CView PageViewer Controller
  *
@@ -23,7 +24,20 @@ class PageViewerController extends base_controller_1.BaseController {
                 bgcolor: props.bgcolor,
             },
             layout,
-            events,
+            events: {
+                didLoad: events.didLoad,
+                didAppear: (controller) => {
+                    props.items[this.index].controller.appear();
+                    events.didAppear?.(controller);
+                },
+                didDisappear: (controller) => {
+                    props.items.forEach((item) => item.controller.disappear());
+                    events.didDisappear?.(controller);
+                },
+                didRemove: (controller) => {
+                    events.didRemove?.(controller);
+                },
+            },
         });
         this._props = props;
         this.cviews = {};
@@ -37,13 +51,28 @@ class PageViewerController extends base_controller_1.BaseController {
                 make.top.equalTo(view.prev.bottom);
             },
             events: {
-                floatPageChanged: (cview, floatPage) => (this.cviews.titlebar.floatedIndex = floatPage),
+                floatPageChanged: (cview, floatPage) => {
+                    this.cviews.titlebar.floatedIndex = floatPage;
+                },
+                changed: (cview, page) => {
+                    this._props.index = page;
+                    if (this.status !== controller_status_1.controllerStatus.appeared)
+                        return;
+                    this._props.items.forEach((item, i) => {
+                        if (i === page) {
+                            item.controller.appear();
+                        }
+                        else {
+                            item.controller.disappear();
+                        }
+                    });
+                },
             },
         });
         this.cviews.titlebar = new pageviewer_titlebar_1.PageViewerTitleBar({
             props: {
                 items: this._props.items.map((n) => n.title),
-                index: this._props.index || 0,
+                index: this._props.index ?? 0,
             },
             layout: $layout.fill,
             events: {

package/dist/controller/splitview-controller.js

@@ -5,6 +5,7 @@ const base_controller_1 = require("./base-controller");
 const base_1 = require("../components/base");
 const single_views_1 = require("../components/single-views");
 const cvid_1 = require("../utils/cvid");
+const controller_status_1 = require("./controller-status");
 class SecondaryView extends base_1.Base {
     constructor({ props, layout, views = [], }) {
         super();
@@ -207,13 +208,13 @@ class SplitViewController extends base_controller_1.BaseController {
         this.rootView.views = [this.cviews.secondaryView, this.cviews.primaryView];
     }
     load() {
-        if (this.status !== base_controller_1.controllerStatus.created)
+        if (this.status !== controller_status_1.controllerStatus.created)
             return;
         super.load();
         this._renewScreenEdgePanGesture();
     }
     remove() {
-        if (this.status === base_controller_1.controllerStatus.removed)
+        if (this.status === controller_status_1.controllerStatus.removed)
             return;
         $objc_release(this._screenEdgePanGestureObject);
         this.cviews.maskView.releaseGestureObject();

package/dist/controller/tabbar-controller.js

@@ -4,6 +4,7 @@ exports.TabBarController = void 0;
 const base_controller_1 = require("./base-controller");
 const single_views_1 = require("../components/single-views");
 const tabbar_1 = require("../components/tabbar");
+const controller_status_1 = require("./controller-status");
 /**
  * # CView TabBar Controller
  *
@@ -86,7 +87,7 @@ class TabBarController extends base_controller_1.BaseController {
             n.view.hidden = i !== num;
         });
         this._props.index = num;
-        this._props.items.find((item) => item.controller.status === 2)?.controller.disappear();
+        this._props.items.find((item) => item.controller.status === controller_status_1.controllerStatus.appeared)?.controller.disappear();
         this._props.items[num].controller.appear();
     }
     get index() {

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export * from "./components/single-views";
 export * from "./components/static-preference-listview";
 export * from "./components/symbol-button";
 export * from "./components/tabbar";
+export * from "./controller/controller-status";
 export * from "./controller/base-controller";
 export * from "./controller/controller-router";
 export * from "./controller/pageviewer-controller";

package/dist/index.js

@@ -37,6 +37,7 @@ __exportStar(require("./components/single-views"), exports);
 __exportStar(require("./components/static-preference-listview"), exports);
 __exportStar(require("./components/symbol-button"), exports);
 __exportStar(require("./components/tabbar"), exports);
+__exportStar(require("./controller/controller-status"), exports);
 __exportStar(require("./controller/base-controller"), exports);
 __exportStar(require("./controller/controller-router"), exports);
 __exportStar(require("./controller/pageviewer-controller"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsbox-cview",
-  "version": "1.6.7",
+  "version": "1.6.9",
   "description": "为 JSBox 设计的微型框架",
   "repository": {
     "type": "git",