jsbox-cview 1.3.5 → 1.4.0

package/dist/components/alert/login-alert.js

@@ -1,13 +1,18 @@
 "use strict";
-/**
- * # CView LoginAlert
- *
- * 显示一个登录输入框提示
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loginAlert = void 0;
 const uialert_1 = require("./uialert");
 const l10n_1 = require("../../utils/l10n");
+/**
+ * 显示一个登录输入框提示
+ *
+ * @param title 标题
+ * @param message 内容
+ * @param placeholder1 输入框1的占位符
+ * @param placeholder2 输入框2的占位符
+ * @param cancelText 取消按钮文字
+ * @param confirmText 确认按钮文字
+ */
 function loginAlert({ title = "", message = "", placeholder1 = "", placeholder2 = "", cancelText = (0, l10n_1.l10n)("CANCEL"), confirmText = (0, l10n_1.l10n)("OK") } = {}) {
     return new Promise((resolve, reject) => {
         const alertVC = new uialert_1.UIAlertController(title, message, uialert_1.UIAlertControllerStyle.Alert);

package/dist/components/alert/plain-alert.js

@@ -1,13 +1,17 @@
 "use strict";
-/**
- * # CView PlainAlert
- *
- * 显示一个文字提示
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.plainAlert = void 0;
 const uialert_1 = require("./uialert");
 const l10n_1 = require("../../utils/l10n");
+/**
+ * 显示一个文字提示
+ *
+ * @param title 标题
+ * @param message 内容
+ * @param cancelText 取消按钮文字
+ * @param confirmText 确认按钮文字
+ * @returns Promise
+ */
 function plainAlert({ title = "", message = "", cancelText = (0, l10n_1.l10n)("CANCEL"), confirmText = (0, l10n_1.l10n)("OK") } = {}) {
     return new Promise((resolve, reject) => {
         const alertVC = new uialert_1.UIAlertController(title, message, uialert_1.UIAlertControllerStyle.Alert);

package/dist/components/alert/uialert.js

@@ -1,7 +1,4 @@
 "use strict";
-/**
- * Alert的基础类
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UIAlertController = exports.UIAlertAction = exports.UIAlertControllerStyle = exports.UIAlertActionStyle = void 0;
 exports.UIAlertActionStyle = {
@@ -25,6 +22,9 @@ class UIAlertAction {
     }
 }
 exports.UIAlertAction = UIAlertAction;
+/**
+ * Alert的基础类
+ */
 class UIAlertController {
     constructor(title, message, style = exports.UIAlertControllerStyle.ActionSheet) {
         this.title = title;

package/dist/components/base.js

@@ -1,6 +1,9 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Base = void 0;
+const cvid_1 = require("../utils/cvid");
 /**
- * # Base<T extends AllUIView, R extends UiTypes.AllViewOptions>
+ *
  * 组件 Base 基类，用于创建自定义组件。CView 的所有子类都应该继承自 Base。
  *
  * ## 属性
@@ -16,9 +19,6 @@
  * - 通过组件化的方式，将JSBox view的定义和实例绑定，使用起来更加方便
  * - 可以便利地创建自定义组件
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Base = void 0;
-const cvid_1 = require("../utils/cvid");
 class Base {
     constructor() {
         this.id = cvid_1.cvid.newId;

package/dist/components/custom-navigation-bar.js

@@ -1,4 +1,34 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomNavigationBar = void 0;
+const base_1 = require("./base");
+const single_views_1 = require("./single-views");
+const symbol_button_1 = require("./symbol-button");
+const uitools_1 = require("../utils/uitools");
+const navBarStyles = {
+    hidden: 0,
+    minimized: 1,
+    normal: 2,
+    expanded: 3
+};
+const navBarLayouts = [
+    (make, view) => {
+        make.left.right.top.inset(0);
+        make.height.equalTo(0);
+    },
+    (make, view) => {
+        make.left.right.top.inset(0);
+        make.bottom.equalTo(view.super.safeAreaTop).inset(-25);
+    },
+    (make, view) => {
+        make.left.right.top.inset(0);
+        make.bottom.equalTo(view.super.safeAreaTop).inset(-50);
+    },
+    (make, view) => {
+        make.left.right.top.inset(0);
+        make.bottom.equalTo(view.super.safeAreaTop).inset(-100);
+    }
+];
 /**
  * # CView Custom NavigationBar
  *
@@ -51,36 +81,6 @@
  * - restore() 普通布局
  * - expand() 扩展布局
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomNavigationBar = void 0;
-const base_1 = require("./base");
-const single_views_1 = require("./single-views");
-const symbol_button_1 = require("./symbol-button");
-const uitools_1 = require("../utils/uitools");
-const navBarStyles = {
-    hidden: 0,
-    minimized: 1,
-    normal: 2,
-    expanded: 3
-};
-const navBarLayouts = [
-    (make, view) => {
-        make.left.right.top.inset(0);
-        make.height.equalTo(0);
-    },
-    (make, view) => {
-        make.left.right.top.inset(0);
-        make.bottom.equalTo(view.super.safeAreaTop).inset(-25);
-    },
-    (make, view) => {
-        make.left.right.top.inset(0);
-        make.bottom.equalTo(view.super.safeAreaTop).inset(-50);
-    },
-    (make, view) => {
-        make.left.right.top.inset(0);
-        make.bottom.equalTo(view.super.safeAreaTop).inset(-100);
-    }
-];
 class CustomNavigationBar extends base_1.Base {
     constructor({ props = {}, events = {} } = {}) {
         super();

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

@@ -1,22 +1,19 @@
 "use strict";
-/**
- * # cview DialogSheet
- *
- * dialog所需要的sheet
- *
- * ## 参数
- * - `title` 标题
- * - `cview` CView
- * - `doneHandler` 完成时的回调
- * - `presentMode` presentMode
- * - `bgcolor` 背景颜色
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogSheet = void 0;
 const sheet_1 = require("../sheet");
 const custom_navigation_bar_1 = require("../custom-navigation-bar");
 const l10n_1 = require("../../utils/l10n");
 const single_views_1 = require("../single-views");
+/**
+ * dialog所需要的sheet
+ *
+ * @param title 标题
+ * @param cview 内容视图
+ * @param doneHandler 完成时的回调
+ * @param presentMode 显示模式
+ * @param bgcolor 背景颜色
+ */
 class DialogSheet extends sheet_1.Sheet {
     constructor(props) {
         super({

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

@@ -1,13 +1,13 @@
 "use strict";
-/**
- * # CView Form Dialog
- *
- * 显示一个表单
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formDialog = void 0;
 const static_preference_listview_1 = require("../static-preference-listview");
 const dialog_sheet_1 = require("./dialog-sheet");
+/**
+ * 显示一个表单
+ * @param sections 表单分组, 请参考`PreferenceListView`中的`PreferenceSection`
+ * @param title 标题
+ */
 function formDialog({ sections, title }) {
     const view = new static_preference_listview_1.PreferenceListView({ sections });
     const sheet = new dialog_sheet_1.DialogSheet({

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

@@ -1,13 +1,17 @@
 "use strict";
-/**
- * # CView List Dialog
- *
- * 显示一个列表以供选择
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.listDialog = void 0;
 const dialog_sheet_1 = require("./dialog-sheet");
 const single_views_1 = require("../single-views");
+/**
+ * 显示一个列表以供选择
+ *
+ * @param items 选项
+ * @param multiSelectEnabled 是否允许多选
+ * @param value 默认选中的选项
+ * @param values 默认选中的选项, 配合multiSelectEnabled使用
+ * @param title 标题
+ */
 function listDialog({ items, multiSelectEnabled, value, values = [], title }) {
     if (value)
         values = [value];

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

@@ -1,13 +1,15 @@
 "use strict";
-/**
- * # CView Text Dialog
- *
- * 返回一个Promise用于输入文本
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.textDialog = void 0;
 const single_views_1 = require("../single-views");
 const dialog_sheet_1 = require("./dialog-sheet");
+/**
+ * 返回一个Promise用于输入文本
+ * @param title 标题
+ * @param text 初始文本
+ * @param placeholder 占位符
+ * @param editable 是否可编辑
+ */
 function textDialog({ title, text = "", placeholder = "", editable = true }) {
     const textView = new single_views_1.Text({
         props: {

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

@@ -1,4 +1,19 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DynamicItemSizeMatrix = void 0;
+const base_1 = require("./base");
+const single_views_1 = require("./single-views");
 /**
  * # CView Dynamic ItemSize Matrix
  *
@@ -41,21 +56,6 @@
  * 方法:
  * - heightToWidth(width) 计算特定width时的应有的高度
  */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicItemSizeMatrix = void 0;
-const base_1 = require("./base");
-const single_views_1 = require("./single-views");
 class DynamicItemSizeMatrix extends base_1.Base {
     constructor({ props, layout, events = {} }) {
         super();

package/dist/components/dynamic-preference-listview.js

@@ -1,4 +1,8 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DynamicPreferenceListView = void 0;
+const base_1 = require("./base");
+const static_preference_listview_1 = require("./static-preference-listview");
 /**
  * # cview PreferenceListView_dynamic
  *
@@ -25,10 +29,6 @@
  *
  * - cview.sections = sections 可以写入新的 sections
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicPreferenceListView = void 0;
-const base_1 = require("./base");
-const static_preference_listview_1 = require("./static-preference-listview");
 class DynamicPreferenceListView extends base_1.Base {
     constructor({ sections, props, layout, events = {} }) {
         super();

package/dist/components/dynamic-rowheight-list.js

@@ -1,4 +1,7 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DynamicRowHeightList = void 0;
+const base_1 = require("./base");
 /**
  * # cview Dynamic RowHeight List
  *
@@ -14,9 +17,6 @@
  *
  * 除了 props.data, props.template 和 events.rowHeight 不可用，其他均和 list 一致
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicRowHeightList = void 0;
-const base_1 = require("./base");
 class DynamicRowHeightList extends base_1.Base {
     constructor({ sections, rows, props, layout, events }) {
         super();

package/dist/components/enhanced-imageview.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EnhancedImageView = void 0;
+const base_1 = require("./base");
+const single_views_1 = require("./single-views");
+const cvid_1 = require("../utils/cvid");
 /**
  * 此组件是为了加强 imageView，实现以下目的：
  *  1. 点击实现上下翻页
@@ -18,9 +21,6 @@ exports.EnhancedImageView = void 0;
  * upperLocationTouched: (sender: EnhancedImageView) => void, 上半部分被点击
  * lowerLocationTouched: (sender: EnhancedImageView) => void, 下半部分被点击
  */
-const base_1 = require("./base");
-const single_views_1 = require("./single-views");
-const cvid_1 = require("../utils/cvid");
 class EnhancedImageView extends base_1.Base {
     constructor({ props, layout, events = {} }) {
         super();

package/dist/components/flowlayout.js

@@ -0,0 +1,184 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Flowlayout = void 0;
+const base_1 = require("./base");
+/**
+ * 流式布局：间距固定，项目高度固定但宽度不定，左对齐，自动换行，不能滚动。
+ *
+ * 注意事项:
+ * 1. 此控件默认是可变高度的，但前提是布局中必须有关于高度的约束。如果不需要可变高度，可以设置fixedHeight为true
+ * 1. 此控件的边缘是不留白的，这和Matrix不同
+ * 2. itemWidth 如果超过总宽度，会被设定为总宽度
+ * 3. maxRows 可以控制最大行数，如果超过则会被截断
+ *
+ * ## 属性
+ * 属性的写法尽可能和Matrix的风格保持一致
+ * - items: FlowlayoutItem[] 关键参数，必须实现一个方法itemWidth(): number, 用于告知自身理想的宽度
+ * - spacing: number
+ * - itemHeight: number
+ * - maxRows?: number
+ * - fixedHeight?: boolean
+ * - menu?: UiTypes.ContextMenuOptions
+ *
+ * ## 事件
+ * - didSelect: (sender: Flowlayout, index: number, item: FlowlayoutItem) => void
+ * - didLongPress: (sender: Flowlayout, index: number, item: FlowlayoutItem) => void
+ *
+ * ## 方法
+ * - heightToWidth(width: number): height: number  根据宽度计算其应有的高度
+ * - cell(index: number): FlowlayoutItem  获取对应位置的 cview
+ * - set items(items: FlowlayoutItem[])  设置子视图
+ * - get items(): FlowlayoutItem[]  获取子视图
+ */
+class Flowlayout extends base_1.Base {
+    constructor({ props, layout, events }) {
+        super();
+        this._width = 0;
+        this._props = props;
+        this._events = events;
+        this._wrappers = props.items.map((item, index) => new WrapperView({
+            item,
+            menu: props.menu,
+            didSelect: events === null || events === void 0 ? void 0 : events.didSelect,
+            didLongPress: events === null || events === void 0 ? void 0 : events.didLongPress,
+            flowlayout: this,
+            index
+        }));
+        this._defineView = () => ({
+            type: "view",
+            props: {
+                id: this.id
+            },
+            layout,
+            events: {
+                layoutSubviews: sender => {
+                    if (this._width !== sender.frame.width) {
+                        this._width = sender.frame.width;
+                        const height = this._layoutWrappers();
+                        if (!this._props.fixedHeight)
+                            sender.updateLayout((make) => make.height.equalTo(height));
+                    }
+                }
+            },
+            views: this._wrappers.map(wrapper => wrapper.definition)
+        });
+    }
+    cell(index) {
+        return this._props.items[index];
+    }
+    get items() {
+        return this._props.items;
+    }
+    set items(items) {
+        this._props.items = items;
+        this._wrappers = items.map((item, index) => {
+            var _a, _b;
+            return new WrapperView({
+                item,
+                menu: this._props.menu,
+                didSelect: (_a = this._events) === null || _a === void 0 ? void 0 : _a.didSelect,
+                didLongPress: (_b = this._events) === null || _b === void 0 ? void 0 : _b.didLongPress,
+                flowlayout: this,
+                index
+            });
+        });
+        this.view.views.forEach(v => v.remove());
+        this._wrappers.forEach(wrapper => this.view.add(wrapper.definition));
+        const height = this._layoutWrappers();
+        if (!this._props.fixedHeight)
+            this.view.updateLayout((make) => make.height.equalTo(height));
+    }
+    _layoutWrappers() {
+        const totalWidth = this._width;
+        const itemHeight = this._props.itemHeight;
+        const itemSpacing = this._props.spacing;
+        let x = 0;
+        let y = 0;
+        let line = 1;
+        this._wrappers.forEach((wrapper, index) => {
+            const itemWidth = wrapper.item.itemWidth();
+            const width = Math.min(itemWidth, totalWidth);
+            if (x + width > totalWidth) {
+                x = 0;
+                y += itemHeight + itemSpacing;
+                line++;
+            }
+            if (this._props.fixedRows && line > this._props.fixedRows) {
+                wrapper.hidden = true;
+            }
+            else {
+                wrapper.hidden = false;
+            }
+            wrapper.frame = $rect(x, y, width, itemHeight);
+            x += width + itemSpacing;
+        });
+        if (this._props.fixedRows && line > this._props.fixedRows) {
+            return this._props.fixedRows * (itemHeight + itemSpacing) - itemSpacing;
+        }
+        return y + itemHeight;
+    }
+    heightToWidth(width) {
+        const totalWidth = width;
+        const itemHeight = this._props.itemHeight;
+        const itemSpacing = this._props.spacing;
+        let x = 0;
+        let y = 0;
+        let line = 1;
+        this._wrappers.forEach((wrapper, index) => {
+            const itemWidth = wrapper.item.itemWidth();
+            const width = Math.min(itemWidth, totalWidth);
+            if (x + width > totalWidth) {
+                x = 0;
+                y += itemHeight + itemSpacing;
+                line++;
+            }
+            x += width + itemSpacing;
+        });
+        if (this._props.fixedRows && line > this._props.fixedRows) {
+            return this._props.fixedRows * (itemHeight + itemSpacing) - itemSpacing;
+        }
+        return y + itemHeight;
+    }
+}
+exports.Flowlayout = Flowlayout;
+class WrapperView extends base_1.Base {
+    constructor({ item, menu, didSelect, didLongPress, flowlayout, index }) {
+        super();
+        this.item = item;
+        const props = {
+            id: this.id,
+            frame: $rect(0, 0, 0, 0),
+            userInteractionEnabled: true,
+        };
+        if (menu) {
+            props.menu = menu;
+        }
+        this._defineView = () => ({
+            type: "view",
+            props,
+            views: [item.definition],
+            events: {
+                tapped: sender => {
+                    if (didSelect)
+                        didSelect(flowlayout, index, item);
+                },
+                longPressed: sender => {
+                    if (didLongPress)
+                        didLongPress(flowlayout, index, item);
+                }
+            }
+        });
+    }
+    set frame(frame) {
+        this.view.frame = frame;
+    }
+    get frame() {
+        return this.view.frame;
+    }
+    set hidden(hidden) {
+        this.view.hidden = hidden;
+    }
+    get hidden() {
+        return this.view.hidden;
+    }
+}

package/dist/components/image-pager.js

@@ -1,20 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImagePager = void 0;
+const base_1 = require("./base");
+const single_views_1 = require("./single-views");
 /**
- * 与内置的Gallery组件相比，ImagePager组件可以动态刷新，适用于图片数量较多的场景，以及需要动态加载图片列表的场景
+ * 图片浏览组件
  *
- * # Props
- * srcs: string[] - 图片地址列表
- * page: number - 当前页码
+ * 与内置的Gallery组件相比，ImagePager组件可以动态刷新，适用于图片数量较多的场景，以及需要动态加载图片列表的场景
  *
- * # Events
- * changed: (page: number) => void - 页码变化时触发
- * tapped: (sender: ImagePager) => void - 点击图片时触发
  */
-const base_1 = require("./base");
-const single_views_1 = require("./single-views");
 class ImagePager extends base_1.Base {
+    /**
+     *
+     * @param props
+     * - srcs: string[] - 图片地址列表
+     * - page: number - 当前页码
+     * @param layout
+     * @param events
+     * - changed: (page: number) => void - 页码变化时触发
+     * - tapped: (sender: ImagePager) => void - 点击图片时触发
+     */
     constructor({ props, layout, events = {} }) {
         super();
         this._props = Object.assign({ srcs: [], page: 0 }, props);

package/dist/components/page-control.js

@@ -1,22 +1,4 @@
 "use strict";
-/**
- * # CView PageControl
- *
- * 基于 Runtime 构建 PageControl
- *
- * 请注意本视图如果没有足够的横向宽度，会显示不全
- * ## Props
- *
- * - 只写 numberOfPages: numnber
- * - 读写 currentPage: number
- * - 只写 pageIndicatorTintColor?: JSBoxColor
- * - 只写 currentPageIndicatorTintColor?: JSBoxColor
- * - 其他通用属性
- *
- * ## Events
- *
- * changed: (cview: Cview, currentPage: number) => void
- */
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -31,7 +13,28 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageControl = void 0;
 const single_views_1 = require("./single-views");
+/**
+ *
+ * 基于 Runtime 构建 PageControl
+ *
+ * 请注意本视图如果没有足够的横向宽度，会显示不全
+ *
+ * @property currentPage: number
+ *
+ */
 class PageControl extends single_views_1.Runtime {
+    /**
+     *
+     * @param props 属性
+     * - numberOfPages: 页面数量
+     * - currentPage: 当前页面
+     * - pageIndicatorTintColor?: 页面指示器颜色
+     * - currentPageIndicatorTintColor?: 当前页面指示器颜色
+     * @param layout 布局
+     * @param events 事件
+     * - changed: (sender: PageControl, currentPage: number) => void
+     *
+     */
     constructor({ props, layout, events = {} }) {
         const { numberOfPages = 3, currentPage = 0, pageIndicatorTintColor, currentPageIndicatorTintColor } = props, restProps = __rest(props, ["numberOfPages", "currentPage", "pageIndicatorTintColor", "currentPageIndicatorTintColor"]);
         const { changed } = events, restEvents = __rest(events, ["changed"]);

package/dist/components/pageviewer-titlebar.js

@@ -1,18 +1,4 @@
 "use strict";
-/**
- * # CView PageViewer TitleBar
- *
- * props:
- *
- * - 只写 items: string[]
- * - 读写 index: number
- * - 只写 selectedItemColor
- * - 只写 defaultItemColor
- *
- * events:
- *
- * - changed: (cview, index) => void 在点击变更 index 的时候回调
- */
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -28,14 +14,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageViewerTitleBar = void 0;
 const base_1 = require("./base");
 const single_views_1 = require("./single-views");
-//const { getTextWidth } = require("cview-util-ui");
 function weightedAverageColors(c0, c1, w) {
     const red = c0.components.red * w + c1.components.red * (1 - w);
     const green = c0.components.green * w + c1.components.green * (1 - w);
     const blue = c0.components.blue * w + c1.components.blue * (1 - w);
     return $rgb(red, green, blue);
 }
+/**
+ * [PageViewer](./pageviewer.ts)配套的标题栏
+ * @property index: number
+ */
 class PageViewerTitleBar extends base_1.Base {
+    /**
+     *
+     * @param props 属性
+     * - items: string[]
+     * - index: number
+     * - selectedItemColor
+     * - defaultItemColor
+     * @param layout 布局
+     * @param events 事件
+     * - changed: (cview, index) => void 在点击变更 index 的时候回调
+     */
     constructor({ props, layout, events = {} }) {
         super();
         this._props = Object.assign({ index: 0, selectedItemColor: $color("systemLink"), defaultItemColor: $color("secondaryText") }, props);