diff --git a/en/application-dev/reference/apis/Readme-EN.md b/en/application-dev/reference/apis/Readme-EN.md index ce0efae9c569f69985be2526d645acc322e9f01e..1caec073b4827d78cd75f8238251af09edee81a0 100644 --- a/en/application-dev/reference/apis/Readme-EN.md +++ b/en/application-dev/reference/apis/Readme-EN.md @@ -38,6 +38,7 @@ - [Radio](js-apis-radio.md) - Network and Connectivity - [WLAN](js-apis-wifi.md) + - [Bluetooth](js-apis-bluetooth.md) - Device Management - [Sensors](js-apis-sensor.md) - [Vibration](js-apis-vibrator.md) diff --git a/en/application-dev/reference/apis/js-apis-bluetooth.md b/en/application-dev/reference/apis/js-apis-bluetooth.md new file mode 100644 index 0000000000000000000000000000000000000000..86f2ed4fb55a6e10a349f96aef070a8b3e60fbb3 --- /dev/null +++ b/en/application-dev/reference/apis/js-apis-bluetooth.md @@ -0,0 +1,2467 @@ +# Bluetooth + +> **Note:** +> The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version. + +The Bluetooth module provides Classic Bluetooth capabilities and Bluetooth Low Energy (BLE) scan and advertising. + +## Modules to Import + +``` +import bluetooth from '@ohos.bluetooth'; +``` + + +## Required Permissions + +ohos.permission.USE_BLUETOOTH + +ohos.permission.MANAGE_BLUETOOTH + +ohos.permission.DISCOVER_BLUETOOTH + +ohos.permission.LOCATION + + +## bluetooth.enableBluetooth + +enableBluetooth(): boolean + +Enables Bluetooth. + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if Bluetooth is enabled; returns **false** otherwise. | + +**Example:** + +``` +let enable = bluetooth.enableBluetooth(); +``` + + +## bluetooth.disableBluetooth + +disableBluetooth(): boolean + +Disables Bluetooth. + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if Bluetooth is disabled; returns **false** otherwise. | + +**Example:** + +``` +let disable = bluetooth.disableBluetooth(); +``` + + +## bluetooth.getLocalName + +getLocalName(): string + +Obtains the name of the local Bluetooth device. + +**Return values:** + +| Type | Description | +| -------- | -------- | +| string | Name of the local Bluetooth device. | + +**Example:** + +``` +let localName = bluetooth.getLocalName(); +``` + + +## bluetooth.getState + +getState(): BluetoothState + +Obtains the Bluetooth state. + +**Return values:** + +| Type | Description | +| -------- | -------- | +| [BluetoothState](#bluetoothstate) | Bluetooth state obtained. | + +**Example:** + +``` +let state = bluetooth.getState(); +``` + + +## bluetooth.getBtConnectionState + +getBtConnectionState(): ProfileConnectionState + +Obtains the profile connection state of this Bluetooth device. + +**Return values:** + +| Type | Description | +| -------- | -------- | +| [ProfileConnectionState](#profileconnectionstate) | Profile connection state obtained. | + +**Example:** + +``` +let connectionState = bluetooth.getBtConnectionState(); +``` + + +## bluetooth.setLocalName + +setLocalName(name: string): boolean + +Sets the name of the local Bluetooth device. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| name | string | Yes | Bluetooth device name to be set. It cannot exceed 128 characters. | + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +let ret = bluetooth.setLocalName('device_name'); +``` + + +## bluetooth.pairDevice + +pairDevice(deviceId: string): boolean + +Initiates Bluetooth pairing. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| deviceId | string | Yes | Address of the peer device to pair, for example, **8F:8F:8E:8E:6D:6D**. | + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +// The actual address can be scanned. +let result = bluetooth.pairDevice("8F:8F:8E:8E:6D:6D"); +``` + + +## bluetooth.getPairedDevices + +getPairedDevices(): Array<string> + +Obtains the Bluetooth pairing list. + +**Return values:** + +| Type | Description | +| -------- | -------- | +| Array<string> | List of the addresses of the paired Bluetooth devices. | + +**Example:** + +``` +let devices = bluetooth.getPairedDevices(); +``` + + +## bluetooth.setBluetoothScanMode + +setBluetoothScanMode(mode: ScanMode, duration: number): boolean + +Sets the Bluetooth scan mode so that the device can be discovered by a peer device. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| mode | [ScanMode](#scanmode) | Yes | Bluetooth scan mode. | +| duration | number | Yes | Duration (in seconds) in which the device can be discovered. The value **0** indicates unlimited time. | + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +// The device can be discovered and connected only when the discoverable and connectable mode is used. +let result = bluetooth.setBluetoothScanMode(ScanMode.SCAN_MODE_CONNECTABLE_GENERAL_DISCOVERABLE, 100); +``` + + +## bluetooth.getBluetoothScanMode + +getBluetoothScanMode(): ScanMode + +Obtains the Bluetooth scan mode. + +**Return values:** + +| Type | Description | +| -------- | -------- | +| [ScanMode](#scanmode) | Bluetooth scan mode obtained. | + +**Example:** + +``` +let scanMode = bluetooth.getBluetoothScanMode(); +``` + + +## bluetooth.startBluetoothDiscovery + +startBluetoothDiscovery(): boolean + +Starts Bluetooth scan to discover peer devices. + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +let deviceId; +function onReceiveEvent(data) { + deviceId = data; +} +bluetooth.on('bluetoothDeviceFind', onReceiveEvent); +let result = bluetooth.startBluetoothDiscovery(); +``` + + +## bluetooth.stopBluetoothDiscovery + +stopBluetoothDiscovery(): boolean + +Stops Bluetooth scan. + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +let result = bluetooth.stopBluetoothDiscovery(); +``` + + +## bluetooth.setDevicePairingConfirmation + +setDevicePairingConfirmation(device: string, accept: boolean): boolean + +Sets the device pairing confirmation. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| device | string | Yes | Address of the peer device, for example, **8F:8F:8E:8E:6D:6D**. | +| accept | boolean | Yes | Whether to accept the pairing request. The value **true** means to accept the pairing request, and the value **false** means the opposite. | + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +// Subscribe to the pinRequired event and configure the pairing confirmation after receiving a pairing request from the peer device. +function onReceivePinRequiredEvent(data) { // data is the input parameter for the pairing request. + console.info('pin required = '+ JSON.stringify(data)); + bluetooth.setDevicePairingConfirmation(data.deviceId, true); +} +bluetooth.on("pinRequired", onReceivePinRequiredEvent); +``` + + +## bluetooth.on('bluetoothDeviceFind') + +on(type: "bluetoothDeviceFind", callback: Callback<Array<string>>): void + +Subscribes to the Bluetooth device discovery events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **bluetoothDeviceFind** indicates an event reported when a Bluetooth device is discovered. | +| callback | Callback<Array<string>> | Yes | Callback invoked to return the discovered devices. You need to implement this callback. | + +**Return values:** + +None. + +**Example:** + +``` +function onReceiveEvent(data) { // data is a set of Bluetooth device addresses. + console.info('bluetooth device find = '+ JSON.stringify(data)); +} +bluetooth.on('bluetoothDeviceFind', onReceiveEvent); +``` + + +## bluetooth.off('bluetoothDeviceFind') + +off(type: "bluetoothDeviceFind", callback?: Callback<Array<string>>): void + +Unsubscribes from the Bluetooth device discovery events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **bluetoothDeviceFind** indicates an event reported when a Bluetooth device is discovered. | +| callback | Callback<Array<string>> | No | Callback used to report the discovered devices. If this parameter is not set, this method unsubscribes from all callbacks corresponding to **type**. | + +**Return values:** + +None. + +**Example:** + +``` +function onReceiveEvent(data) { + console.info('bluetooth device find = '+ JSON.stringify(data)); +} +bluetooth.on('bluetoothDeviceFind', onReceiveEvent); +bluetooth.off('bluetoothDeviceFind', onReceiveEvent); +``` + + +## bluetooth.on('pinRequired') + +on(type: "pinRequired", callback: Callback<PinRequiredParam>): void + +Subscribes to the pairing request events of the peer Bluetooth device. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **pinRequired** indicates a pairing request event. | +| callback | Callback<[PinRequiredParam](#pinrequiredparam)> | Yes | Callback invoked to return the pairing request. You need to implement this callback. | + +**Return values:** + +None. + +**Example:** + +``` +function onReceiveEvent(data) { // data is the pairing request parameter. + console.info('pin required = '+ JSON.stringify(data)); +} +bluetooth.on('pinRequired', onReceiveEvent); +``` + + +## bluetooth.off('pinRequired') + +off(type: "pinRequired", callback?: Callback<PinRequiredParam>): void + +Unsubscribes from the pairing request events of the peer Bluetooth device. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **pinRequired** indicates a pairing request event. | +| callback | Callback<[PinRequiredParam](#pinrequiredparam)> | No | Callback used to report the Bluetooth pairing request. The input parameter is the pairing request parameter. If this parameter is not set, this method unsubscribes from all callbacks corresponding to **type**. | + +**Return values:** + +None. + +**Example:** + +``` +function onReceiveEvent(data) { + console.info('pin required = '+ JSON.stringify(data)); +} +bluetooth.on('pinRequired', onReceiveEvent); +bluetooth.off('pinRequired', onReceiveEvent); +``` + + +## bluetooth.on('bondStateChange') + +on(type: "bondStateChange", callback: Callback<BondState>): void + +Subscribes to the Bluetooth pairing state change events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **bondStateChange** indicates a Bluetooth pairing state change event. | +| callback | Callback<[BondState](#bondstate)> | Yes | Callback invoked to return the pairing state. You need to implement this callback. | + +**Return values:** + +None. + +**Example:** + +``` +function onReceiveEvent(data) { // data, as the input parameter of the callback, indicates the pairing state. + console.info('pair state = '+ JSON.stringify(data)); +} +bluetooth.on('bondStateChange', onReceiveEvent); +``` + + +## bluetooth.off('bondStateChange') + +off(type: "bondStateChange", callback?: Callback<BondState>): void + +Unsubscribes from the Bluetooth pairing state change events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **bondStateChange** indicates a Bluetooth pairing state change event. | +| callback | Callback<[BondState](#bondstate)> | No | Callback used to report the change of the Bluetooth pairing state. If this parameter is not set, this method unsubscribes from all callbacks corresponding to **type**. | + +**Return values:** + +None. + +**Example:** + +``` +function onReceiveEvent(data) { + console.info('bond state = '+ JSON.stringify(data)); +} +bluetooth.on('bondStateChange', onReceiveEvent); +bluetooth.off('bondStateChange', onReceiveEvent); +``` + + +## bluetooth.on('stateChange') + +on(type: "stateChange", callback: Callback<BluetoothState>): void + +Subscribes to the Bluetooth connection state change events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **stateChange** indicates a Bluetooth connection state change event. | +| callback | Callback<[BluetoothState](#bluetoothstate)> | Yes | Callback invoked to return the Bluetooth connection state. You need to implement this callback. | + +**Return values:** + +None. + +**Example:** + +``` +function onReceiveEvent(data) { + console.info('bluetooth state = '+ JSON.stringify(data)); +} +bluetooth.on('stateChange', onReceiveEvent); +``` + + +## bluetooth.off('stateChange') + +off(type: "stateChange", callback?: Callback<BluetoothState>): void + +Unsubscribes from the Bluetooth connection state change events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **stateChange** indicates a Bluetooth connection state change event. | +| callback | Callback<[BluetoothState](#bluetoothstate)> | No | Callback used to report the Bluetooth connection state. If this parameter is not set, this method unsubscribes from all callbacks corresponding to **type**. | + +**Return values:** + +None. + +**Example:** + +``` +function onReceiveEvent(data) { + console.info('bluetooth state = '+ JSON.stringify(data)); +} +bluetooth.on('stateChange', onReceiveEvent); +bluetooth.off('stateChange', onReceiveEvent); +``` + + +## bluetooth.sppListen + +sppListen(name: string, option: SppOption, callback: AsyncCallback<number>): void + +Creates a server listening socket. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| name | string | Yes | Service name. | +| option | [SppOption](#sppoption) | Yes | Serial port profile (SPP) listening configuration. | +| callback | AsyncCallback<number> | Yes | Callback invoked to return the server socket ID. | + +**Example:** + +``` +let serverNumber = -1; +function serverSocket(code, number) { + console.log('bluetooth error code: ' + code.code); + if (code.code == 0) { + console.log('bluetooth serverSocket Number: ' + number); + serverNumber = number; + } +} + +let sppOption = {uuid: '00001810-0000-1000-8000-00805F9B34FB', secure: false, type: 0}; +bluetooth.sppListen('server1', sppOption, serverSocket); +``` + + +## bluetooth.sppAccept + +sppAccept(serverSocket: number, callback: AsyncCallback<number>): void + +Listens for a connection to be made to this socket from the client and accepts it. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| serverSocket | number | Yes | Server socket ID. | +| callback | AsyncCallback<number> | Yes | Callback invoked to return the client socket ID. | + +**Example:** + +``` +let clientNumber = -1; +function acceptClientSocket(code, number) { + console.log('bluetooth error code: ' + code.code); + if (code.code == 0) { + console.log('bluetooth clientSocket Number: ' + number); + // The obtained clientNumber is used as the socket ID for subsequent read/write operations on the server. + clientNumber = number; + } +} +bluetooth.sppAccept(serverNumber, acceptClientSocket); +``` + + +## bluetooth.sppConnect + +sppConnect(device: string, option: SppOption, callback: AsyncCallback<number>): void + +Initiates an SPP connection to a peer device from the client. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| device | string | Yes | Address of the peer device, for example, **8F:8F:8E:8E:6D:6D**. | +| option | [SppOption](#sppoption) | Yes | Configuration for connecting to the SPP client. | +| callback | AsyncCallback<number> | Yes | Callback invoked to return the client socket ID. | + +**Example:** + +``` +let clientNumber = -1; +function clientSocket(code, number) { + if (code.code != 0) { + return; + } + console.log('bluetooth serverSocket Number: ' + number); + // The obtained clientNumber is used as the socket ID for subsequent read/write operations on the client. + clientNumber = number; +} +let sppOption = {uuid: '00001810-0000-1000-8000-00805F9B34FB', secure: false, type: 0}; +bluetooth.sppConnect('8F:8F:8E:8E:6D:6D', sppOption, clientSocket); +``` + + +## bluetooth.sppCloseServerSocket + +sppCloseServerSocket(socket: number): void + +Closes the listening socket of the server. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| socket | number | Yes | ID of the listening socket on the server. The ID is obtained by **sppListen**. | + +**Example:** + +``` +bluetooth.sppCloseServerSocket(serverNumber); +``` + + +## bluetooth.sppCloseClientSocket + +sppCloseClientSocket(socket: number): void + +Closes the client socket. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| socket | number | Yes | Client socket ID, which is obtained by **sppAccept** or **sppConnect**. | + +**Example:** + +``` +bluetooth.sppCloseClientSocket(clientNumber); +``` + + +## bluetooth.sppWrite + +sppWrite(clientSocket: number, data: ArrayBuffer): boolean + +Writes data to the peer device through the socket. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| clientSocket | number | Yes | Client socket ID, which is obtained by **sppAccept** or **sppConnect**. | +| data | ArrayBuffer | Yes | Data to write. | + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +let arrayBuffer = new ArrayBuffer(8); +let data = new Uint8Array(arrayBuffer); +data[0] = 123; +let ret = bluetooth.sppWrite(clientNumber, arrayBuffer); +if (ret) { + console.log('spp write successfully'); +} else { + console.log('spp write failed'); +} +``` + + +## bluetooth.on('sppRead') + +on(type: "sppRead", clientSocket: number, callback: Callback<ArrayBuffer>): void + +Subscribes to the SPP read request events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **sppRead** indicates an SPP read request event. | +| clientSocket | number | Yes | Client socket ID, which is obtained by **sppAccept** or **sppConnect**. | +| callback | Callback<ArrayBuffer> | Yes | Callback invoked to return the data read. | + +**Return values:** + +None. + +**Example:** + +``` +function dataRead(dataBuffer) { + let data = new Uint8Array(dataBuffer); + console.log('bluetooth data is: ' + data[0]); +} +bluetooth.on('sppRead', clientNumber, dataRead); +``` + + +## bluetooth.off('sppRead') + +off(type: "sppRead", clientSocket: number, callback?: Callback<ArrayBuffer>): void + +Unsubscribes from the SPP read request events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **sppRead** indicates an SPP read request event. | +| clientSocket | number | Yes | Client socket ID, which is obtained by **sppAccept** or **sppConnect**. | +| callback | Callback<ArrayBuffer> | No | Callback used to report an SPP read request event. If this parameter is not set, this method unsubscribes from all callbacks corresponding to **type**. | + +**Return values:** + +None. + +**Example:** + +``` +bluetooth.off('sppRead', clientNumber); +``` + + +## bluetooth.BLE + +### bluetooth.BLE.createGattServer + +createGattServer(): GattServer + +Creates a **GattServer** instance. + +**Return values:** + +| Type | Description | +| -------- | -------- | +| [GattServer](#gattserver) | **GattServer** instance created. Before using a method of the server, you must create a **GattSever** instance. | + +**Example:** + +``` +let gattServer = bluetooth.BLE.createGattServer(); +``` + + +### bluetooth.BLE.createGattClientDevice + +createGattClientDevice(deviceId: string): GattClientDevice + +Creates a **GattClientDevice** instance. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| deviceId | string | Yes | Address of the peer device, for example, **8F:8F:8E:8E:6D:6D**. | + +**Return values:** + +| Type | Description | +| -------- | -------- | +| [GattClientDevice](#gattclientdevice) | **GattClientDevice** instance created. Before using a method of the client, you must create a **GattClientDevice** instance. | + +**Example:** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +``` + + +### bluetooth.BLE.getConnectedBLEDevices + +getConnectedBLEDevices(): Array<string> + +Obtains the BLE devices connected to this device. + +**Return values:** + +| Type | Description | +| -------- | -------- | +| Array<string> | Addresses of the BLE devices connected to this device. | + +**Example:** + +``` +let result = bluetooth.BLE.getConnectedBLEDevices(); +``` + + +### bluetooth.BLE.startBLEScan + +startBLEScan(filters: Array<ScanFilter>, options?: ScanOptions): void + +Starts a BLE scan. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| filters | Array<[ScanFilter](#scanfilter)> | Yes | Criteria for filtering the scan result. Set this parameter to **null** if you do not want to filter the scan result. | +| options | [ScanOptions](#scanoptions) | No | Scan options. | + +**Return values:** + +None. + +**Example:** + +``` +function onReceiveEvent(data) { + console.info('BLE scan device find result = '+ JSON.stringify(data)); +} +bluetooth.BLE.on("BLEDeviceFind", onReceiveEvent); +bluetooth.BLE.startBLEScan( + [{ + deviceId:"8F:8F:8E:8E:6D:6D", + name:"test", + serviceUuid:"00001888-0000-1000-8000-00805f9b34fb" + }], + { + interval: 500, + dutyMode: bluetooth.ScanDuty.SCAN_MODE_LOW_POWER, + matchMode: bluetooth.MatchMode.MATCH_MODE_AGGRESSIVE, + } +); +``` + + +### bluetooth.BLE.stopBLEScan + +stopBLEScan(): void + +Stops the BLE scan. + +**Return values:** + +None. + +**Example:** + +``` +bluetooth.BLE.stopBLEScan(); +``` + + +### bluetooth.BLE.on('BLEDeviceFind') + +on(type: "BLEDeviceFind", callback: Callback<Array<ScanResult>>): void + +Subscribe to the BLE device discovery events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **BLEDeviceFind** indicates an event reported when a BLE device is discovered. | +| callback | Callback<Array<[ScanResult](#scanresult)>> | Yes | Callback invoked to return the discovered devices. You need to implement this callback. | + +**Return values:** + +None. + +**Example:** + +``` +function onReceiveEvent(data) { + console.info('bluetooth device find = '+ JSON.stringify(data)); +} +bluetooth.BLE.on('BLEDeviceFind', onReceiveEvent); +``` + + +### bluetooth.BLE.off('BLEDeviceFind') + +off(type: "BLEDeviceFind", callback?: Callback<Array<ScanResult>>): void + +Unsubscribes from the BLE device discovery events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **BLEDeviceFind** indicates an event reported when a BLE device is discovered. | +| callback | Callback<Array<[ScanResult](#scanresult)>> | No | Callback used to report the discovered devices. If this parameter is not set, this method unsubscribes from all callbacks corresponding to **type**. | + +**Return values:** + +None. + +**Example:** + +``` +function onReceiveEvent(data) { + console.info('bluetooth device find = '+ JSON.stringify(data)); +} +bluetooth.BLE.on('BLEDeviceFind', onReceiveEvent); +bluetooth.BLE.off('BLEDeviceFind', onReceiveEvent); +``` + + +## GattServer + +Implements the Generic Attribute Profile (GATT) server. Before using a method of this class, you need to create a **GattServer** instance using the **createGattServer()** method. + + +### startAdvertising + +startAdvertising(setting: AdvertiseSetting, advData: AdvertiseData, advResponse?: AdvertiseData): void + +Starts BLE advertising. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| setting | [AdvertiseSetting](#advertisesetting) | Yes | Settings related to BLE advertising. | +| advData | [AdvertiseData](#advertisedata) | Yes | Content of the BLE advertisement packet. | +| advResponse | [AdvertiseData](#advertisedata) | No | Response to the BLE scan request. | + +**Return values:** + +None. + +**Example:** + +``` +let manufactureValueBuffer = new Uint8Array(4); +manufactureValueBuffer[0] = 1; +manufactureValueBuffer[1] = 2; +manufactureValueBuffer[2] = 3; +manufactureValueBuffer[3] = 4; + +let serviceValueBuffer = new Uint8Array(4); +serviceValueBuffer[0] = 4; +serviceValueBuffer[1] = 6; +serviceValueBuffer[2] = 7; +serviceValueBuffer[3] = 8; +console.info('manufactureValueBuffer = '+ JSON.stringify(manufactureValueBuffer)); +console.info('serviceValueBuffer = '+ JSON.stringify(serviceValueBuffer)); +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.startAdvertising({ + interval:150, + txPower:60, + connectable:true, + },{ + serviceUuids:["00001888-0000-1000-8000-00805f9b34fb"], + manufactureData:[{ + manufactureId:4567, + manufactureValue:manufactureValueBuffer.buffer + }], + serviceData:[{ + serviceUuid:"00001888-0000-1000-8000-00805f9b34fb", + serviceValue:serviceValueBuffer.buffer + }], + },{ + serviceUuids:["00001889-0000-1000-8000-00805f9b34fb"], + manufactureData:[{ + manufactureId:1789, + manufactureValue:manufactureValueBuffer.buffer + }], + serviceData:[{ + serviceUuid:"00001889-0000-1000-8000-00805f9b34fb", + serviceValue:serviceValueBuffer.buffer + }], +}); +``` + + +### stopAdvertising + +stopAdvertising(): void + +Stops BLE advertising. + +**Return values:** + +None. + +**Example:** + +``` +let server = bluetooth.BLE.createGattServer(); +server.stopAdvertising(); +``` + + +### addService + +addService(service: GattService): boolean + +Adds a service to this GATT server. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| service | [GattService](#gattservice) | Yes | Service to add. | + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +// Create descriptors. +let descriptors = []; +let arrayBuffer = new ArrayBuffer(8); +let descV = new Uint8Array(arrayBuffer); +descV[0] = 11; +let descriptor = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', + descriptorUuid: '00001830-0000-1000-8000-00805F9B34FB', descriptorValue: arrayBuffer}; +descriptors[0] = descriptor; + +// Create characteristics. +let characteristics = []; +let arrayBufferC = new ArrayBuffer(8); +let cccV = new Uint8Array(arrayBufferC); +cccV[0] = 1; +let characteristic = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', characteristicValue: arrayBufferC, descriptors:descriptors}; +let characteristicN = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001821-0000-1000-8000-00805F9B34FB', characteristicValue: arrayBufferC, descriptors:descriptorsN}; +characteristics[0] = characteristic; + +// Create a gattService instance. +let gattService = {serviceUuid:'00001810-0000-1000-8000-00805F9B34FB', isPrimary: true, characteristics:characteristics, includeServices:[]}; + +let gattServer = bluetooth.BLE.createGattServer(); +let ret = gattServer.addService(gattService); +if (ret) { + console.log("add service successfully"); +} else { + console.log("add service failed"); +} +``` + + +### removeService + +removeService(serviceUuid: string): boolean + +Removes a service from this GATT server. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| serviceUuid | string | Yes | Universally unique identifier (UUID) of the service to remove, for example, **00001810-0000-1000-8000-00805F9B34FB**. | + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +let server = bluetooth.BLE.createGattServer(); +server.removeService('00001810-0000-1000-8000-00805F9B34FB'); +``` + + +### close + +close(): void + + +Closes this GATT server to unregister it from the protocol stack. After this method is called, this [GattServer](#gattserver) instance cannot be used. + +**Example:** + +``` +let server = bluetooth.BLE.createGattServer(); +server.close(); +``` + + +### notifyCharacteristicChanged + +notifyCharacteristicChanged(deviceId: string, notifyCharacteristic: NotifyCharacteristic): boolean + +Notifies the connected client device when a characteristic value changes. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| deviceId | string | Yes | Address of the client device to notify, for example, **8F:8F:8E:8E:6D:6D**. | +| notifyCharacteristic | [NotifyCharacteristic](#notifycharacteristic) | Yes | New characteristic value. | + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +let notifyCharacteristic = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001821-0000-1000-8000-00805F9B34FB', characteristicValue: notifyCcc.characteristicValue, confirm: false}; +let server = bluetooth.BLE.createGattServer(); +server.notifyCharacteristicChanged('8F:8F:8E:8E:6D:6D', notifyCharacteristic); +``` + + +### sendResponse + +sendResponse(serverResponse: ServerResponse): boolean + +Sends a response to a read or write request from the GATT client. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| serverResponse | [ServerResponse](#serverresponse) | Yes | Response returned by the GATT server. | + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +/* Send a response. */ +let arrayBufferCCC = new ArrayBuffer(8); +let cccValue = new Uint8Array(arrayBufferCCC); +cccValue[0] = 1123; +let serverResponse = { + "deviceId": "8F:8F:8E:8E:6D:6D", + "transId": 0, + "status": 0, + "offset": 0, + "value": arrayBufferCCC, +}; + +let gattServer = bluetooth.BLE.createGattServer(); +let ret = gattServer.sendResponse(serverResponse); +if (ret) { + console.log('bluetooth sendResponse successfully'); +} else { + console.log('bluetooth sendResponse failed'); +} +``` + + +### on('characteristicRead') + +on(type: "characteristicRead", callback: Callback<CharacteristicReadReq>): void + +Subscribes to the characteristic read request events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **characteristicRead** indicates a characteristic read request event. | +| callback | Callback<[CharacteristicReadReq](#characteristicreadreq)> | Yes | Callback invoked to return a characteristic read request from the GATT client. | + +**Return values:** + +None. + +**Example:** + +``` +let arrayBufferCCC = new ArrayBuffer(8); +let cccValue = new Uint8Array(arrayBufferCCC); +cccValue[0] = 1123; +function ReadCharacteristicReq(CharacteristicReadReq) { + let deviceId = CharacteristicReadReq.deviceId; + let transId = CharacteristicReadReq.transId; + let offset = CharacteristicReadReq.offset; + let characteristicUuid = CharacteristicReadReq.characteristicUuid; + + let serverResponse = {deviceId: deviceId, transId: transId, status: 0, offset: offset, value:arrayBufferCCC}; + + let ret = gattServer.sendResponse(serverResponse); + if (ret) { + console.log('bluetooth sendResponse successfully'); + } else { + console.log('bluetooth sendResponse failed'); + } +} + +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.on("characteristicRead", ReadCharacteristicReq); +``` + + +### off('characteristicRead') + +off(type: "characteristicRead", callback?: Callback<CharacteristicReadReq>): void + +Unsubscribes from the characteristic read request events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **characteristicRead** indicates a characteristic read request event. | +| callback | Callback<[CharacteristicReadReq](#characteristicreadreq)> | No | Callback used to report a characteristic read request event. If this parameter is not set, this method unsubscribes from all callbacks corresponding to **type**. | + +**Return values:** + +None. + +**Example:** + +``` +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.off("characteristicRead"); +``` + + +### on('characteristicWrite') + +on(type: "characteristicWrite", callback: Callback<CharacteristicWriteReq>): void + +Subscribes to the characteristic write request events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **characteristicWrite** indicates a characteristic write request event. | +| callback | Callback<[DescriptorWriteReq](#descriptorwritereq)> | Yes | Callback invoked to return a characteristic write request from the GATT client. | + +**Return values:** + +None. + +**Example:** + +``` +let arrayBufferCCC = new ArrayBuffer(8); +let cccValue = new Uint8Array(arrayBufferCCC); +function WriteCharacteristicReq(CharacteristicWriteReq) { + let deviceId = CharacteristicWriteReq.deviceId; + let transId = CharacteristicWriteReq.transId; + let offset = CharacteristicWriteReq.offset; + let isPrep = CharacteristicWriteReq.isPrep; + let needRsp = CharacteristicWriteReq.needRsp; + let value = new Uint8Array(CharacteristicWriteReq.value); + let characteristicUuid = CharacteristicWriteReq.characteristicUuid; + + cccValue[0] = value[0]; + let serverResponse = {deviceId: deviceId, transId: transId, status: 0, offset: offset, value:arrayBufferCCC}; + + let ret = gattServer.sendResponse(serverResponse); + if (ret) { + console.log('bluetooth sendResponse successfully'); + } else { + console.log('bluetooth sendResponse failed'); + } +} + +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.on("characteristicWrite", WriteCharacteristicReq); +``` + + +### off('characteristicWrite') + +off(type: "characteristicWrite", callback?: Callback<CharacteristicWriteReq>): void + +Unsubscribes from the characteristic write request events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **characteristicWrite** indicates a characteristic write request event. | +| callback | Callback<[CharacteristicWriteReq](#characteristicwritereq)> | No | Callback used to report a characteristic write request event. If this parameter is not set, this method unsubscribes from all callbacks corresponding to **type**. | + +**Return values:** + +None. + +**Example:** + +``` +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.off("characteristicWrite"); +``` + + +### on('descriptorRead') + +on(type: "descriptorRead", callback: Callback<DescriptorReadReq>): void + +Subscribes to the descriptor read request events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **descriptorRead** indicates a descriptor read request event. | +| callback | Callback<[DescriptorReadReq](#descriptorreadreq)> | Yes | Callback invoked to return a descriptor read request from the GATT client. | + +**Return values:** + +None. + +**Example:** + +``` +let arrayBufferDesc = new ArrayBuffer(8); +let descValue = new Uint8Array(arrayBufferDesc); +descValue[0] = 1101; +function ReadDescriptorReq(DescriptorReadReq) { + let deviceId = DescriptorReadReq.deviceId; + let transId = DescriptorReadReq.transId; + let offset = DescriptorReadReq.offset; + let descriptorUuid = DescriptorReadReq.descriptorUuid; + + let serverResponse = {deviceId: deviceId, transId: transId, status: 0, offset: offset, value:arrayBufferDesc}; + + let ret = gattServer.sendResponse(serverResponse); + if (ret) { + console.log('bluetooth sendResponse successfully'); + } else { + console.log('bluetooth sendResponse failed'); + } +} + +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.on("descriptorRead", ReadDescriptorReq); +``` + + +### off('descriptorRead') + +off(type: "descriptorRead", callback?: Callback<DescriptorReadReq>): void + +Unsubscribes from the descriptor read request events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **descriptorRead** indicates a descriptor read request event. | +| callback | Callback<[DescriptorReadReq](#descriptorreadreq)> | No | Callback used to report a descriptor read request event. If this parameter is not set, this method unsubscribes from all callbacks corresponding to **type**. | + +**Return values:** + +None. + +**Example:** + +``` +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.off("descriptorRead"); +``` + + +### on('descriptorWrite') + +on(type: "descriptorWrite", callback: Callback<DescriptorWriteReq>): void + +Subscribes to the descriptor write request events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **descriptorWrite** indicates a descriptor write request event. | +| callback | Callback<[DescriptorWriteReq](#descriptorwritereq)> | Yes | Callback invoked to return a descriptor write request from the GATT client. | + +**Return values:** + +None. + +**Example:** + +``` +let arrayBufferDesc = new ArrayBuffer(8); +let descValue = new Uint8Array(arrayBufferDesc); +function WriteDescriptorReq(DescriptorWriteReq) { + let deviceId = DescriptorWriteReq.deviceId; + let transId = DescriptorWriteReq.transId; + let offset = DescriptorWriteReq.offset; + let isPrep = DescriptorWriteReq.isPrep; + let needRsp = DescriptorWriteReq.needRsp; + let value = new Uint8Array(DescriptorWriteReq.value); + let descriptorUuid = DescriptorWriteReq.descriptorUuid; + + descValue[0] = value[0]; + let serverResponse = {deviceId: deviceId, transId: transId, status: 0, offset: offset, value:arrayBufferDesc}; + + let ret = gattServer.sendResponse(serverResponse); + if (ret) { + console.log('bluetooth sendResponse successfully'); + } else { + console.log('bluetooth sendResponse failed'); + } +} + +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.on("descriptorRead", WriteDescriptorReq); +``` + + +### off('descriptorWrite') + +off(type: "descriptorWrite", callback?: Callback<DescriptorWriteReq>): void + +Unsubscribes from the descriptor write request events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **descriptorWrite** indicates a descriptor write request event. | +| callback | Callback<[DescriptorWriteReq](#descriptorwritereq)> | No | Callback used to report a descriptor read request event. If this parameter is not set, this method unsubscribes from all callbacks corresponding to **type**. | + +**Return values:** + +None. + +**Example:** + +``` +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.off("descriptorWrite"); +``` + + +### on('connectStateChange') + +on(type: "connectStateChange", callback: Callback<BLEConnectChangedState>): void + +Subscribes to the BLE connection state change events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **connectStateChange** indicates a BLE connection state change event. | +| callback | Callback<[BLEConnectChangedState](#bleconnectchangedstate)> | Yes | Callback invoked to return the BLE connection state. | + +**Return values:** + +None. + +**Example:** + +``` +function Connected(BLEConnectChangedState) { + let deviceId = BLEConnectChangedState.deviceId; + let status = BLEConnectChangedState.state; +} + +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.on("connectStateChange", Connected); +``` + + +### off('connectStateChange') + +off(type: "connectStateChange", callback?: Callback<BLEConnectChangedState>): void + +Unsubscribes from the BLE connection state change events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **connectStateChange** indicates a BLE connection state change event. | +| callback | Callback<[BLEConnectChangedState](#bleconnectchangedstate)> | No | Callback used to report the BLE connection state. If this parameter is not set, this method unsubscribes from all callbacks corresponding to **type**. | + +**Return values:** + +None. + +**Example:** + +``` +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.off("connectStateChange"); +``` + + +## GattClientDevice + +Implements the GATT client. Before using a method of this class, you must create a **GattClientDevice** instance using the **createGattClientDevice(deviceId: string)** method. + + +### connect + +connect(): boolean + +Initiates a connection to the peer BLE device. + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the connection is successful; returns **false** otherwise. | + +**Example:** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let ret = device.connect(); +``` + + +### disconnect + +disconnect(): boolean + +Disconnects from the peer BLE device. + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the connection is successful; returns **false** otherwise. | + +**Example:** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let ret = device.disconnect(); +``` + + +### close + +close(): boolean + +Closes this GATT client to unregister it from the protocol stack. After this method is called, this [GattClientDevice](#gattclientdevice) instance cannot be used. + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let ret = device.close(); +``` + + + + +### getServices + +getServices(callback: AsyncCallback<Array<GattService>>): void + +Obtains all services of the peer BLE device. This method uses an asynchronous callback to return the result. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| callback | AsyncCallback<Array<[GattService](#gattservice)>> | Yes | Callback invoked to return the services obtained. | + +**Return values:** + +None. + +**Example:** + +``` +// Callback +function getServices(code, gattServices) { + if (code.code == 0) { + let services = gattServices; + console.log('bluetooth code is ' + code.code); + console.log("bluetooth services size is ", services.length); + + for (let i = 0; i < services.length; i++) { + console.log('bluetooth serviceUuid is ' + services[i].serviceUuid); + } + } +} + +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.connect(); +device.getServices(getServices); +``` + + +### getServices + +getServices(): Promise<Array<GattService>> + +Obtains all services of the peer BLE device. This method uses a promise to return the result. + +**Parameters:** + +**Return values:** + +| Type | Description | +| -------- | -------- | +| Promise<Array<[GattService](#gattservice)>> | Promise used to return the services obtained. | + +**Example:** + +``` +// Promise +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.connect(); +let services = device.getServices(); +console.log("bluetooth services size is ", services.length); + +for (let i = 0; i < services.length; i++) { + console.log('bluetooth serviceUuid is ' + services[i].serviceUuid); +} +``` + + +### readCharacteristicValue + +readCharacteristicValue(characteristic: BLECharacteristic, callback: AsyncCallback<BLECharacteristic>): void + +Reads the characteristic value of the specific service of the peer BLE device. This method uses an asynchronous callback to return the result. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| characteristic | [BLECharacteristic](#blecharacteristic) | Yes | Characteristic value to read. | +| callback | AsyncCallback<[BLECharacteristic](#blecharacteristic)> | Yes | Callback invoked to return the characteristic value read. | + +**Return values:** + +None. + +**Example:** + +``` +function readCcc(code, BLECharacteristic) { + if (code.code != 0) { + return; + } + console.log('bluetooth characteristic uuid: ' + BLECharacteristic.characteristicUuid); + let value = new Uint8Array(BLECharacteristic.characteristicValue); + console.log('bluetooth characteristic value: ' + value[0] +','+ value[1]+','+ value[2]+','+ value[3]); +} + +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let descriptors = []; +let bufferDesc = new ArrayBuffer(8); +let descV = new Uint8Array(bufferDesc); +descV[0] = 11; +let descriptor = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', +characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', +descriptorUuid: '00002903-0000-1000-8000-00805F9B34FB', descriptorValue: bufferDesc}; +descriptors[0] = descriptor; + +let bufferCCC = new ArrayBuffer(8); +let cccV = new Uint8Array(bufferCCC); +cccV[0] = 1; +let characteristic = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', +characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', +characteristicValue: bufferCCC, descriptors:descriptors}; + +device.readCharacteristicValue(characteristic, readCcc); +``` + + +### readCharacteristicValue + +readCharacteristicValue(characteristic: BLECharacteristic): Promise<BLECharacteristic> + +Reads the characteristic value of the specific service of the peer BLE device. This method uses a promise to return the result. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| characteristic | [BLECharacteristic](#blecharacteristic) | Yes | Characteristic value to read. | + +**Return values:** + +| Type | Description | +| -------- | -------- | +| Promise<[BLECharacteristic](#blecharacteristic)> | Promise used to return the characteristic value read. | + +**Example:** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let descriptors = []; +let bufferDesc = new ArrayBuffer(8); +let descV = new Uint8Array(bufferDesc); +descV[0] = 11; +let descriptor = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', +characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', +descriptorUuid: '00002903-0000-1000-8000-00805F9B34FB', descriptorValue: bufferDesc}; +descriptors[0] = descriptor; + +let bufferCCC = new ArrayBuffer(8); +let cccV = new Uint8Array(bufferCCC); +cccV[0] = 1; +let characteristic = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', +characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', +characteristicValue: bufferCCC, descriptors:descriptors}; + +device.readCharacteristicValue(characteristic); +``` + + +### readDescriptorValue + +readDescriptorValue(descriptor: BLEDescriptor, callback: AsyncCallback<BLEDescriptor>): void + +Reads the descriptor contained in the specific characteristic of the peer BLE device. This method uses an asynchronous callback to return the result. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| descriptor | [BLEDescriptor](#bledescriptor) | Yes | Descriptor to read. | +| callback | AsyncCallback<[BLECharacteristic](#blecharacteristic)> | Yes | Callback invoked to return the descriptor read. | + +**Return values:** + +None. + +**Example:** + +``` +function readDesc(code, BLEDescriptor) { + if (code.code != 0) { + return; + } + console.log('bluetooth descriptor uuid: ' + BLEDescriptor.descriptorUuid); + let value = new Uint8Array(BLEDescriptor.descriptorValue); + console.log('bluetooth descriptor value: ' + value[0] +','+ value[1]+','+ value[2]+','+ value[3]); +} + +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let bufferDesc = new ArrayBuffer(8); +let descV = new Uint8Array(bufferDesc); +descV[0] = 11; +let descriptor = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', + descriptorUuid: '00002903-0000-1000-8000-00805F9B34FB', descriptorValue: bufferDesc}; +device.readDescriptorValue(descriptor, readDesc); +``` + + +### readDescriptorValue + +readDescriptorValue(descriptor: BLEDescriptor): Promise<BLEDescriptor> + +Reads the descriptor contained in the specific characteristic of the peer BLE device. This method uses a promise to return the result. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| descriptor | [BLEDescriptor](#bledescriptor) | Yes | Descriptor to read. | + +**Return values:** + +| Type | Description | +| -------- | -------- | +| Promise<[BLEDescriptor](#bledescriptor)> | Promise used to return the descriptor read. | + +**Example:** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let bufferDesc = new ArrayBuffer(8); +let descV = new Uint8Array(bufferDesc); +descV[0] = 11; +let descriptor = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', + descriptorUuid: '00002903-0000-1000-8000-00805F9B34FB', descriptorValue: bufferDesc}; +device.readDescriptorValue(descriptor); +``` + + +### writeCharacteristicValue + +writeCharacteristicValue(characteristic: BLECharacteristic): boolean + +Writes a characteristic value to the peer BLE device. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| characteristic | [BLECharacteristic](#blecharacteristic) | Yes | Binary value and other parameters of the BLE device characteristic. | + +**Return values:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | +| Name | Type | Mandatory | Description | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let descriptors = []; +let bufferDesc = new ArrayBuffer(8); +let descV = new Uint8Array(bufferDesc); +descV[0] = 11; +let descriptor = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', + descriptorUuid: '00002903-0000-1000-8000-00805F9B34FB', descriptorValue: bufferDesc}; +descriptors[0] = descriptor; + +let bufferCCC = new ArrayBuffer(8); +let cccV = new Uint8Array(bufferCCC); +cccV[0] = 1; +let characteristic = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', + characteristicValue: bufferCCC, descriptors:descriptors}; +let retWriteCcc = device.writeCharacteristicValue(characteristic); +if (retWriteCcc) { + console.log('write characteristic successfully'); +} else { + console.log('write characteristic failed'); +} +``` + + +### writeDescriptorValue + +writeDescriptorValue(descriptor: BLEDescriptor): boolean + +Writes binary data to the specific descriptor of the peer BLE device. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| descriptor | [BLEDescriptor](#bledescriptor) | Yes | Binary value and other parameters of the BLE device descriptor. | + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let bufferDesc = new ArrayBuffer(8); +let descV = new Uint8Array(bufferDesc); +descV[0] = 22; +let descriptor = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', + descriptorUuid: '00002903-0000-1000-8000-00805F9B34FB', descriptorValue: bufferDesc}; +let retWriteDesc = device.writeDescriptorValue(descriptor); +if (retWriteDesc) { + console.log('bluetooth write descriptor successfully'); +} else { + console.log('bluetooth write descriptor failed'); +} +``` + + +### setBLEMtuSize + +setBLEMtuSize(mtu: number): boolean + +Sets the maximum transmission unit (MTU) that can be transmitted between the GATT client and its peer BLE device. This method can be used only after a connection is set up by calling **connect**. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| mtu | number | Yes | MTU to set, which ranges from 22 to 512 bytes. | + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.setBLEMtuSize(128); +``` + + +### setNotifyCharacteristicChanged + +setNotifyCharacteristicChanged(characteristic: BLECharacteristic, enable: boolean): boolean + +Sets the function of notifying the GATT client when the characteristic value of the peer BLE device changes. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| characteristic | [BLECharacteristic](#blecharacteristic) | Yes | BLE characteristic to listen for. | +| enable | boolean | Yes | Whether to enable the notify function. The value **true** means to enable the notify function, and the value **false** means the opposite. | + +**Return values:** + +| Type | Description | +| -------- | -------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | + +**Example:** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.setNotifyCharacteristicChanged(notifyCcc, false); +``` + + +### on('BLECharacteristicChange') + +on(type: "BLECharacteristicChange", callback: Callback<BLECharacteristic>): void + +Subscribes to the BLE characteristic change events. The client can receive a notification from the server only after the **setNotifyCharacteristicChanged** method is called. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **BLECharacteristicChange** indicates a characteristic value change event. | +| callback | Callback<[BLECharacteristic](#blecharacteristic)> | Yes | Callback invoked to return the characteristic value changes. | + +**Return values:** + +None. + +**Example:** + +``` +function CharacteristicChange(CharacteristicChangeReq) { + let serviceUuid = CharacteristicChangeReq.serviceUuid; + let characteristicUuid = CharacteristicChangeReq.characteristicUuid; + let value = new Uint8Array(CharacteristicChangeReq.characteristicValue); +} +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.on('BLECharacteristicChange', CharacteristicChange); +``` + + +### off('BLECharacteristicChange') + +off(type: "BLECharacteristicChange", callback?: Callback<BLECharacteristic>): void + +Unsubscribes from the BLE characteristic change events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **BLECharacteristicChange** indicates a characteristic value change event. | +| callback | Callback<[BLECharacteristic](#blecharacteristic)> | No | Callback used to report the characteristic value. If this parameter is not set, this method unsubscribes from all callbacks corresponding to **type**. | + +**Return values:** + +None. + +**Example:** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.off('BLECharacteristicChange'); +``` + + +### on('BLEConnectionStateChange') + +on(type: "BLEConnectionStateChange", callback: Callback<BLEConnectChangedState>): void + +Subscribes to the BLE connection state change events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **BLEConnectionStateChange** indicates a BLE connection state change event. | +| callback | Callback<[BLEConnectChangedState](#bleconnectchangedstate)> | Yes | Callback invoked to return the BLE connection state. | + +**Return values:** + +None. + +**Example:** + +``` +function ConnectStateChanged(state) { + console.log('bluetooth connect state changed'); + let connectState = state.state; +} +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.on('BLEConnectionStateChange', ConnectStateChanged); +``` + + +### off('BLEConnectionStateChange') + +off(type: "BLEConnectionStateChange", callback?: Callback<BLEConnectChangedState>): void + +Unsubscribes from the BLE connection state change events. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| type | string | Yes | Event type. The value **BLEConnectionStateChange** indicates a BLE connection state change event. | +| callback | Callback<[BLEConnectChangedState](#bleconnectchangedstate)> | No | Callback used to report the BLE connection state. If this parameter is not set, this method unsubscribes from all callbacks corresponding to **type**. | + +**Return values:** + +None. + +**Example:** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.off('BLEConnectionStateChange'); +``` + + +### getDeviceName + +getDeviceName(callback: AsyncCallback<string>): void + +Obtains the name of the peer BLE device. This method uses an asynchronous callback to return the result. + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| callback | AsyncCallback<string> | Yes | Callback invoked to return the peer BLE device name. | + +**Return values:** + +None. + +**Example:** + +``` +// Callback +let gattClient = bluetooth.BLE.createGattClientDevice("8F:8F:8E:8E:6D:6D"); +let deviceName = gattClient.getDeviceName((err, data)=> { + console.info('device name err ' + JSON.stringify(err)); + console.info('device name' + JSON.stringify(data)); +}) +``` + + +### getDeviceName + +getDeviceName(): Promise<string> + +Obtains the name of the peer BLE device. This method uses a promise to return the result. + +**Return values:** + +| Type | Description | +| -------- | -------- | +| Promise<string> | Promise used to return the peer BLE device name. | + +**Example:** + +``` +// Promise +let gattClient = bluetooth.BLE.createGattClientDevice("8F:8F:8E:8E:6D:6D"); +let ret = device.connect(); +let deviceName = gattClient.getDeviceName().then((data) => { + console.info('device name' + JSON.stringify(data)); +}) +``` + + +### getRssiValue + +getRssiValue(callback: AsyncCallback<number>): void + +Obtains the received signal strength indication (RSSI) of the peer BLE device. This method uses an asynchronous callback to return the result. It can be used only after a connection is set up by calling [connect](#connect-boolean). + +**Parameters:** + +| Name | Type | Mandatory | Description | +| -------- | -------- | -------- | -------- | +| callback | AsyncCallback<number> | Yes | Callback invoked to return the RSSI, in dBm. | + +**Return values:** + +None. + +**Example:** + +``` +// Callback +let gattClient = bluetooth.BLE.createGattClientDevice("8F:8F:8E:8E:6D:6D"); +let ret = device.connect(); +let rssi = gattClient.getRssiValue((err, data)=> { + console.info('rssi err ' + JSON.stringify(err)); + console.info('rssi value' + JSON.stringify(data)); +}) +``` + + +### getRssiValue + +getRssiValue(): Promise<number> + +Obtains the RSSI of the peer BLE device. This method uses a promise to return the result. It can be used only after a connection is set up by calling [connect](#connect-boolean). + +**Return values:** + +| Type | Description | +| -------- | -------- | +| Promise<number> | Promise used to return the RSSI, in dBm. | + +**Example:** + +``` +// Promise +let gattClient = bluetooth.BLE.createGattClientDevice("8F:8F:8E:8E:6D:6D"); +let rssi = gattClient.getRssiValue().then((data) => { + console.info('rssi' + JSON.stringify(data)); +}) +``` + + +## ScanMode + +Enumerates the scan modes. + +| Mode | Default Value | Description | +| -------- | -------- | -------- | +| SCAN_MODE_NONE | 0 | No scan mode is specified. | +| SCAN_MODE_CONNECTABLE | 1 | Discoverable mode. | +| SCAN_MODE_GENERAL_DISCOVERABLE | 2 | General discoverable mode. | +| SCAN_MODE_LIMITED_DISCOVERABLE | 3 | Limited discoverable mode. | +| SCAN_MODE_CONNECTABLE_GENERAL_DISCOVERABLE | 4 | General connectable and discoverable mode. | +| SCAN_MODE_CONNECTABLE_LIMITED_DISCOVERABLE | 5 | Limited connectable and discoverable mode. | + + +## BondState + +Enumerates the pairing states. + +| State | Default Value | Description | +| -------- | -------- | -------- | +| BOND_STATE_INVALID | 0 | Invalid pairing. | +| BOND_STATE_BONDING | 1 | Pairing. | +| BOND_STATE_BONDED | 2 | Paired. | + + +## SppOption + +Defines the SPP configuration parameters. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| uuid | string | Yes | Yes | UUID of the SPP. | +| isPrimary | boolean | Yes | Yes | Whether it is a secure channel. | +| type | [ERROR:Invalid link:en-us_topic_0000001193344974.xml#xref2575mcpsimp,link:#SppType](#SppType) | Yes | Yes | Type of the SPP link. | + + +## SppType + +Enumerates the SPP link types. + +| Type | Default Value | Description | +| -------- | -------- | -------- | +| SPP_RFCOMM | 0 | Radio frequency communication (RFCOMM) link type. | + + +## GattService + +Defines the GATT service API parameters. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| serviceUuid | string | Yes | Yes | UUID of the service, for example, **00001888-0000-1000-8000-00805f9b34fb**. | +| isPrimary | boolean | Yes | Yes | Whether the service is a primary service. The value **true** means a primary service. | +| characteristics | Array<[ERROR:Invalid link:en-us_topic_0000001193344974.xml#xref2628mcpsimp,link:#BLECharacteristic](#BLECharacteristic)> | Yes | Yes | List of characteristics of the service. | +| includeServices | Array<[ERROR:Invalid link:en-us_topic_0000001193344974.xml#xref2635mcpsimp,link:#GattService](#GattService)> | Yes | Yes | Services on which the service depends. | + + +## BLECharacteristic + +Defines the characteristic API parameters. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| serviceUuid | string | Yes | Yes | UUID of the service, for example, **00001888-0000-1000-8000-00805f9b34fb**. | +| characteristicUuid | string | Yes | Yes | UUID of the characteristic, for example, **00002a11-0000-1000-8000-00805f9b34fb**. | +| characteristicValue | ArrayBuffer | Yes | Yes | Binary value of the characteristic. | +| descriptors | Array<[ERROR:Invalid link:en-us_topic_0000001193344974.xml#xref2677mcpsimp,link:#BLEDescriptor](#BLEDescriptor)> | Yes | Yes | List of descriptors of the characteristic. | + + +## BLEDescriptor + +Defines the descriptor API parameters. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| serviceUuid | string | Yes | Yes | UUID of the service, for example, **00001888-0000-1000-8000-00805f9b34fb**. | +| characteristicUuid | string | Yes | Yes | UUID of the characteristic, for example, **00002a11-0000-1000-8000-00805f9b34fb**. | +| descriptorUuid | string | Yes | Yes | UUID of the descriptor, for example, **00002902-0000-1000-8000-00805f9b34fb**. | +| descriptorValue | ArrayBuffer | Yes | Yes | Binary value of the descriptor. | + + +## NotifyCharacteristic + +Defines the parameters in the notifications sent when the server characteristic value changes. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| serviceUuid | string | Yes | Yes | UUID of the service, for example, **00001888-0000-1000-8000-00805f9b34fb**. | +| characteristicUuid | string | Yes | Yes | UUID of the characteristic, for example, **00002a11-0000-1000-8000-00805f9b34fb**. | +| characteristicValue | ArrayBuffer | Yes | Yes | Binary value of the characteristic. | +| confirm | boolean | Yes | Yes | Whether the notification needs to be confirmed by the peer end. For a notification, set it to **true**. In this case, the peer end must confirm the receipt of the notification. For an indication, set it to **false**. In this case, the peer end does not need to confirm the receipt of the notification. | + + +## CharacteristicReadReq + +Defines the parameters of the **CharacteristicReadReq** event received by the server. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | Yes | No | Address of the client that sends the request, for example, **8F:8F:8E:8E:6D:6D**. | +| transId | number | Yes | No | Transmission ID of the read request. The response returned by the server must use the same transmission ID. | +| offset | number | Yes | No | Position from which the characteristic value is read. For example, **k** means to read from the _k_th byte. The response returned by the server must use the same offset. | +| characteristicUuid | string | Yes | No | UUID of the characteristic, for example, **00002a11-0000-1000-8000-00805f9b34fb**. | +| serviceUuid | string | Yes | No | UUID of the service, for example, **00001888-0000-1000-8000-00805f9b34fb**. | + + +## CharacteristicWriteReq + +Defines the parameters of the **CharacteristicWriteReq** event received by the server. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | Yes | No | Address of the client that sends the request, for example, **8F:8F:8E:8E:6D:6D**. | +| transId | number | Yes | No | Transmission ID of the write request. The response returned by the server must use the same transmission ID. | +| offset | number | Yes | No | Start position for writing the characteristic value. For example, **k** means to write from the _k_th byte. The response returned by the server must use the same offset. | +| descriptorUuid | string | Yes | No | UUID of the descriptor, for example, **00002902-0000-1000-8000-00805f9b34fb**. | +| characteristicUuid | string | Yes | No | UUID of the characteristic, for example, **00002a11-0000-1000-8000-00805f9b34fb**. | +| serviceUuid | string | Yes | No | UUID of the service, for example, **00001888-0000-1000-8000-00805f9b34fb**. | + + +## DescriptorReadReq + +Defines the parameters of the **DescriptorReadReq** event received by the server. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | Yes | No | Address of the client that sends the request, for example, **8F:8F:8E:8E:6D:6D**. | +| transId | number | Yes | No | Transmission ID of the read request. The response returned by the server must use the same transmission ID. | +| offset | number | Yes | No | Position from which the descriptor is read. For example, **k** means to read from the _k_th byte. The response returned by the server must use the same offset. | +| descriptorUuid | string | Yes | No | UUID of the descriptor, for example, **00002902-0000-1000-8000-00805f9b34fb**. | +| characteristicUuid | string | Yes | No | UUID of the characteristic, for example, **00002a11-0000-1000-8000-00805f9b34fb**. | +| serviceUuid | string | Yes | No | UUID of the service, for example, **00001888-0000-1000-8000-00805f9b34fb**. | + + +## DescriptorWriteReq + +Defines the parameters of the **DescriptorWriteReq** event received by the server. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | Yes | No | Address of the client that sends the request, for example, **8F:8F:8E:8E:6D:6D**. | +| transId | number | Yes | No | Transmission ID of the write request. The response returned by the server must use the same transmission ID. | +| offset | number | Yes | No | Start position for writing the descriptor. For example, **k** means to write from the _k_th byte. The response returned by the server must use the same offset. | +| isPrep | boolean | Yes | No | Whether the write request is executed immediately. | +| needRsp | boolean | Yes | No | Whether to send a response to the GATT client. | +| value | ArrayBuffer | Yes | No | Binary value of the descriptor to write. | +| descriptorUuid | string | Yes | No | UUID of the descriptor, for example, **00002902-0000-1000-8000-00805f9b34fb**. | +| characteristicUuid | string | Yes | No | UUID of the characteristic, for example, **00002a11-0000-1000-8000-00805f9b34fb**. | +| serviceUuid | string | Yes | No | UUID of the service, for example, **00001888-0000-1000-8000-00805f9b34fb**. | + + +## ServerResponse + +Defines the parameters of the server's response to the GATT client's read/write request. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | Yes | No | Address of the client, for example, **8F:8F:8E:8E:6D:6D**. | +| transId | number | Yes | No | Transmission ID of the request. The value must be the same as the ID carried in the read/write request received. | +| status | number | Yes | No | Response state. Set this parameter to **0**, which indicates a normal response. | +| offset | number | Yes | No | Start read/write position. The value must be the same as the **offset** carried in the read/write request. | +| value | ArrayBuffer | Yes | No | Binary data in the response. | + + +## BLEConnectChangedState + +Defines the parameters of **BLEConnectChangedState**. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | Yes | No | Address of the peer device, for example, **8F:8F:8E:8E:6D:6D**. | +| state | [ERROR:Invalid link:en-us_topic_0000001193344974.xml#xref3060mcpsimp,link:#ProfileConnectionState](#ProfileConnectionState) | Yes | Yes | BLE connection state. | + + +## ProfileConnectionState + +Enumerates the profile connection states. + +| Name | Default Value | Description | +| -------- | -------- | -------- | +| STATE_DISCONNECTED | 0 | Disconnected. | +| STATE_CONNECTING | 1 | Connecting. | +| STATE_CONNECTED | 2 | Connected. | +| STATE_DISCONNECTING | 3 | Disconnecting. | + + +## ScanFilter + +Defines the scan filter parameters. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | Yes | Yes | Address of the BLE device to filter, for example, **8F:8F:8E:8E:6D:6D**. | +| name | string | Yes | Yes | Name of the BLE device to filter. | +| serviceUuid | string | Yes | Yes | UUID of the service, for example, **00001888-0000-1000-8000-00805f9b34fb**. | + + +## ScanOptions + +Defines the scan configuration parameters. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| interval | number | Yes | Yes | Delay in reporting the scan result. The default value is **0**. | +| dutyMode | [ERROR:Invalid link:en-us_topic_0000001193344974.xml#xref3154mcpsimp,link:#ScanDuty](#ScanDuty) | Yes | Yes | Scan duty. The default value is **SCAN_MODE_LOW_POWER**. | +| matchMode | [ERROR:Invalid link:en-us_topic_0000001193344974.xml#xref3161mcpsimp,link:#MatchMode](#MatchMode) | Yes | Yes | Hardware match mode for BLE scan filters. The default value is **MATCH_MODE_AGGRESSIVE**. | + + +## ScanDuty + +Enumerates the scan duty options. + +| Name | Default Value | Description | +| -------- | -------- | -------- | +| SCAN_MODE_LOW_POWER | 0 | Low-power mode, which is the default value. | +| SCAN_MODE_BALANCED | 1 | Balanced mode. | +| SCAN_MODE_LOW_LATENCY | 2 | Low-latency mode. | + + +## MatchMode + +Enumerates the hardware match modes of BLE scan filters. + +| Name | Default Value | Description | +| -------- | -------- | -------- | +| MATCH_MODE_AGGRESSIVE | 1 | Hardware reports the scan result with a lower threshold of signal strength and few number of matches in a duration. This is the default value. | +| SCAN_MODE_LOW_LATENCY | 2 | Hardware reports the scan result with a higher threshold of signal strength and sightings. | + + +## ScanResult + +Defines the scan result. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | Yes | No | Address of the device discovered, for example, **8F:8F:8E:8E:6D:6D**. | +| rssi | number | Yes | No | RSSI of the device. | +| data | ArrayBuffer | Yes | No | Advertisement packets sent by the device. | + + +## BluetoothState + +Enumerates the Bluetooth states. + +| Name | Default Value | Description | +| -------- | -------- | -------- | +| STATE_OFF | 0 | Bluetooth is turned off. | +| STATE_TURNING_ON | 1 | Bluetooth is being turned on. | +| STATE_ON | 2 | Bluetooth is turned on. | +| STATE_TURNING_OFF | 3 | Bluetooth is being turned off. | +| STATE_BLE_TURNING_ON | 4 | The LE-only mode is being turned on for Bluetooth. | +| STATE_BLE_ON | 5 | Bluetooth is in LE-only mode. | +| STATE_BLE_TURNING_OFF | 6 | The LE-only mode is being turned off for Bluetooth. | + + +## AdvertiseSetting + +Defines the BLE advertising parameters. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| interval | number | Yes | Yes | Interval for BLE advertising. The minimum value is **32** slots (20 ms). The maximum value is **16777215** slots. The default value is **1600** slots (1s). | +| txPower | number | Yes | Yes | Transmit power, in dBm. The value range is –127 to 1. The default value is **–7**. | +| connectable | boolean | Yes | Yes | Whether the advertisement is connectable. The default value is **true**. | + + +## AdvertiseData + +Defines the content of a BLE advertisement packet. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| serviceUuids | Array<string> | Yes | Yes | List of service UUIDs to be broadcasted. | +| manufactureData | Array<[ERROR:Invalid link:en-us_topic_0000001193344974.xml#xref3348mcpsimp,link:#ManufactureData](#ManufactureData)> | Yes | Yes | List of manufacturers to be broadcasted. | +| serviceData | Array<[ERROR:Invalid link:en-us_topic_0000001193344974.xml#xref3355mcpsimp,link:#ServiceData](#ServiceData)> | Yes | Yes | List of service data to be broadcasted. | + + +## ManufactureData + +Defines the content of a BLE advertisement packet. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| manufactureId | Array<string> | Yes | Yes | Manufacturer ID allocated by the Bluetooth SIG. | +| manufactureValue | ArrayBuffer | Yes | Yes | Manufacturer data. | + + +## ServiceData + +Defines the service data contained in an advertisement packet. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| serviceUuid | string | Yes | Yes | Service UUID. | +| serviceValue | ArrayBuffer | Yes | Yes | Service data. | + + +## PinRequiredParam + +Defines the pairing request parameters. + +| Name | Type | Readable | Writable | Description | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | Yes | No | ID of the device to pair. | +| pinCode | string | Yes | No | Key for the device pairing. | diff --git a/zh-cn/application-dev/media/Readme-CN.md b/zh-cn/application-dev/media/Readme-CN.md index e3bdd6ec4c355e4ebd63708361188b7e417f0781..eb57afa3f1641fb0401ce4988d73043dbba8502f 100755 --- a/zh-cn/application-dev/media/Readme-CN.md +++ b/zh-cn/application-dev/media/Readme-CN.md @@ -8,6 +8,4 @@ - 视频 - - [视频开发概述](video-overview.md) - - [视频播放开发指导](video-playback.md) - [视频录制开发指导](video-recorder.md) diff --git a/zh-cn/application-dev/media/audio-recorder.md b/zh-cn/application-dev/media/audio-recorder.md index b2d27243c0f20c5465cad13c34a3dacb525c39c5..7f8da1786ac4b14047ec37db909c862529c7973b 100644 --- a/zh-cn/application-dev/media/audio-recorder.md +++ b/zh-cn/application-dev/media/audio-recorder.md @@ -6,13 +6,13 @@ **图1** 音频录制状态机 -![zh-ch_image_audio_recorder_state_machine](figures/zh-ch_image_audio_recorder_state_machine.jpg) +![zh-ch_image_audio_recorder_state_machine](figures/zh-ch_image_audio_recorder_state_machine.png) ## 音频录制零层图 **图2** 音频录制零层图 -![zh-ch_image_audio_recorder_zero](figures/zh-ch_image_audio_recorder_zero.jpg) +![zh-ch_image_audio_recorder_zero](figures/zh-ch_image_audio_recorder_zero.png) ## 音频录制开发步骤 diff --git a/zh-cn/application-dev/media/figures/zh-ch_image_audio_recorder_state_machine.jpg b/zh-cn/application-dev/media/figures/zh-ch_image_audio_recorder_state_machine.jpg deleted file mode 100644 index 33f4889b30fd4620c7c9796bd9cb3ecef4975460..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/media/figures/zh-ch_image_audio_recorder_state_machine.jpg and /dev/null differ diff --git a/zh-cn/application-dev/media/figures/zh-ch_image_audio_recorder_state_machine.png b/zh-cn/application-dev/media/figures/zh-ch_image_audio_recorder_state_machine.png new file mode 100644 index 0000000000000000000000000000000000000000..9a7ffe8a8b978d09c8f43f292571cf85dfcacb21 Binary files /dev/null and b/zh-cn/application-dev/media/figures/zh-ch_image_audio_recorder_state_machine.png differ diff --git a/zh-cn/application-dev/media/figures/zh-ch_image_audio_recorder_zero.jpg b/zh-cn/application-dev/media/figures/zh-ch_image_audio_recorder_zero.jpg deleted file mode 100644 index 562efb6dde5287a3be6ee33040c8980eff6724fa..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/media/figures/zh-ch_image_audio_recorder_zero.jpg and /dev/null differ diff --git a/zh-cn/application-dev/media/figures/zh-ch_image_audio_recorder_zero.png b/zh-cn/application-dev/media/figures/zh-ch_image_audio_recorder_zero.png new file mode 100644 index 0000000000000000000000000000000000000000..90f032d88e6ae0d2a843555c569aa345f19d266c Binary files /dev/null and b/zh-cn/application-dev/media/figures/zh-ch_image_audio_recorder_zero.png differ diff --git a/zh-cn/application-dev/media/figures/zh-ch_image_video_recorder_state_machine.jpg b/zh-cn/application-dev/media/figures/zh-ch_image_video_recorder_state_machine.jpg deleted file mode 100644 index 05c75961327c0e488f89f74d60689a977d01c80a..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/media/figures/zh-ch_image_video_recorder_state_machine.jpg and /dev/null differ diff --git a/zh-cn/application-dev/media/figures/zh-ch_image_video_recorder_state_machine.png b/zh-cn/application-dev/media/figures/zh-ch_image_video_recorder_state_machine.png new file mode 100644 index 0000000000000000000000000000000000000000..6fbcfaaa11b645143534b0a76308f6586eda1124 Binary files /dev/null and b/zh-cn/application-dev/media/figures/zh-ch_image_video_recorder_state_machine.png differ diff --git a/zh-cn/application-dev/media/figures/zh-ch_image_video_recorder_zero.jpg b/zh-cn/application-dev/media/figures/zh-ch_image_video_recorder_zero.jpg deleted file mode 100644 index ff57649f8fbf8354e395597f5bf9a0a05572f14e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/media/figures/zh-ch_image_video_recorder_zero.jpg and /dev/null differ diff --git a/zh-cn/application-dev/media/figures/zh-ch_image_video_recorder_zero.png b/zh-cn/application-dev/media/figures/zh-ch_image_video_recorder_zero.png new file mode 100644 index 0000000000000000000000000000000000000000..8bfb453f935bd8342be989eba0393541b35ba582 Binary files /dev/null and b/zh-cn/application-dev/media/figures/zh-ch_image_video_recorder_zero.png differ diff --git a/zh-cn/application-dev/media/video-recorder.md b/zh-cn/application-dev/media/video-recorder.md index cf4b864a2f6e675fa36c5cd9b9ea85fa4f84c934..843887a21df178b34f3ed3fb4caa5a85f0e57b56 100644 --- a/zh-cn/application-dev/media/video-recorder.md +++ b/zh-cn/application-dev/media/video-recorder.md @@ -6,13 +6,13 @@ 图1 视频录制状态机 -![zh-ch_image_video_recorder_state_machine](figures/zh-ch_image_video_recorder_state_machine.jpg) +![zh-ch_image_video_recorder_state_machine](figures/zh-ch_image_video_recorder_state_machine.png) ## 视频录制零层图 **图2** 视频录制零层图 -![zh-ch_image_video_recorder_zero](figures/zh-ch_image_video_recorder_zero.jpg) +![zh-ch_image_video_recorder_zero](figures/zh-ch_image_video_recorder_zero.png) ## 视频录制开发步骤 diff --git a/zh-cn/application-dev/reference/apis/Readme-CN.md b/zh-cn/application-dev/reference/apis/Readme-CN.md index bcdb2b0cc32de8ef844edf40fe7c395c12859630..b67e88c1cf44f5a7d3ac50c5dd5b6ea71cb1dcea 100644 --- a/zh-cn/application-dev/reference/apis/Readme-CN.md +++ b/zh-cn/application-dev/reference/apis/Readme-CN.md @@ -45,6 +45,7 @@ - [网络搜索](js-apis-radio.md) - 网络与连接 - [WLAN](js-apis-wifi.md) + - [Bluetooth](js-apis-bluetooth.md) - 设备管理 - [传感器](js-apis-sensor.md) - [振动](js-apis-vibrator.md) @@ -77,6 +78,7 @@ - [分布式跟踪](js-apis-hitracechain.md) - [日志打印](js-apis-hilog.md) - [检测模式](js-apis-hichecker.md) + - [Debug调试](js-apis-hidebug.md) - 语言基础类库 - [获取进程相关的信息](js-apis-process.md) - [URL字符串解析](js-apis-url.md) diff --git a/zh-cn/application-dev/reference/apis/js-apis-bluetooth.md b/zh-cn/application-dev/reference/apis/js-apis-bluetooth.md new file mode 100644 index 0000000000000000000000000000000000000000..4da7b0ff665a66eee95d8c38ce4722fd65bc58b0 --- /dev/null +++ b/zh-cn/application-dev/reference/apis/js-apis-bluetooth.md @@ -0,0 +1,2474 @@ +# Bluetooth + +> **说明：** +> +> 本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 + +蓝牙模块提供了基础的传统蓝牙能力以及BLE的扫描、广播等功能。 + +## 导入模块 + +``` +import bluetooth from '@ohos.bluetooth'; +``` + + +## 权限 + +ohos.permission.USE_BLUETOOTH + +ohos.permission.MANAGE_BLUETOOTH + +ohos.permission.DISCOVER_BLUETOOTH + +ohos.permission.LOCATION + + +## bluetooth.enableBluetooth + +enableBluetooth(): boolean + +开启蓝牙。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| boolean | 打开蓝牙，成功返回true，否则返回false。 | + +**示例：** + +``` +let enable = bluetooth.enableBluetooth(); +``` + + +## bluetooth.disableBluetooth + +disableBluetooth(): boolean + +关闭蓝牙。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| boolean | 关闭蓝牙，成功返回true，否则返回false。 | + +**示例：** + +``` +let disable = bluetooth.disableBluetooth(); +``` + + +## bluetooth.getLocalName + +getLocalName(): string + +获取蓝牙本地设备名称。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| string | 蓝牙本地设备名称。 | + +**示例：** + +``` +let localName = bluetooth.getLocalName(); +``` + + +## bluetooth.getState + +getState(): BluetoothState + +获取蓝牙开关状态。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| [BluetoothState](#bluetoothstate) | 表示蓝牙开关状态。 | + +**示例：** + +``` +let state = bluetooth.getState(); +``` + + +## bluetooth.getBtConnectionState + +getBtConnectionState(): ProfileConnectionState + +获取蓝牙设备的Profile连接状态。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| [ProfileConnectionState](#profileconnectionstate) | 表示蓝牙设备的Profile连接状态。 | + +**示例：** + +``` +let connectionState = bluetooth.getBtConnectionState(); +``` + + +## bluetooth.setLocalName + +setLocalName(name: string): boolean + +设置蓝牙本地设备名称。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| name | string | 是 | 要设置的蓝牙名称，最大长度为128。 | + +**返回值：** + +| | | +| -------- | -------- | +| 类型 | 说明 | +| boolean | 设置蓝牙本地设备名称，成功返回true，否则返回false。 | + +**示例：** + +``` +let ret = bluetooth.setLocalName('device_name'); +``` + + +## bluetooth.pairDevice + +pairDevice(deviceId: string): boolean + +发起蓝牙配对。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| deviceId | string | 是 | 表示配对的远端设备地址，例如："8F:8F:8E:8E:6D:6D"。 | + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| boolean | 发起蓝牙配对，成功返回true，否则返回false。 | + +**示例：** + +``` +// 实际的地址可由扫描流程获取 +let result = bluetooth.pairDevice("8F:8F:8E:8E:6D:6D"); +``` + + +## bluetooth.getPairedDevices + +getPairedDevices(): Array<string> + +获取蓝牙配对列表。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| Array<string> | 已配对蓝牙设备的地址列表。 | + +**示例：** + +``` +let devices = bluetooth.getPairedDevices(); +``` + + +## bluetooth.setBluetoothScanMode + +setBluetoothScanMode(mode: ScanMode, duration: number): boolean + +设置蓝牙扫描模式，可以被远端设备发现。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| mode | [ScanMode](#scanmode) | 是 | 蓝牙扫描模式。 | +| duration | number | 是 | 设备可被发现的持续时间，单位为秒；设置为0则持续可发现。 | + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| boolean | 设置蓝牙扫描，成功返回true，否则返回false。 | + +**示例：** + +``` +// 设置为可连接可发现才可被远端设备扫描到，可以连接。 +let result = bluetooth.setBluetoothScanMode(ScanMode.SCAN_MODE_CONNECTABLE_GENERAL_DISCOVERABLE, 100); +``` + + +## bluetooth.getBluetoothScanMode + +getBluetoothScanMode(): ScanMode + +获取蓝牙扫描模式。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| [ScanMode](#scanmode) | 蓝牙扫描模式。 | + +**示例：** + +``` +let scanMode = bluetooth.getBluetoothScanMode(); +``` + + +## bluetooth.startBluetoothDiscovery + +startBluetoothDiscovery(): boolean + +开启蓝牙扫描，可以发现远端设备。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| boolean | 开启蓝牙扫描，成功返回true，否则返回false。 | + +**示例：** + +``` +let deviceId; +function onReceiveEvent(data) { + deviceId = data; +} +bluetooth.on('bluetoothDeviceFind', onReceiveEvent); +let result = bluetooth.startBluetoothDiscovery(); +``` + + +## bluetooth.stopBluetoothDiscovery + +stopBluetoothDiscovery(): boolean + +关闭蓝牙扫描。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| boolean | 关闭蓝牙扫描，成功返回true，否则返回false。 | + +**示例：** + +``` +let result = bluetooth.stopBluetoothDiscovery(); +``` + + +## bluetooth.setDevicePairingConfirmation + +setDevicePairingConfirmation(device: string, accept: boolean): boolean + +设置设备配对请求确认。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| device | string | 是 | 表示远端设备地址，例如："8F:8F:8E:8E:6D:6D"。 | +| accept | boolean | 是 | 接受配对请求设置为true，否则设置为false。 | + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| boolean | 设置设备配对确认，成功返回true，否则返回false。 | + +**示例：** + +``` +// 订阅“pinRequired”配对请求事件，收到远端配对请求后设置配对确认 +function onReceivePinRequiredEvent(data) { // data为配对请求的入参，配对请求参数 + console.info('pin required = '+ JSON.stringify(data)); + bluetooth.setDevicePairingConfirmation(data.deviceId, true); +} +bluetooth.on("pinRequired", onReceivePinRequiredEvent); +``` + + +## bluetooth.on('bluetoothDeviceFind') + +on(type: "bluetoothDeviceFind", callback: Callback<Array<string>>): void + +订阅蓝牙设备发现上报事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"bluetoothDeviceFind"字符串，表示蓝牙设备发现事件。 | +| callback | Callback<Array<string>> | 是 | 表示回调函数的入参，发现的设备集合。回调函数由用户创建通过该接口注册。 | + +**返回值：** + +无 + +**示例：** + +``` +function onReceiveEvent(data) { // data为蓝牙设备地址集合 + console.info('bluetooth device find = '+ JSON.stringify(data)); +} +bluetooth.on('bluetoothDeviceFind', onReceiveEvent); +``` + + +## bluetooth.off('bluetoothDeviceFind') + +off(type: "bluetoothDeviceFind", callback?: Callback<Array<string>>): void + +取消订阅蓝牙设备发现上报事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"bluetoothDeviceFind"字符串，表示蓝牙设备发现事件。 | +| callback | Callback<Array<string>> | 否 | 表示取消订阅蓝牙设备发现事件上报。不填该参数则取消订阅该type对应的所有回调。 | + +**返回值：** + +无 + +**示例：** + +``` +function onReceiveEvent(data) { + console.info('bluetooth device find = '+ JSON.stringify(data)); +} +bluetooth.on('bluetoothDeviceFind', onReceiveEvent); +bluetooth.off('bluetoothDeviceFind', onReceiveEvent); +``` + + +## bluetooth.on('pinRequired') + +on(type: "pinRequired", callback: Callback<PinRequiredParam>): void + +订阅远端蓝牙设备的配对请求事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"pinRequired"字符串，表示配对请求事件。 | +| callback | Callback<[PinRequiredParam](#pinrequiredparam)> | 是 | 表示回调函数的入参，配对请求。回调函数由用户创建通过该接口注册。 | + +**返回值：** + +无 + +**示例：** + +``` +function onReceiveEvent(data) { // data为配对请求参数 + console.info('pin required = '+ JSON.stringify(data)); +} +bluetooth.on('pinRequired', onReceiveEvent); +``` + + +## bluetooth.off('pinRequired') + +off(type: "pinRequired", callback?: Callback<PinRequiredParam>): void + +取消订阅远端蓝牙设备的配对请求事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"pinRequired"字符串，表示配对请求事件。 | +| callback | Callback<[PinRequiredParam](#pinrequiredparam)> | 否 | 表示取消订阅蓝牙配对请求事件上报，入参为配对请求参数。不填该参数则取消订阅该type对应的所有回调。 | + +**返回值：** + +无 + +**示例：** + +``` +function onReceiveEvent(data) { + console.info('pin required = '+ JSON.stringify(data)); +} +bluetooth.on('pinRequired', onReceiveEvent); +bluetooth.off('pinRequired', onReceiveEvent); +``` + + +## bluetooth.on('bondStateChange') + +on(type: "bondStateChange", callback: Callback<BondState>): void + +订阅蓝牙配对状态改变事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"bondStateChange"字符串，表示蓝牙配对状态改变事件。 | +| callback | Callback<[BondState](#bondstate)> | 是 | 表示回调函数的入参，配对的状态。回调函数由用户创建通过该接口注册。 | + +**返回值：** + +无 + +**示例：** + +``` +function onReceiveEvent(data) { // data为回调函数入参，表示配对的状态 + console.info('pair state = '+ JSON.stringify(data)); +} +bluetooth.on('bondStateChange', onReceiveEvent); +``` + + +## bluetooth.off('bondStateChange') + +off(type: "bondStateChange", callback?: Callback<BondState>): void + +取消订阅蓝牙配对状态改变事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"bondStateChange"字符串，表示蓝牙配对状态改变事件。 | +| callback | Callback<[BondState](#bondstate)> | 否 | 表示取消订阅蓝牙配对状态改变事件上报。不填该参数则取消订阅该type对应的所有回调。 | + +**返回值：** + +无 + +**示例：** + +``` +function onReceiveEvent(data) { + console.info('bond state = '+ JSON.stringify(data)); +} +bluetooth.on('bondStateChange', onReceiveEvent); +bluetooth.off('bondStateChange', onReceiveEvent); +``` + + +## bluetooth.on('stateChange') + +on(type: "stateChange", callback: Callback<BluetoothState>): void + +订阅蓝牙连接状态改变事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"stateChange"字符串，表示蓝牙状态改变事件。 | +| callback | Callback<[BluetoothState](#bluetoothstate)> | 是 | 表示回调函数的入参，蓝牙状态。回调函数由用户创建通过该接口注册。 | + +**返回值：** + +无 + +**示例：** + +``` +function onReceiveEvent(data) { + console.info('bluetooth state = '+ JSON.stringify(data)); +} +bluetooth.on('stateChange', onReceiveEvent); +``` + + +## bluetooth.off('stateChange') + +off(type: "stateChange", callback?: Callback<BluetoothState>): void + +取消订阅蓝牙连接状态改变事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"stateChange"字符串，表示蓝牙状态改变事件。 | +| callback | Callback<[BluetoothState](#bluetoothstate)> | 否 | 表示取消订阅蓝牙状态改变事件上报。不填该参数则取消订阅该type对应的所有回调。 | + +**返回值：** + +无 + +**示例：** + +``` +function onReceiveEvent(data) { + console.info('bluetooth state = '+ JSON.stringify(data)); +} +bluetooth.on('stateChange', onReceiveEvent); +bluetooth.off('stateChange', onReceiveEvent); +``` + + +## bluetooth.sppListen + +sppListen(name: string, option: SppOption, callback: AsyncCallback<number>): void + +创建一个服务端监听Socket。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| name | string | 是 | 服务的名称。 | +| option | [SppOption](#sppoption) | 是 | spp监听配置参数。 | +| callback | AsyncCallback<number> | 是 | 表示回调函数的入参，服务端Socket的id。 | + +**示例：** + +``` +let serverNumber = -1; +function serverSocket(code, number) { + console.log('bluetooth error code: ' + code.code); + if (code.code == 0) { + console.log('bluetooth serverSocket Number: ' + number); + serverNumber = number; + } +} + +let sppOption = {uuid: '00001810-0000-1000-8000-00805F9B34FB', secure: false, type: 0}; +bluetooth.sppListen('server1', sppOption, serverSocket); +``` + + +## bluetooth.sppAccept + +sppAccept(serverSocket: number, callback: AsyncCallback<number>): void + +服务端监听socket等待客户端连接。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| serverSocket | number | 是 | 服务端socket的id。 | +| callback | AsyncCallback<number> | 是 | 表示回调函数的入参，客户端socket的id。 | + +**示例：** + +``` +let clientNumber = -1; +function acceptClientSocket(code, number) { + console.log('bluetooth error code: ' + code.code); + if (code.code == 0) { + console.log('bluetooth clientSocket Number: ' + number); + // 获取的clientNumber用作服务端后续读/写操作socket的id。 + clientNumber = number; + } +} +bluetooth.sppAccept(serverNumber, acceptClientSocket); +``` + + +## bluetooth.sppConnect + +sppConnect(device: string, option: SppOption, callback: AsyncCallback<number>): void + +客户端向远端设备发起spp连接。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| device | string | 是 | 对端设备地址，例如："8F:8F:8E:8E:6D:6D"。 | +| option | [SppOption](#sppoption) | 是 | spp客户端连接配置参数。 | +| callback | AsyncCallback<number> | 是 | 表示回调函数的入参，客户端socket的id。 | + +**示例：** + +``` +let clientNumber = -1; +function clientSocket(code, number) { + if (code.code != 0) { + return; + } + console.log('bluetooth serverSocket Number: ' + number); + // 获取的clientNumber用作客户端后续读/写操作socket的id。 + clientNumber = number; +} +let sppOption = {uuid: '00001810-0000-1000-8000-00805F9B34FB', secure: false, type: 0}; +bluetooth.sppConnect('8F:8F:8E:8E:6D:6D', sppOption, clientSocket); +``` + + +## bluetooth.sppCloseServerSocket + +sppCloseServerSocket(socket: number): void + +关闭服务端监听Socket，入参socket由sppListen接口返回。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| socket | number | 是 | 服务端监听socket的id。 | + +**示例：** + +``` +bluetooth.sppCloseServerSocket(serverNumber); +``` + + +## bluetooth.sppCloseClientSocket + +sppCloseClientSocket(socket: number): void + +关闭客户端socket，入参socket由sppAccept或sppConnect接口获取。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| 参数名 | 类型 | 必填 | 说明 | +| socket | number | 是 | 客户端socket的id。 | + +**示例：** + +``` +bluetooth.sppCloseClientSocket(clientNumber); +``` + + +## bluetooth.sppWrite + +sppWrite(clientSocket: number, data: ArrayBuffer): boolean + +通过socket向远端发送数据，入参clientSocket由sppAccept或sppConnect接口获取 。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| clientSocket | number | 是 | 客户端socket的id。 | +| data | ArrayBuffer | 是 | 写入的数据。 | + +**返回值：** + +| | | +| -------- | -------- | +| 类型 | 说明 | +| boolean | 写数据操作，成功返回true，否则返回false。 | + +**示例：** + +``` +let arrayBuffer = new ArrayBuffer(8); +let data = new Uint8Array(arrayBuffer); +data[0] = 123; +let ret = bluetooth.sppWrite(clientNumber, arrayBuffer); +if (ret) { + console.log('spp write successfully'); +} else { + console.log('spp write failed'); +} +``` + + +## bluetooth.on('sppRead') + +on(type: "sppRead", clientSocket: number, callback: Callback<ArrayBuffer>): void + +订阅spp读请求事件，入参clientSocket由sppAccept或sppConnect接口获取。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"sppRead"字符串，表示spp读请求事件。 | +| clientSocket | number | 是 | 客户端socket的id。 | +| callback | Callback<ArrayBuffer> | 是 | 表示回调函数的入参，读取到的数据。 | + +**返回值：** + +无 + +**示例：** + +``` +function dataRead(dataBuffer) { + let data = new Uint8Array(dataBuffer); + console.log('bluetooth data is: ' + data[0]); +} +bluetooth.on('sppRead', clientNumber, dataRead); +``` + + +## bluetooth.off('sppRead') + +off(type: "sppRead", clientSocket: number, callback?: Callback<ArrayBuffer>): void + +取消订阅spp读请求事件，入参clientSocket由sppAccept或sppConnect接口获取。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"sppRead"字符串，表示spp读请求事件。 | +| clientSocket | number | 是 | 客户端Socket的id。 | +| callback | Callback<ArrayBuffer> | 否 | 表示取消订阅spp读请求事件上报。不填该参数则取消订阅该type对应的所有回调。 | + +**返回值：** + +无 + +**示例：** + +``` +bluetooth.off('sppRead', clientNumber); +``` + + +## bluetooth.BLE + +### bluetooth.BLE.createGattServer + +createGattServer(): GattServer + +创建一个可使用的GattServer实例。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| [GattServer](#gattserver) | server端类，使用server端方法之前需要创建该类的实例进行操作。 | + +**示例：** + +``` +let gattServer = bluetooth.BLE.createGattServer(); +``` + + +### bluetooth.BLE.createGattClientDevice + +createGattClientDevice(deviceId: string): GattClientDevice + +创建一个可使用的GattClientDevice实例。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| deviceId | string | 是 | 对端设备地址， 例如："8F:8F:8E:8E:6D:6D"。 | + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| [GattClientDevice](#gattclientdevice) | client端类，使用client端方法之前需要创建该类的实例进行操作。 | + +**示例：** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +``` + + +### bluetooth.BLE.getConnectedBLEDevices + +getConnectedBLEDevices(): Array<string> + +获取和当前设备连接的BLE设备。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| Array<string> | 返回和当前设备连接BLE设备地址集合。 | + +**示例：** + +``` +let result = bluetooth.BLE.getConnectedBLEDevices(); +``` + + +### bluetooth.BLE.startBLEScan + +startBLEScan(filters: Array<ScanFilter>, options?: ScanOptions): void + +发起BLE扫描流程。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| filters | Array<[ScanFilter](#scanfilter)> | 是 | 表示扫描结果过滤策略集合，如果不使用过滤的方式，该参数设置为null。 | +| options | [ScanOptions](#scanoptions) | 否 | 表示扫描的参数配置，可选参数。 | + +**返回值：** + +无 + +**示例：** + +``` +function onReceiveEvent(data) { + console.info('BLE scan device find result = '+ JSON.stringify(data)); +} +bluetooth.BLE.on("BLEDeviceFind", onReceiveEvent); +bluetooth.BLE.startBLEScan( + [{ + deviceId:"8F:8F:8E:8E:6D:6D", + name:"test", + serviceUuid:"00001888-0000-1000-8000-00805f9b34fb" + }], + { + interval: 500, + dutyMode: bluetooth.ScanDuty.SCAN_MODE_LOW_POWER, + matchMode: bluetooth.MatchMode.MATCH_MODE_AGGRESSIVE, + } +); +``` + + +### bluetooth.BLE.stopBLEScan + +stopBLEScan(): void + +停止BLE扫描流程。 + +**返回值：** + +无 + +**示例：** + +``` +bluetooth.BLE.stopBLEScan(); +``` + + +### bluetooth.BLE.on('BLEDeviceFind') + +on(type: "BLEDeviceFind", callback: Callback<Array<ScanResult>>): void + +订阅BLE设备发现上报事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"BLEDeviceFind"字符串，表示BLE设备发现事件。 | +| callback | Callback<Array<[ScanResult](#scanresult)>> | 是 | 表示回调函数的入参，发现的设备集合。回调函数由用户创建通过该接口注册。 | + +**返回值：** + +无 + +**示例：** + +``` +function onReceiveEvent(data) { + console.info('bluetooth device find = '+ JSON.stringify(data)); +} +bluetooth.BLE.on('BLEDeviceFind', onReceiveEvent); +``` + + +### bluetooth.BLE.off('BLEDeviceFind') + +off(type: "BLEDeviceFind", callback?: Callback<Array<ScanResult>>): void + +取消订阅BLE设备发现上报事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"BLEDeviceFind"字符串，表示BLE设备发现事件。 | +| callback | Callback<Array<[ScanResult](#scanresult)>> | 否 | 表示取消订阅BLE设备发现事件上报。不填该参数则取消订阅该type对应的所有回调。 | + +**返回值：** + +无 + +**示例：** + +``` +function onReceiveEvent(data) { + console.info('bluetooth device find = '+ JSON.stringify(data)); +} +bluetooth.BLE.on('BLEDeviceFind', onReceiveEvent); +bluetooth.BLE.off('BLEDeviceFind', onReceiveEvent); +``` + + +## GattServer + +server端类，使用server端方法之前需要创建该类的实例进行操作，通过createGattServer()方法构造此实例。 + + +### startAdvertising + +startAdvertising(setting: AdvertiseSetting, advData: AdvertiseData, advResponse?: AdvertiseData): void + +开始发送BLE广播。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| setting | [AdvertiseSetting](#advertisesetting) | 是 | BLE广播的相关参数。 | +| advData | [AdvertiseData](#advertisedata) | 是 | BLE广播包内容。 | +| advResponse | [AdvertiseData](#advertisedata) | 否 | BLE回复扫描请求回复响应。 | + +**返回值：** + +无 + +**示例：** + +``` +let manufactureValueBuffer = new Uint8Array(4); +manufactureValueBuffer[0] = 1; +manufactureValueBuffer[1] = 2; +manufactureValueBuffer[2] = 3; +manufactureValueBuffer[3] = 4; + +let serviceValueBuffer = new Uint8Array(4); +serviceValueBuffer[0] = 4; +serviceValueBuffer[1] = 6; +serviceValueBuffer[2] = 7; +serviceValueBuffer[3] = 8; +console.info('manufactureValueBuffer = '+ JSON.stringify(manufactureValueBuffer)); +console.info('serviceValueBuffer = '+ JSON.stringify(serviceValueBuffer)); +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.startAdvertising({ + interval:150, + txPower:60, + connectable:true, + },{ + serviceUuids:["00001888-0000-1000-8000-00805f9b34fb"], + manufactureData:[{ + manufactureId:4567, + manufactureValue:manufactureValueBuffer.buffer + }], + serviceData:[{ + serviceUuid:"00001888-0000-1000-8000-00805f9b34fb", + serviceValue:serviceValueBuffer.buffer + }], + },{ + serviceUuids:["00001889-0000-1000-8000-00805f9b34fb"], + manufactureData:[{ + manufactureId:1789, + manufactureValue:manufactureValueBuffer.buffer + }], + serviceData:[{ + serviceUuid:"00001889-0000-1000-8000-00805f9b34fb", + serviceValue:serviceValueBuffer.buffer + }], +}); +``` + + +### stopAdvertising + +stopAdvertising(): void + +停止发送BLE广播。 + +**返回值：** + +无 + +**示例：** + +``` +let server = bluetooth.BLE.createGattServer(); +server.stopAdvertising(); +``` + + +### addService + +addService(service: GattService): boolean + +server端添加服务。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| service | [GattService](#gattservice) | 是 | 服务端的service数据。BLE广播的相关参数 | + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| boolean | 添加服务操作，成功返回true，否则返回false。 | + +**示例：** + +``` +// 创建descriptors +let descriptors = []; +let arrayBuffer = new ArrayBuffer(8); +let descV = new Uint8Array(arrayBuffer); +descV[0] = 11; +let descriptor = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', + descriptorUuid: '00001830-0000-1000-8000-00805F9B34FB', descriptorValue: arrayBuffer}; +descriptors[0] = descriptor; + +// 创建characteristics +let characteristics = []; +let arrayBufferC = new ArrayBuffer(8); +let cccV = new Uint8Array(arrayBufferC); +cccV[0] = 1; +let characteristic = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', characteristicValue: arrayBufferC, descriptors:descriptors}; +let characteristicN = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001821-0000-1000-8000-00805F9B34FB', characteristicValue: arrayBufferC, descriptors:descriptorsN}; +characteristics[0] = characteristic; + +// 创建gattService +let gattService = {serviceUuid:'00001810-0000-1000-8000-00805F9B34FB', isPrimary: true, characteristics:characteristics, includeServices:[]}; + +let gattServer = bluetooth.BLE.createGattServer(); +let ret = gattServer.addService(gattService); +if (ret) { + console.log("add service successfully"); +} else { + console.log("add service failed"); +} +``` + + +### removeService + +removeService(serviceUuid: string): boolean + +删除已添加的服务。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| serviceUuid | string | 是 | service的UUID，例如“00001810-0000-1000-8000-00805F9B34FB”。 | + +**返回值：** + +| | | +| -------- | -------- | +| 类型 | 说明 | +| boolean | 删除服务操作，成功返回true，否则返回false。 | + +**示例：** + +``` +let server = bluetooth.BLE.createGattServer(); +server.removeService('00001810-0000-1000-8000-00805F9B34FB'); +``` + + +### close + +close(): void + +关闭服务端功能，去注册server在协议栈的注册，调用该接口后[GattServer](#gattserver)实例将不能再使用。 + +**示例：** + +``` +let server = bluetooth.BLE.createGattServer(); +server.close(); +``` + + +### notifyCharacteristicChanged + +notifyCharacteristicChanged(deviceId: string, notifyCharacteristic: NotifyCharacteristic): boolean + +server端特征值发生变化时，主动通知已连接的client设备。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| deviceId | string | 是 | 接收通知的client端设备地址，例如“8F:8F:8E:8E:6D:6D”。 | +| notifyCharacteristic | [NotifyCharacteristic](#notifycharacteristic) | 是 | 通知的特征值数据。 | + +**返回值：** + +| | | +| -------- | -------- | +| 类型 | 说明 | +| boolean | 通知操作，成功返回true，否则返回false。 | + +**示例：** + +``` +let notifyCharacteristic = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001821-0000-1000-8000-00805F9B34FB', characteristicValue: notifyCcc.characteristicValue, confirm: false}; +let server = bluetooth.BLE.createGattServer(); +server.notifyCharacteristicChanged('8F:8F:8E:8E:6D:6D', notifyCharacteristic); +``` + + +### sendResponse + +sendResponse(serverResponse: ServerResponse): boolean + +server端回复client端的读写请求。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| serverResponse | [ServerResponse](#serverresponse) | 是 | server端回复的响应数据。 | + +**返回值：** + +| | | +| -------- | -------- | +| 类型 | 说明 | +| boolean | 回复响应操作，成功返回true，否则返回false。 | + +**示例：** + +``` +/* send response */ +let arrayBufferCCC = new ArrayBuffer(8); +let cccValue = new Uint8Array(arrayBufferCCC); +cccValue[0] = 1123; +let serverResponse = { + "deviceId": "8F:8F:8E:8E:6D:6D", + "transId": 0, + "status": 0, + "offset": 0, + "value": arrayBufferCCC, +}; + +let gattServer = bluetooth.BLE.createGattServer(); +let ret = gattServer.sendResponse(serverResponse); +if (ret) { + console.log('bluetooth sendResponse successfully'); +} else { + console.log('bluetooth sendResponse failed'); +} +``` + + +### on('characteristicRead') + +on(type: "characteristicRead", callback: Callback<CharacteristicReadReq>): void + +server端订阅特征值读请求事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"characteristicRead"字符串，表示特征值读请求事件。 | +| callback | Callback<[CharacteristicReadReq](#characteristicreadreq)> | 是 | 表示回调函数的入参，client端发送的读请求数据。 | + +**返回值：** + +无 + +**示例：** + +``` +let arrayBufferCCC = new ArrayBuffer(8); +let cccValue = new Uint8Array(arrayBufferCCC); +cccValue[0] = 1123; +function ReadCharacteristicReq(CharacteristicReadReq) { + let deviceId = CharacteristicReadReq.deviceId; + let transId = CharacteristicReadReq.transId; + let offset = CharacteristicReadReq.offset; + let characteristicUuid = CharacteristicReadReq.characteristicUuid; + + let serverResponse = {deviceId: deviceId, transId: transId, status: 0, offset: offset, value:arrayBufferCCC}; + + let ret = gattServer.sendResponse(serverResponse); + if (ret) { + console.log('bluetooth sendResponse successfully'); + } else { + console.log('bluetooth sendResponse failed'); + } +} + +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.on("characteristicRead", ReadCharacteristicReq); +``` + + +### off('characteristicRead') + +off(type: "characteristicRead", callback?: Callback<CharacteristicReadReq>): void + +server端取消订阅特征值读请求事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"characteristicRead"字符串，表示特征值读请求事件。 | +| callback | Callback<[CharacteristicReadReq](#characteristicreadreq)> | 否 | 表示取消订阅特征值读请求事件上报。不填该参数则取消订阅该type对应的所有回调。 | + +**返回值：** + +无 + +**示例：** + +``` +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.off("characteristicRead"); +``` + + +### on('characteristicWrite') + +on(type: "characteristicWrite", callback: Callback<CharacteristicWriteReq>): void + +server端订阅特征值写请求事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"characteristicWrite"字符串，表示特征值写请求事件。 | +| callback | Callback<[DescriptorWriteReq](#descriptorwritereq)> | 是 | 表示回调函数的入参，client端发送的写请求数据。 | + +**返回值：** + +无 + +**示例：** + +``` +let arrayBufferCCC = new ArrayBuffer(8); +let cccValue = new Uint8Array(arrayBufferCCC); +function WriteCharacteristicReq(CharacteristicWriteReq) { + let deviceId = CharacteristicWriteReq.deviceId; + let transId = CharacteristicWriteReq.transId; + let offset = CharacteristicWriteReq.offset; + let isPrep = CharacteristicWriteReq.isPrep; + let needRsp = CharacteristicWriteReq.needRsp; + let value = new Uint8Array(CharacteristicWriteReq.value); + let characteristicUuid = CharacteristicWriteReq.characteristicUuid; + + cccValue[0] = value[0]; + let serverResponse = {deviceId: deviceId, transId: transId, status: 0, offset: offset, value:arrayBufferCCC}; + + let ret = gattServer.sendResponse(serverResponse); + if (ret) { + console.log('bluetooth sendResponse successfully'); + } else { + console.log('bluetooth sendResponse failed'); + } +} + +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.on("characteristicWrite", WriteCharacteristicReq); +``` + + +### off('characteristicWrite') + +off(type: "characteristicWrite", callback?: Callback<CharacteristicWriteReq>): void + +server端取消订阅特征值写请求事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"characteristicWrite"字符串，表示特征值写请求事件。 | +| callback | Callback<[CharacteristicWriteReq](#characteristicwritereq)> | 否 | 表示取消订阅特征值写请求事件上报。不填该参数则取消订阅该type对应的所有回调。 | + +**返回值：** + +无 + +**示例：** + +``` +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.off("characteristicWrite"); +``` + + +### on('descriptorRead') + +on(type: "descriptorRead", callback: Callback<DescriptorReadReq>): void + +server端订阅描述符读请求事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"descriptorRead"字符串，表示描述符读请求事件。 | +| callback | Callback<[DescriptorReadReq](#descriptorreadreq)> | 是 | 表示回调函数的入参，client端发送的读请求数据。 | + +**返回值：** + +无 + +**示例：** + +``` +let arrayBufferDesc = new ArrayBuffer(8); +let descValue = new Uint8Array(arrayBufferDesc); +descValue[0] = 1101; +function ReadDescriptorReq(DescriptorReadReq) { + let deviceId = DescriptorReadReq.deviceId; + let transId = DescriptorReadReq.transId; + let offset = DescriptorReadReq.offset; + let descriptorUuid = DescriptorReadReq.descriptorUuid; + + let serverResponse = {deviceId: deviceId, transId: transId, status: 0, offset: offset, value:arrayBufferDesc}; + + let ret = gattServer.sendResponse(serverResponse); + if (ret) { + console.log('bluetooth sendResponse successfully'); + } else { + console.log('bluetooth sendResponse failed'); + } +} + +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.on("descriptorRead", ReadDescriptorReq); +``` + + +### off('descriptorRead') + +off(type: "descriptorRead", callback?: Callback<DescriptorReadReq>): void + +server端取消订阅描述符读请求事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"descriptorRead"字符串，表示描述符读请求事件。 | +| callback | Callback<[DescriptorReadReq](#descriptorreadreq)> | 否 | 表示取消订阅描述符读请求事件上报。不填该参数则取消订阅该type对应的所有回调。 | + +**返回值：** + +无 + +**示例：** + +``` +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.off("descriptorRead"); +``` + + +### on('descriptorWrite') + +on(type: "descriptorWrite", callback: Callback<DescriptorWriteReq>): void + +server端订阅描述符写请求事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"descriptorWrite"字符串，表示描述符写请求事件。 | +| callback | Callback<[DescriptorWriteReq](#descriptorwritereq)> | 是 | 表示回调函数的入参，client端发送的写请求数据。 | + +**返回值：** + +无 + +**示例：** + +``` +let arrayBufferDesc = new ArrayBuffer(8); +let descValue = new Uint8Array(arrayBufferDesc); +function WriteDescriptorReq(DescriptorWriteReq) { + let deviceId = DescriptorWriteReq.deviceId; + let transId = DescriptorWriteReq.transId; + let offset = DescriptorWriteReq.offset; + let isPrep = DescriptorWriteReq.isPrep; + let needRsp = DescriptorWriteReq.needRsp; + let value = new Uint8Array(DescriptorWriteReq.value); + let descriptorUuid = DescriptorWriteReq.descriptorUuid; + + descValue[0] = value[0]; + let serverResponse = {deviceId: deviceId, transId: transId, status: 0, offset: offset, value:arrayBufferDesc}; + + let ret = gattServer.sendResponse(serverResponse); + if (ret) { + console.log('bluetooth sendResponse successfully'); + } else { + console.log('bluetooth sendResponse failed'); + } +} + +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.on("descriptorRead", WriteDescriptorReq); +``` + + +### off('descriptorWrite') + +off(type: "descriptorWrite", callback?: Callback<DescriptorWriteReq>): void + +server端取消订阅描述符写请求事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"descriptorWrite"字符串，表示描述符写请求事件。 | +| callback | Callback<[DescriptorWriteReq](#descriptorwritereq)> | 否 | 表示取消订阅描述符读请求事件上报。不填该参数则取消订阅该type对应的所有回调。 | + +**返回值：** + +无 + +**示例：** + +``` +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.off("descriptorWrite"); +``` + + +### on('connectStateChange') + +on(type: "connectStateChange", callback: Callback<BLEConnectChangedState>): void + +server端订阅BLE连接状态变化事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"connectStateChange"字符串，表示BLE连接状态变化事件。 | +| callback | Callback<[BLEConnectChangedState](#bleconnectchangedstate)> | 是 | 表示回调函数的入参，连接状态。 | + +**返回值：** + +无 + +**示例：** + +``` +function Connected(BLEConnectChangedState) { + let deviceId = BLEConnectChangedState.deviceId; + let status = BLEConnectChangedState.state; +} + +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.on("connectStateChange", Connected); +``` + + +### off('connectStateChange') + +off(type: "connectStateChange", callback?: Callback<BLEConnectChangedState>): void + +server端取消订阅BLE连接状态变化事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"connectStateChange"字符串，表示BLE连接状态变化事件。 | +| callback | Callback<[BLEConnectChangedState](#bleconnectchangedstate)> | 否 | 表示取消订阅BLE连接状态变化事件。不填该参数则取消订阅该type对应的所有回调。 | + +**返回值：** + +无 + +**示例：** + +``` +let gattServer = bluetooth.BLE.createGattServer(); +gattServer.off("connectStateChange"); +``` + + +## GattClientDevice + +client端类，使用client端方法之前需要创建该类的实例进行操作，通过createGattClientDevice(deviceId: string)方法构造此实例。 + + +### connect + +connect(): boolean + +client端发起连接远端蓝牙低功耗设备。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| boolean | 连接操作成功返回true，操作失败返回false。 | + +**示例：** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let ret = device.connect(); +``` + + +### disconnect + +disconnect(): boolean + +client端断开与远端蓝牙低功耗设备的连接。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| boolean | 连接操作，成功返回true，操作失败返回false。 | + +**示例：** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let ret = device.disconnect(); +``` + + +### close + +close(): boolean + +关闭客户端功能，注销client在协议栈的注册，调用该接口后[GattClientDevice](#gattclientdevice)实例将不能再使用。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| boolean | 关闭操作，成功返回true，操作失败返回false。 | + +**示例：** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let ret = device.close(); +``` + + + + +### getServices + +getServices(callback: AsyncCallback<Array<GattService>>): void + +client端获取蓝牙低功耗设备的所有服务，即服务发现 。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| callback | AsyncCallback<Array<[GattService](#gattservice)>> | 是 | client进行服务发现，通过注册回调函数获取。 | + +**返回值：** + +无 + +**示例：** + +``` +// callkback 模式 +function getServices(code, gattServices) { + if (code.code == 0) { + let services = gattServices; + console.log('bluetooth code is ' + code.code); + console.log("bluetooth services size is ", services.length); + + for (let i = 0; i < services.length; i++) { + console.log('bluetooth serviceUuid is ' + services[i].serviceUuid); + } + } +} + +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.connect(); +device.getServices(getServices); +``` + + +### getServices + +getServices(): Promise<Array<GattService>> + +client端获取蓝牙低功耗设备的所有服务，即服务发现。 + +**参数：** + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| Promise<Array<[GattService](#gattservice)>> | client进行服务发现，通过promise形式获取。 | + +**示例：** + +``` +// Promise 模式 +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.connect(); +let services = device.getServices(); +console.log("bluetooth services size is ", services.length); + +for (let i = 0; i < services.length; i++) { + console.log('bluetooth serviceUuid is ' + services[i].serviceUuid); +} +``` + + +### readCharacteristicValue + +readCharacteristicValue(characteristic: BLECharacteristic, callback: AsyncCallback<BLECharacteristic>): void + +client端读取蓝牙低功耗设备特定服务的特征值。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| characteristic | [BLECharacteristic](#blecharacteristic) | 是 | 待读取的特征值。 | +| callback | AsyncCallback<[BLECharacteristic](#blecharacteristic)> | 是 | client读取特征值，通过注册回调函数获取。 | + +**返回值：** + +无 + +**示例：** + +``` +function readCcc(code, BLECharacteristic) { + if (code.code != 0) { + return; + } + console.log('bluetooth characteristic uuid: ' + BLECharacteristic.characteristicUuid); + let value = new Uint8Array(BLECharacteristic.characteristicValue); + console.log('bluetooth characteristic value: ' + value[0] +','+ value[1]+','+ value[2]+','+ value[3]); +} + +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let descriptors = []; +let bufferDesc = new ArrayBuffer(8); +let descV = new Uint8Array(bufferDesc); +descV[0] = 11; +let descriptor = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', +characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', +descriptorUuid: '00002903-0000-1000-8000-00805F9B34FB', descriptorValue: bufferDesc}; +descriptors[0] = descriptor; + +let bufferCCC = new ArrayBuffer(8); +let cccV = new Uint8Array(bufferCCC); +cccV[0] = 1; +let characteristic = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', +characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', +characteristicValue: bufferCCC, descriptors:descriptors}; + +device.readCharacteristicValue(characteristic, readCcc); +``` + + +### readCharacteristicValue + +readCharacteristicValue(characteristic: BLECharacteristic): Promise<BLECharacteristic> + +client端读取蓝牙低功耗设备特定服务的特征值。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| characteristic | [BLECharacteristic](#blecharacteristic) | 是 | 待读取的特征值。 | + +**返回值：** + +| | | +| -------- | -------- | +| 类型 | 说明 | +| Promise<[BLECharacteristic](#blecharacteristic)> | client读取特征值，通过promise形式获取。 | + +**示例：** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let descriptors = []; +let bufferDesc = new ArrayBuffer(8); +let descV = new Uint8Array(bufferDesc); +descV[0] = 11; +let descriptor = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', +characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', +descriptorUuid: '00002903-0000-1000-8000-00805F9B34FB', descriptorValue: bufferDesc}; +descriptors[0] = descriptor; + +let bufferCCC = new ArrayBuffer(8); +let cccV = new Uint8Array(bufferCCC); +cccV[0] = 1; +let characteristic = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', +characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', +characteristicValue: bufferCCC, descriptors:descriptors}; + +device.readCharacteristicValue(characteristic); +``` + + +### readDescriptorValue + +readDescriptorValue(descriptor: BLEDescriptor, callback: AsyncCallback<BLEDescriptor>): void + +client端读取蓝牙低功耗设备特定的特征包含的描述符。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| descriptor | [BLEDescriptor](#bledescriptor) | 是 | 待读取的描述符。 | +| callback | AsyncCallback<[BLECharacteristic](#blecharacteristic)> | 是 | client读取描述符，通过注册回调函数获取。 | + +**返回值：** + +无 + +**示例：** + +``` +function readDesc(code, BLEDescriptor) { + if (code.code != 0) { + return; + } + console.log('bluetooth descriptor uuid: ' + BLEDescriptor.descriptorUuid); + let value = new Uint8Array(BLEDescriptor.descriptorValue); + console.log('bluetooth descriptor value: ' + value[0] +','+ value[1]+','+ value[2]+','+ value[3]); +} + +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let bufferDesc = new ArrayBuffer(8); +let descV = new Uint8Array(bufferDesc); +descV[0] = 11; +let descriptor = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', + descriptorUuid: '00002903-0000-1000-8000-00805F9B34FB', descriptorValue: bufferDesc}; +device.readDescriptorValue(descriptor, readDesc); +``` + + +### readDescriptorValue + +readDescriptorValue(descriptor: BLEDescriptor): Promise<BLEDescriptor> + +client端读取蓝牙低功耗设备特定的特征包含的描述符。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| descriptor | [BLEDescriptor](#bledescriptor) | 是 | 待读取的描述符。 | + +**返回值：** + +| | | +| -------- | -------- | +| 类型 | 说明 | +| Promise<[BLEDescriptor](#bledescriptor)> | client读取描述符，通过promise形式获取。 | + +**示例：** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let bufferDesc = new ArrayBuffer(8); +let descV = new Uint8Array(bufferDesc); +descV[0] = 11; +let descriptor = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', + descriptorUuid: '00002903-0000-1000-8000-00805F9B34FB', descriptorValue: bufferDesc}; +device.readDescriptorValue(descriptor); +``` + + +### writeCharacteristicValue + +writeCharacteristicValue(characteristic: BLECharacteristic): boolean + +client端向低功耗蓝牙设备写入特定的特征值。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| characteristic | [BLECharacteristic](#blecharacteristic) | 是 | 蓝牙设备特征对应的二进制值及其它参数。 | + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| boolean | 写特征值操作成功返回true，操作失败返回false。 | + +**示例：** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let descriptors = []; +let bufferDesc = new ArrayBuffer(8); +let descV = new Uint8Array(bufferDesc); +descV[0] = 11; +let descriptor = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', + descriptorUuid: '00002903-0000-1000-8000-00805F9B34FB', descriptorValue: bufferDesc}; +descriptors[0] = descriptor; + +let bufferCCC = new ArrayBuffer(8); +let cccV = new Uint8Array(bufferCCC); +cccV[0] = 1; +let characteristic = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', + characteristicValue: bufferCCC, descriptors:descriptors}; +let retWriteCcc = device.writeCharacteristicValue(characteristic); +if (retWriteCcc) { + console.log('write characteristic successfully'); +} else { + console.log('write characteristic failed'); +} +``` + + +### writeDescriptorValue + +writeDescriptorValue(descriptor: BLEDescriptor): boolean + +client端向低功耗蓝牙设备特定的描述符写入二进制数据。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| descriptor | [BLEDescriptor](#bledescriptor) | 是 | 蓝牙设备描述符的二进制值及其它参数。 | + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| boolean | 写描述符操作成功返回true，操作失败返回false。 | + +**示例：** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +let bufferDesc = new ArrayBuffer(8); +let descV = new Uint8Array(bufferDesc); +descV[0] = 22; +let descriptor = {serviceUuid: '00001810-0000-1000-8000-00805F9B34FB', + characteristicUuid: '00001820-0000-1000-8000-00805F9B34FB', + descriptorUuid: '00002903-0000-1000-8000-00805F9B34FB', descriptorValue: bufferDesc}; +let retWriteDesc = device.writeDescriptorValue(descriptor); +if (retWriteDesc) { + console.log('bluetooth write descriptor successfully'); +} else { + console.log('bluetooth write descriptor failed'); +} +``` + + +### setBLEMtuSize + +setBLEMtuSize(mtu: number): boolean + +client协商远端蓝牙低功耗设备的最大传输单元（Maximum Transmission Unit, MTU），调用connect接口连接成功后才能使用。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| mtu | number | 是 | 设置范围为22~512字节。 | + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| boolean | MTU协商操作成功返回true，操作失败返回false。 | + +**示例：** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.setBLEMtuSize(128); +``` + + +### setNotifyCharacteristicChanged + +setNotifyCharacteristicChanged(characteristic: BLECharacteristic, enable: boolean): boolean + +向服务端发送设置通知此特征值请求。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| characteristic | [BLECharacteristic](#blecharacteristic) | 是 | 蓝牙低功耗特征。 | +| enable | boolean | 是 | 启用接收notify设置为true，否则设置为false。 | + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| boolean | 设置操作成功返回true，操作失败返回false。 | + +**示例：** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.setNotifyCharacteristicChanged(notifyCcc, false); +``` + + +### on('BLECharacteristicChange') + +on(type: "BLECharacteristicChange", callback: Callback<BLECharacteristic>): void + +订阅蓝牙低功耗设备的特征值变化事件。需要先调用setNotifyCharacteristicChanged接口才能接收server端的通知。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"BLECharacteristicChange"字符串，表示特征值变化事件。 | +| callback | Callback<[BLECharacteristic](#blecharacteristic)> | 是 | 表示蓝牙低功耗设备的特征值变化事件的回调函数。 | + +**返回值：** + +无 + +**示例：** + +``` +function CharacteristicChange(CharacteristicChangeReq) { + let serviceUuid = CharacteristicChangeReq.serviceUuid; + let characteristicUuid = CharacteristicChangeReq.characteristicUuid; + let value = new Uint8Array(CharacteristicChangeReq.characteristicValue); +} +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.on('BLECharacteristicChange', CharacteristicChange); +``` + + +### off('BLECharacteristicChange') + +off(type: "BLECharacteristicChange", callback?: Callback<BLECharacteristic>): void + +取消订阅蓝牙低功耗设备的特征值变化事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"BLECharacteristicChange"字符串，表示特征值变化事件。 | +| callback | Callback<[BLECharacteristic](#blecharacteristic)> | 否 | 表示取消订阅蓝牙低功耗设备的特征值变化事件。不填该参数则取消订阅该type对应的所有回调。 | + +**返回值：** + +无 + +**示例：** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.off('BLECharacteristicChange'); +``` + + +### on('BLEConnectionStateChange') + +on(type: "BLEConnectionStateChange", callback: Callback<BLEConnectChangedState>): void + +client端订阅蓝牙低功耗设备的连接状态变化事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"BLEConnectionStateChange"字符串，表示连接状态变化事件。 | +| callback | Callback<[BLEConnectChangedState](#bleconnectchangedstate)> | 是 | 表示连接状态，已连接或断开。 | + +**返回值：** + +无 + +**示例：** + +``` +function ConnectStateChanged(state) { + console.log('bluetooth connect state changed'); + let connectState = state.state; +} +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.on('BLEConnectionStateChange', ConnectStateChanged); +``` + + +### off('BLEConnectionStateChange') + +off(type: "BLEConnectionStateChange", callback?: Callback<BLEConnectChangedState>): void + +取消订阅蓝牙低功耗设备的连接状态变化事件。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 填写"BLEConnectionStateChange"字符串，表示连接状态变化事件。 | +| callback | Callback<[BLEConnectChangedState](#bleconnectchangedstate)> | 否 | 表示取消订阅蓝牙低功耗设备的连接状态变化事件。不填该参数则取消订阅该type对应的所有回调。 | + +**返回值：** + +无 + +**示例：** + +``` +let device = bluetooth.BLE.createGattClientDevice('8F:8F:8E:8E:6D:6D'); +device.off('BLEConnectionStateChange'); +``` + + +### getDeviceName + +getDeviceName(callback: AsyncCallback<string>): void + +client获取远端蓝牙低功耗设备名。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| callback | AsyncCallback<string> | 是 | client获取对端server设备名，通过注册回调函数获取。 | + +**返回值：** + +无 + +**示例：** + +``` +// callback +let gattClient = bluetooth.BLE.createGattClientDevice("8F:8F:8E:8E:6D:6D"); +let deviceName = gattClient.getDeviceName((err, data)=> { + console.info('device name err ' + JSON.stringify(err)); + console.info('device name' + JSON.stringify(data)); +}) +``` + + +### getDeviceName + +getDeviceName(): Promise<string> + +client获取远端蓝牙低功耗设备名。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| Promise<string> | client获取对端server设备名，通过promise形式获取。 | + +**示例：** + +``` +// promise +let gattClient = bluetooth.BLE.createGattClientDevice("8F:8F:8E:8E:6D:6D"); +let ret = device.connect(); +let deviceName = gattClient.getDeviceName().then((data) => { + console.info('device name' + JSON.stringify(data)); +}) +``` + + +### getRssiValue + +getRssiValue(callback: AsyncCallback<number>): void + +client获取远端蓝牙低功耗设备的信号强度 (Received Signal Strength Indication, RSSI)，调用[connect](#connect-boolean)接口连接成功后才能使用。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| callback | AsyncCallback<number> | 是 | 返回信号强度，单位 dBm，通过注册回调函数获取。 | + +**返回值：** + +无 + +**示例：** + +``` +// callback +let gattClient = bluetooth.BLE.createGattClientDevice("8F:8F:8E:8E:6D:6D"); +let ret = device.connect(); +let rssi = gattClient.getRssiValue((err, data)=> { + console.info('rssi err ' + JSON.stringify(err)); + console.info('rssi value' + JSON.stringify(data)); +}) +``` + + +### getRssiValue + +getRssiValue(): Promise<number> + +client获取远端蓝牙低功耗设备的信号强度 (Received Signal Strength Indication, RSSI)，调用[connect](#connect-boolean)接口连接成功后才能使用。 + +**返回值：** + +| 类型 | 说明 | +| -------- | -------- | +| Promise<number> | 返回信号强度，单位 dBm，通过promise形式获取。 | + +**示例：** + +``` +// promise +let gattClient = bluetooth.BLE.createGattClientDevice("8F:8F:8E:8E:6D:6D"); +let rssi = gattClient.getRssiValue().then((data) => { + console.info('rssi' + JSON.stringify(data)); +}) +``` + + +## ScanMode + +枚举，扫描模式。 + +| 名称 | 默认值 | 说明 | +| -------- | -------- | -------- | +| SCAN_MODE_NONE | 0 | 没有扫描模式。 | +| SCAN_MODE_CONNECTABLE | 1 | 可连接扫描模式。 | +| SCAN_MODE_GENERAL_DISCOVERABLE | 2 | general发现模式。 | +| SCAN_MODE_LIMITED_DISCOVERABLE | 3 | limited发现模式。 | +| SCAN_MODE_CONNECTABLE_GENERAL_DISCOVERABLE | 4 | 可连接general发现模式。 | +| SCAN_MODE_CONNECTABLE_LIMITED_DISCOVERABLE | 5 | 可连接limited发现模式。 | + + +## BondState + +枚举，配对状态。 + +| 名称 | 默认值 | 说明 | +| -------- | -------- | -------- | +| BOND_STATE_INVALID | 0 | 无效的配对。 | +| BOND_STATE_BONDING | 1 | 正在配对。 | +| BOND_STATE_BONDED | 2 | 已配对。 | + + +## SppOption + +描述spp的配置参数。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| uuid | string | 是 | 是 | spp单据的uuid。 | +| isPrimary | boolean | 是 | 是 | 是否是安全通道。 | +| type | [ERROR:Invalid link:zh-cn_topic_0000001193344974.xml#xref2575mcpsimp,link:#SppType](#SppType) | 是 | 是 | Spp链路类型。 | + + +## SppType + +枚举，Spp链路类型。 + +| 名称 | 默认值 | 说明 | +| -------- | -------- | -------- | +| SPP_RFCOMM | 0 | 表示rfcomm链路类型。 | + + +## GattService + +描述service的接口参数定义。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| serviceUuid | string | 是 | 是 | 特定服务（service）的UUID，例如：00001888-0000-1000-8000-00805f9b34fb。 | +| isPrimary | boolean | 是 | 是 | 如果是主服务设置为true，否则设置为false。 | +| characteristics | Array<[ERROR:Invalid link:zh-cn_topic_0000001193344974.xml#xref2628mcpsimp,link:#BLECharacteristic](#BLECharacteristic)> | 是 | 是 | 当前服务包含的特征列表。 | +| includeServices | Array<[ERROR:Invalid link:zh-cn_topic_0000001193344974.xml#xref2635mcpsimp,link:#GattService](#GattService)> | 是 | 是 | 当前服务依赖的其它服务。 | + + +## BLECharacteristic + +描述characteristic的接口参数定义 。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| serviceUuid | string | 是 | 是 | 特定服务（service）的UUID，例如：00001888-0000-1000-8000-00805f9b34fb。 | +| characteristicUuid | string | 是 | 是 | 特定特征（characteristic）的UUID，例如：00002a11-0000-1000-8000-00805f9b34fb。 | +| characteristicValue | ArrayBuffer | 是 | 是 | 特征对应的二进制值。 | +| descriptors | Array<[ERROR:Invalid link:zh-cn_topic_0000001193344974.xml#xref2677mcpsimp,link:#BLEDescriptor](#BLEDescriptor)> | 是 | 是 | 特定特征的描述符列表。 | + + +## BLEDescriptor + +描述descriptor的接口参数定义 。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| serviceUuid | string | 是 | 是 | 特定服务（service）的UUID，例如：00001888-0000-1000-8000-00805f9b34fb。 | +| characteristicUuid | string | 是 | 是 | 特定特征（characteristic）的UUID，例如：00002a11-0000-1000-8000-00805f9b34fb。 | +| descriptorUuid | string | 是 | 是 | 描述符（descriptor）的UUID，例如：00002902-0000-1000-8000-00805f9b34fb。 | +| descriptorValue | ArrayBuffer | 是 | 是 | 描述符对应的二进制值。 | + + +## NotifyCharacteristic + +描述server端特征值变化时发送的特征通知参数定义。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| serviceUuid | string | 是 | 是 | 特定服务（service）的UUID，例如：00001888-0000-1000-8000-00805f9b34fb。 | +| characteristicUuid | string | 是 | 是 | 特定特征（characteristic）的UUID，例如：00002a11-0000-1000-8000-00805f9b34fb。 | +| characteristicValue | ArrayBuffer | 是 | 是 | 特征对应的二进制值。 | +| confirm | boolean | 是 | 是 | 如果是notification则对端回复确认设置为true，如果是indication则对端不需要回复确认设置为false。 | + + +## CharacteristicReadReq + +描述server端订阅后收到的特征值读请求事件参数结构。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | 是 | 否 | 表示发送特征值读请求的远端设备地址，例如："8F:8F:8E:8E:6D:6D"。 | +| transId | number | 是 | 否 | 表示读请求的传输ID，server端回复响应时需填写相同的传输ID。 | +| offset | number | 是 | 否 | 表示读特征值数据的起始位置。例如：k表示从第k个字节开始读，server端回复响应时需填写相同的offset。 | +| characteristicUuid | string | 是 | 否 | 特定特征（characteristic）的UUID，例如：00002a11-0000-1000-8000-00805f9b34fb。 | +| serviceUuid | string | 是 | 否 | 特定服务（service）的UUID，例如：00001888-0000-1000-8000-00805f9b34fb。 | + + +## CharacteristicWriteReq + +描述server端订阅后收到的特征值写请求事件参数结构。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | 是 | 否 | 表示发送特征值写请求的远端设备地址，例如："8F:8F:8E:8E:6D:6D"。 | +| transId | number | 是 | 否 | 表示写请求的传输ID，server端回复响应时需填写相同的传输ID。 | +| offset | number | 是 | 否 | 表示写特征值数据的起始位置。例如：k表示从第k个字节开始写，server端回复响应时需填写相同的offset。 | +| descriptorUuid | string | 是 | 否 | 表示描述符（descriptor）的UUID，例如：00002902-0000-1000-8000-00805f9b34fb。 | +| characteristicUuid | string | 是 | 否 | 特定特征（characteristic）的UUID，例如：00002a11-0000-1000-8000-00805f9b34fb。 | +| serviceUuid | string | 是 | 否 | 特定服务（service）的UUID，例如：00001888-0000-1000-8000-00805f9b34fb。 | + + +## DescriptorReadReq + +描述server端订阅后收到的描述符读请求事件参数结构。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | 是 | 否 | 表示发送描述符读请求的远端设备地址，例如："8F:8F:8E:8E:6D:6D"。 | +| transId | number | 是 | 否 | 表示读请求的传输ID，server端回复响应时需填写相同的传输ID。 | +| offset | number | 是 | 否 | 表示读描述符数据的起始位置。例如：k表示从第k个字节开始读，server端回复响应时需填写相同的offset。 | +| descriptorUuid | string | 是 | 否 | 表示描述符（descriptor）的UUID，例如：00002902-0000-1000-8000-00805f9b34fb。 | +| characteristicUuid | string | 是 | 否 | 特定特征（characteristic）的UUID，例如：00002a11-0000-1000-8000-00805f9b34fb。 | +| serviceUuid | string | 是 | 否 | 特定服务（service）的UUID，例如：00001888-0000-1000-8000-00805f9b34fb。 | + + +## DescriptorWriteReq + +描述server端订阅后收到的描述符写请求事件参数结构。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | 是 | 否 | 表示发送描述符写请求的远端设备地址，例如："8F:8F:8E:8E:6D:6D"。 | +| transId | number | 是 | 否 | 表示写请求的传输ID，server端回复响应时需填写相同的传输ID。 | +| offset | number | 是 | 否 | 表示写描述符数据的起始位置。例如：k表示从第k个字节开始写，server端回复响应时需填写相同的offset。 | +| isPrep | boolean | 是 | 否 | 表示写请求是否立即执行。 | +| needRsp | boolean | 是 | 否 | 表示是否要给client端回复响应。 | +| value | ArrayBuffer | 是 | 否 | 表示写入的描述符二进制数据。 | +| descriptorUuid | string | 是 | 否 | 表示描述符（descriptor）的UUID，例如：00002902-0000-1000-8000-00805f9b34fb。 | +| characteristicUuid | string | 是 | 否 | 特定特征（characteristic）的UUID，例如：00002a11-0000-1000-8000-00805f9b34fb。 | +| serviceUuid | string | 是 | 否 | 特定服务（service）的UUID，例如：00001888-0000-1000-8000-00805f9b34fb。 | + + +## ServerResponse + +描述server端回复client端读/写请求的响应参数结构。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | 是 | 否 | 表示远端设备地址，例如："8F:8F:8E:8E:6D:6D"。 | +| transId | number | 是 | 否 | 表示请求的传输ID，与订阅的读/写请求事件携带的ID保持一致。 | +| status | number | 是 | 否 | 表示响应的状态，设置为0即可，表示正常。 | +| offset | number | 是 | 否 | 表示请求的读/写起始位置，与订阅的读/写请求事件携带的offset保持一致。 | +| value | ArrayBuffer | 是 | 否 | 表示回复响应的二进制数据。 | + + +## BLEConnectChangedState + +描述Gatt profile连接状态 。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | 是 | 否 | 表示远端设备地址，例如："8F:8F:8E:8E:6D:6D"。 | +| state | [ERROR:Invalid link:zh-cn_topic_0000001193344974.xml#xref3060mcpsimp,link:#ProfileConnectionState](#ProfileConnectionState) | 是 | 是 | 表示BLE连接状态的枚举。 | + + +## ProfileConnectionState + +枚举，蓝牙设备的profile连接状态。 + +| 名称 | 默认值 | 说明 | +| -------- | -------- | -------- | +| STATE_DISCONNECTED | 0 | 表示profile已断连。 | +| STATE_CONNECTING | 1 | 表示profile正在连接。 | +| STATE_CONNECTED | 2 | 表示profile已连接。 | +| STATE_DISCONNECTING | 3 | 表示profile正在断连。 | + + +## ScanFilter + +扫描过滤参数。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | 是 | 是 | 表示过滤的BLE设备地址，例如："8F:8F:8E:8E:6D:6D"。 | +| name | string | 是 | 是 | 表示过滤的BLE设备名。 | +| serviceUuid | string | 是 | 是 | 表示过滤包含该UUID服务的设备，例如：00001888-0000-1000-8000-00805f9b34fb。 | + + +## ScanOptions + +扫描的配置参数。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| interval | number | 是 | 是 | 表示扫描结果上报延迟时间，默认值为0。 | +| dutyMode | [ERROR:Invalid link:zh-cn_topic_0000001193344974.xml#xref3154mcpsimp,link:#ScanDuty](#ScanDuty) | 是 | 是 | 表示扫描模式，默认值为SCAN_MODE_LOW_POWER。 | +| matchMode | [ERROR:Invalid link:zh-cn_topic_0000001193344974.xml#xref3161mcpsimp,link:#MatchMode](#MatchMode) | 是 | 是 | 表示硬件的过滤匹配模式，默认值为MATCH_MODE_AGGRESSIVE。 | + + +## ScanDuty + +枚举，扫描模式。 + +| 名称 | 默认值 | 说明 | +| -------- | -------- | -------- | +| SCAN_MODE_LOW_POWER | 0 | 表示低功耗模式，默认值。 | +| SCAN_MODE_BALANCED | 1 | 表示均衡模式。 | +| SCAN_MODE_LOW_LATENCY | 2 | 表示低延迟模式。 | + + +## MatchMode + +枚举，硬件过滤匹配模式。 + +| 名称 | 默认值 | 说明 | +| -------- | -------- | -------- | +| MATCH_MODE_AGGRESSIVE | 1 | 表示硬件上报扫描结果门限较低，比如扫描到的功率较低或者一段时间扫描到的次数较少也触发上报，默认值。 | +| SCAN_MODE_LOW_LATENCY | 2 | 表示硬件上报扫描结果门限较高，更高的功率门限以及扫描到多次才会上报。 | + + +## ScanResult + +扫描结果上报数据。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | 是 | 否 | 表示扫描到的设备地址，例如："8F:8F:8E:8E:6D:6D"。 | +| rssi | number | 是 | 否 | 表示扫描到的设备的rssi值。 | +| data | ArrayBuffer | 是 | 否 | 表示扫描到的设备发送的广播包。 | + + +## BluetoothState + +枚举，蓝牙开关状态。 + +| 名称 | 默认值 | 说明 | +| -------- | -------- | -------- | +| STATE_OFF | 0 | 表示蓝牙已关闭。 | +| STATE_TURNING_ON | 1 | 表示蓝牙正在打开。 | +| STATE_ON | 2 | 表示蓝牙已打开。 | +| STATE_TURNING_OFF | 3 | 表示蓝牙正在关闭。 | +| STATE_BLE_TURNING_ON | 4 | 表示蓝牙正在打开LE-only模式。 | +| STATE_BLE_ON | 5 | 表示蓝牙正处于LE-only模式。 | +| STATE_BLE_TURNING_OFF | 6 | 表示蓝牙正在关闭LE-only模式。 | + + +## AdvertiseSetting + +描述蓝牙低功耗设备发送广播的参数。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| interval | number | 是 | 是 | 表示广播间隔，最小值设置32个slot表示20ms，最大值设置16777215个slot，默认值设置为1600个slot表示1s。 | +| txPower | number | 是 | 是 | 表示发送功率，最小值设置-127，最大值设置1，默认值设置-7，单位dbm。 | +| connectable | boolean | 是 | 是 | 表示是否是可连接广播，默认值设置为true。 | + + +## AdvertiseData + +描述BLE广播数据包的内容。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| serviceUuids | Array<string> | 是 | 是 | 表示要广播的服务 UUID 列表。 | +| manufactureData | Array<[ERROR:Invalid link:zh-cn_topic_0000001193344974.xml#xref3348mcpsimp,link:#ManufactureData](#ManufactureData)> | 是 | 是 | 表示要广播的广播的制造商信息列表。 | +| serviceData | Array<[ERROR:Invalid link:zh-cn_topic_0000001193344974.xml#xref3355mcpsimp,link:#ServiceData](#ServiceData)> | 是 | 是 | 表示要广播的服务数据列表。 | + + +## ManufactureData + +描述BLE广播数据包的内容。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| manufactureId | Array<string> | 是 | 是 | 表示制造商的ID，由蓝牙SIG分配。 | +| manufactureValue | ArrayBuffer | 是 | 是 | 表示制造商发送的制造商数据。 | + + +## ServiceData + +描述广播包中服务数据内容。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| serviceUuid | string | 是 | 是 | 表示服务的UUID。 | +| serviceValue | ArrayBuffer | 是 | 是 | 表示服务数据。 | + + +## PinRequiredParam + +描述配对请求参数。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| deviceId | string | 是 | 否 | 表示要配对的设备ID。 | +| pinCode | string | 是 | 否 | 表示要配对的密钥。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index ef5825ceb1eedf1962c146f5eaeaff37a2f314b1..64ccb8f1167d0577388bcbd9d6f7fa95ebd178bb 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -1,133 +1,133 @@ -# 基于TS扩展的声明式开发范式 - -- [组件](ts-components.md) - - [通用](ts-universal-components.md) - - [通用事件](ts-universal-events.md) - - [点击事件](ts-universal-events-click.md) - - [触摸事件](ts-universal-events-touch.md) - - [挂载卸载事件](ts-universal-events-show-hide.md) - - [按键事件](ts-universal-events-key.md) - - [组件区域变化事件](ts-universal-events-component-area-change.md) - - - [通用属性](ts-universal-attributes.md) - - [尺寸设置](ts-universal-attributes-size.md) - - [位置设置](ts-universal-attributes-location.md) - - [布局约束](ts-universal-attributes-layout-constraints.md) - - [Flex布局](ts-universal-attributes-flex-layout.md) - - [边框设置](ts-universal-attributes-border.md) - - [背景设置](ts-universal-attributes-background.md) - - [透明度设置](ts-universal-attributes-opacity.md) - - [显隐控制](ts-universal-attributes-visibility.md) - - [禁用控制](ts-universal-attributes-enable.md) - - [浮层](ts-universal-attributes-overlay.md) - - [Z序控制](ts-universal-attributes-z-order.md) - - [图形变换](ts-universal-attributes-transformation.md) - - [图像效果](ts-universal-attributes-image-effect.md) - - [形状裁剪](ts-universal-attributes-sharp-clipping.md) - - [文本样式设置](ts-universal-attributes-text-style.md) - - [栅格设置](ts-universal-attributes-grid.md) - - [颜色渐变](ts-universal-attributes-gradient-color.md) - - [Popup控制](ts-universal-attributes-popup.md) - - [Menu控制](ts-universal-attributes-menu.md) - - [点击控制](ts-universal-attributes-touchable.md) - - [触摸热区设置](ts-universal-attributes-response-region.md) - - - [手势处理](ts-gesture-processing.md) - - [绑定手势方法](ts-gesture-settings.md) - - [基础手势](ts-basic-gestures.md) - - [TapGesture](ts-basic-gestures-tapgesture.md) - - [LongPressGesture](ts-basic-gestures-longpressgesture.md) - - [PanGesture](ts-basic-gestures-pangesture.md) - - [PinchGesture](ts-basic-gestures-pinchgesture.md) - - [RotationGesture](ts-basic-gestures-rotationgesture.md) - - [SwipeGesture](ts-basic-gestures-swipegesture.md) - - - [组合手势](ts-combined-gestures.md) - - - [基础组件](ts-basic-components.md) - - [Blank](ts-basic-components-blank.md) - - [Button](ts-basic-components-button.md) - - [DataPanel](ts-basic-components-datapanel.md) - - [Divider](ts-basic-components-divider.md) - - [Gauge](ts-basic-components-gauge.md) - - [Image](ts-basic-components-image.md) - - [ImageAnimator](ts-basic-components-imageanimator.md) - - [Marquee](ts-basic-components-marquee.md) - - [Progress](ts-basic-components-progress.md) - - [QRCode](ts-basic-components-qrcode.md) - - [Rating](ts-basic-components-rating.md) - - [Span](ts-basic-components-span.md) - - [Slider](ts-basic-components-slider.md) - - [Text](ts-basic-components-text.md) - - [TextArea](ts-basic-components-textarea.md) - - [TextInput](ts-basic-components-textinput.md) - - [Toggle](ts-basic-components-toggle.md) - - - [容器组件](ts-components-container.md) - - [AlphabetIndexer](ts-container-alphabet-indexer.md) - - [Badge](ts-container-badge.md) - - [Column](ts-container-column.md) - - [ColumnSplit](ts-container-columnsplit.md) - - [Counter](ts-container-counter.md) - - [Flex](ts-container-flex.md) - - [GridContainer](ts-container-gridcontainer.md) - - [Grid](ts-container-grid.md) - - [GridItem](ts-container-griditem.md) - - [List](ts-container-list.md) - - [ListItem](ts-container-listitem.md) - - [Navigator](ts-container-navigator.md) - - [Navigation](ts-container-navigation.md) - - [Panel](ts-container-panel.md) - - [Row](ts-container-row.md) - - [RowSplit](ts-container-rowsplit.md) - - [Scroll](ts-container-scroll.md) - - [ScrollBar](ts-container-scrollbar.md) - - [Stack](ts-container-stack.md) - - [Swiper](ts-container-swiper.md) - - [Tabs](ts-container-tabs.md) - - [TabContent](ts-container-tabcontent.md) - - [Stepper](ts-container-stepper.md) - - [StepperItem](ts-container-stepperitem.md) - - - [绘制组件](ts-drawing-components.md) - - [Circle](ts-drawing-components-circle.md) - - [Ellipse](ts-drawing-components-ellipse.md) - - [Line](ts-drawing-components-line.md) - - [Polyline](ts-drawing-components-polyline.md) - - [Polygon](ts-drawing-components-polygon.md) - - [Path](ts-drawing-components-path.md) - - [Rect](ts-drawing-components-rect.md) - - [Shape](ts-drawing-components-shape.md) - - - [画布组件](ts-components-canvas.md) - - [Canvas](ts-components-canvas-canvas.md) - - [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md) - - [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md) - - [Lottie](ts-components-canvas-lottie.md) - - [Path2D对象](ts-components-canvas-path2d.md) - - [CanvasGradient对象](ts-components-canvas-canvasgradient.md) - - [ImageBitmap对象](ts-components-canvas-imagebitmap.md) - - [ImageData对象](ts-components-canvas-imagedata.md) - -- [动画](ts-animation.md) - - [属性动画](ts-animatorproperty.md) - - [显式动画](ts-explicit-animation.md) - - [转场动画](ts-transition-animation.md) - - [页面间转场](ts-page-transition-animation.md) - - [组件内转场](ts-transition-animation-component.md) - - [共享元素转场](ts-transition-animation-shared-elements.md) - - - [路径动画](ts-motion-path-animation.md) - - [矩阵变换](ts-matrix-transformation.md) - - [插值计算](ts-interpolation-calculation.md) - -- [全局UI方法](ts-global-ui-methods.md) - - [警告弹窗](ts-methods-alert-dialog-box.md) - - [自定义弹窗](ts-methods-custom-dialog-box.md) - - [图片缓存](ts-methods-image-cache.md) - - [媒体查询](ts-methods-media-query.md) - - [列表选择弹窗](ts-methods-custom-actionsheet.md) - -- [附录](ts-appendix.md) - - [文档中涉及到的内置枚举值](ts-appendix-enums.md) +# reference/arkui-ts +- 组件 + - 通用 + - 通用事件 + - [点击事件](ts-universal-events-click.md) + - [触摸事件](ts-universal-events-touch.md) + - [挂载卸载事件](ts-universal-events-show-hide.md) + - [拖拽事件](ts-universal-events-drag-drop.md) + - [按键事件](ts-universal-events-key.md) + - [焦点事件](ts-universal-focus-event.md) + - [鼠标事件](ts-universal-mouse-key.md) + - [组件区域变化事件](ts-universal-component-area-change-event.md) + - 通用属性 + - [尺寸设置](ts-universal-attributes-size.md) + - [位置设置](ts-universal-attributes-location.md) + - [布局约束](ts-universal-attributes-layout-constraints.md) + - [Flex布局](ts-universal-attributes-flex-layout.md) + - [边框设置](ts-universal-attributes-border.md) + - [背景设置](ts-universal-attributes-background.md) + - [透明度设置](ts-universal-attributes-opacity.md) + - [显隐控制](ts-universal-attributes-visibility.md) + - [禁用控制](ts-universal-attributes-enable.md) + - [浮层](ts-universal-attributes-overlay.md) + - [Z序控制](ts-universal-attributes-z-order.md) + - [图形变换](ts-universal-attributes-transformation.md) + - [图像效果](ts-universal-attributes-image-effect.md) + - [形状裁剪](ts-universal-attributes-sharp-clipping.md) + - [文本样式设置](ts-universal-attributes-text-style.md) + - [栅格设置](ts-universal-attributes-grid.md) + - [颜色渐变](ts-universal-attributes-gradient-color.md) + - [Popup控制](ts-universal-attributes-popup.md) + - [Menu控制](ts-universal-attributes-menu.md) + - [点击控制](ts-universal-attributes-click.md) + - [焦点控制](ts-universal-attributes-focus.md) + - [悬浮态效果](ts-universal-attributes-hover-effect.md) + - [组件标识](ts-universal-attributes-component-id.md) + - [触摸热区设置](ts-universal-attributes-touch-target.md) + - [多态样式](ts-universal-attributes-polymorphic-style.md) + - 手势处理 + - [绑定手势方法](ts-gesture-settings.md) + - 基础手势 + - [TapGesture](ts-basic-gestures-tapgesture.md) + - [LongPressGesture](ts-basic-gestures-longpressgesture.md) + - [PanGesture](ts-basic-gestures-pangesture.md) + - [PinchGesture](ts-basic-gestures-pinchgesture.md) + - [RotationGesture](ts-basic-gestures-rotationgesture.md) + - [SwipeGesture](ts-basic-gestures-swipegesture.md) + - [组合手势](ts-combined-gestures.md) + - 基础组件 + - [Blank](ts-basic-components-blank.md) + - [Button](ts-basic-components-button.md) + - [DataPanel](ts-basic-components-datapanel.md) + - [DatePicker](ts-basic-components-datepicker.md) + - [Divider](ts-basic-components-divider.md) + - [Image](ts-basic-components-image.md) + - [ImageAnimator](ts-basic-components-imageanimator.md) + - [Progress](ts-basic-components-progress.md) + - [QRCode](ts-basic-components-qrcode.md) + - [Rating](ts-basic-components-rating.md) + - [Span](ts-basic-components-span.md) + - [Slider](ts-basic-components-slider.md) + - [Text](ts-basic-components-text.md) + - [TextArea](ts-basic-components-textarea.md) + - [TextInput](ts-basic-components-textinput.md) + - [TextPicker](ts-basic-components-textpicker.md) + - [TextTimer](ts-basic-components-texttimer.md) + - [Toggle](ts-basic-components-toggle.md) + - [Select](ts-basic-components-select.md) + - [TextClock](ts-basic-components-textClock.md) + - 容器组件 + - [AlphabetIndexer](ts-container-alphabet-indexer.md) + - [Badge](ts-container-badge.md) + - [Column](ts-container-column.md) + - [ColumnSplit](ts-container-columnsplit.md) + - [Counter](ts-container-counter.md) + - [Flex](ts-container-flex.md) + - [GridContainer](ts-container-gridcontainer.md) + - [Grid](ts-container-grid.md) + - [GridItem](ts-container-griditem.md) + - [List](ts-container-list.md) + - [ListItem](ts-container-listitem.md) + - [Navigator](ts-container-navigator.md) + - [Navigation](ts-basic-components-navigation.md) + - [Panel](ts-container-panel.md) + - [Row](ts-container-row.md) + - [RowSplit](ts-container-rowsplit.md) + - [Scroll](ts-container-scroll.md) + - [ScrollBar](ts-basic-components-scrollbar.md) + - [Stack](ts-container-stack.md) + - [Swiper](ts-container-swiper.md) + - [Tabs](ts-container-tabs.md) + - [TabContent](ts-container-tabcontent.md) + - 媒体组件 + - [Video](ts-media-components-video.md) + - [Web](ts-media-components-web.md) + - 绘制组件 + - [Circle](ts-drawing-components-circle.md) + - [Ellipse](ts-drawing-components-ellipse.md) + - [Line](ts-drawing-components-line.md) + - [Polyline](ts-drawing-components-polyline.md) + - [Polygon](ts-drawing-components-polygon.md) + - [Path](ts-drawing-components-path.md) + - [Rect](ts-drawing-components-rect.md) + - [Shape](ts-drawing-components-shape.md) + - 画布组件 + - [Canvas](ts-components-canvas-canvas.md) + - [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md) + - [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md) + - [Lottie](ts-components-canvas-lottie.md) + - [Path2D对象](ts-components-canvas-path2d.md) + - [CanvasGradient对象](ts-components-canvas-canvasgradient.md) + - [ImageBitmap对象](ts-components-canvas-imagebitmap.md) + - [ImageData对象](ts-components-canvas-imagedata.md) +- 动画 + - [属性动画](ts-animatorproperty.md) + - [显式动画](ts-explicit-animation.md) + - 转场动画 + - [页面间转场](ts-page-transition-animation.md) + - [组件内转场](ts-transition-animation-component.md) + - [共享元素转场](ts-transition-animation-shared-elements.md) + - [路径动画](ts-motion-path-animation.md) + - [矩阵变换](ts-matrix-transformation.md) + - [插值计算](ts-interpolation-calculation.md) +- 全局UI方法 + - [图片缓存](ts-methods-image-cache.md) + - [媒体查询](ts-methods-media-query.md) + - 弹窗 + - [警告弹窗](ts-methods-alert-dialog-box.md) + - [列表选择弹窗](ts-methods-action-sheet.md) + - [自定义弹窗](ts-methods-custom-dialog-box.md) +- 附录 + - [文档中涉及到的内置枚举值](ts-appendix-enums.md) diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GIF-1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/GIF-1.gif deleted file mode 100644 index 52fed39eeae057043dbd00abce9ff29d2c35a56a..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/GIF-1.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Image1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/Image1.gif deleted file mode 100644 index 21391680f6080b39cced050c88087a0d241952d9..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/Image1.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/divider.png b/zh-cn/application-dev/reference/arkui-ts/figures/divider.png deleted file mode 100644 index 857e773f72d0cd7cd9ae13f50aa843a11aae4f97..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/divider.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/gauge.png b/zh-cn/application-dev/reference/arkui-ts/figures/gauge.png deleted file mode 100644 index 2eb96b00f11e597fcc3e3d5ef32701e0a4ef5f5b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/gauge.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/progress.png b/zh-cn/application-dev/reference/arkui-ts/figures/progress.png deleted file mode 100644 index 0ff7595bc619e62c05376cd7b57a473dde3e9386..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/progress.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/stepper.gif b/zh-cn/application-dev/reference/arkui-ts/figures/stepper.gif deleted file mode 100644 index 6b44b6a2adc2528e13e95bc10d2a67874226a63b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/stepper.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GestureGroup.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104384.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/GestureGroup.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104384.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/scroll.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104386.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/scroll.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104386.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Blank2.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104388.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Blank2.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104388.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/visibility.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104390.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/visibility.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104390.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/position2.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104392.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/position2.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104392.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/ellipse.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104394.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/ellipse.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104394.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/AnimateTo.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104398.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/AnimateTo.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104398.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/motion.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104400.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/motion.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104400.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/toggle.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104402.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/toggle.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104402.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/5.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104410.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/5.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104410.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/AttrAnimation.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264358.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/AttrAnimation.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264358.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Tabs.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264360.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Tabs.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264360.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/KeyEvent.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264364.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/KeyEvent.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264364.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/flex02.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264366.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/flex02.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264366.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/position.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264368.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/position.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264368.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/clip.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264370.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/clip.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264370.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/RotationGesture.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264372.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/RotationGesture.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264372.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/PanGesture.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264374.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/PanGesture.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264374.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/list.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264378.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/list.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264378.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/LongPressGesture.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264380.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/LongPressGesture.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264380.gif diff --git "a/zh-cn/application-dev/reference/arkui-ts/figures/\346\250\252\345\261\217\346\230\276\347\244\272.gif" b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264382.gif similarity index 100% rename from "zh-cn/application-dev/reference/arkui-ts/figures/\346\250\252\345\261\217\346\230\276\347\244\272.gif" rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264382.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/size.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264384.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/size.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264384.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/rect.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264386.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/rect.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264386.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Panel.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422896.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Panel.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422896.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/1.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422898.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/1.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422898.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/TapGesture.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422900.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/TapGesture.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422900.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/PageTransition1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422902.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/PageTransition1.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422902.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Flex04.jpg b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422904.jpg similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Flex04.jpg rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422904.jpg diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Flex05.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422906.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Flex05.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422906.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Text2.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422918.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Text2.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422918.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/MediaQuery.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422920.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/MediaQuery.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422920.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/alphabetindexer.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422922.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/alphabetindexer.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422922.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422926.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422926.png new file mode 100644 index 0000000000000000000000000000000000000000..f2deeb8445fe0f3b66d2b0facbf9e0f0ed9911ca Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422926.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/AlertDialog.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582844.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/AlertDialog.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582844.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/q1.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582846.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/q1.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582846.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/PinchGesture.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582848.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/PinchGesture.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582848.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Transition.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582850.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Transition.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582850.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Flex03.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582854.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Flex03.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582854.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/polygon.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582856.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/polygon.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582856.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zIndex.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582860.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zIndex.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582860.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/menu.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582862.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/menu.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582862.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/griditem.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582870.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/griditem.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582870.gif diff --git "a/zh-cn/application-dev/reference/arkui-ts/figures/\350\256\276\345\244\207\345\256\275\345\272\246\344\270\272SM.png" b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582872.png similarity index 100% rename from "zh-cn/application-dev/reference/arkui-ts/figures/\350\256\276\345\244\207\345\256\275\345\272\246\344\270\272SM.png" rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582872.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/slider.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001179613854.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/slider.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001179613854.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GIF1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001184400598.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/GIF1.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001184400598.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/2-01.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001184628104.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/2-01.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001184628104.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075122.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001186585726.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075122.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001186585726.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GIF.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001186807708.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/GIF.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001186807708.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/popup.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001187055946.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/popup.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001187055946.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001188742468.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001188742468.gif new file mode 100644 index 0000000000000000000000000000000000000000..18bc8e9fbfba12c94b617b372b9c85d92c00088a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001188742468.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GIF2.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001189624550.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/GIF2.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001189624550.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GIF4.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001189634870.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/GIF4.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001189634870.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595194.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595194.png deleted file mode 100644 index 348499bc3787a833ab3da5f87500b11c9c93773e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595194.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/duande.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192655288.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/duande.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192655288.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915178.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915178.gif deleted file mode 100644 index b1808e80a0e4d055d54b886ecca3ddc8efa64b9a..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915178.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GIF-4.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193657126.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/GIF-4.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193657126.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193322850.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872400.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193322850.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872400.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075180.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872402.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075180.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872402.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193322910.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872404.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193322910.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872404.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238556395.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872410.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238556395.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872410.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555167.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872420.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555167.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872420.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715159.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872422.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715159.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872422.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075164.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872488.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075164.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872488.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075168.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872490.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075168.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872490.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075172.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872492.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075172.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872492.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193641084.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872494.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193641084.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872494.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755178.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872498.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755178.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872498.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555173.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872516.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555173.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872516.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193322872.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872518.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193322872.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872518.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355121.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872520.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355121.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872520.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555163.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872522.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555163.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872522.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238521019.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872524.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238521019.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872524.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238521021.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872526.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238521021.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872526.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/unnaming-(4).png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872542.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/unnaming-(4).png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872542.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755174.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872544.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755174.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872544.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755194.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032360.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755194.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032360.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715165.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032362.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715165.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032362.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193737314.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032364.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193737314.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032364.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595228.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032368.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595228.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032368.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193481096.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032378.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193481096.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032378.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193481098.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032380.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193481098.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032380.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193802788.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032454.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193802788.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032454.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193802836.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032456.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193802836.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032456.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555165.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032458.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555165.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032458.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238401029.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032460.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238401029.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032460.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595238.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032462.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595238.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032462.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915130.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032466.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915130.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032466.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193482814.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032476.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193482814.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032476.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193482866.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032478.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193482866.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032478.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238476361.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032480.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238476361.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032480.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915184.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032482.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915184.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032482.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193641086.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032484.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193641086.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032484.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475113.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032502.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475113.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032502.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915162.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032516.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915162.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032516.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075178.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192346.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075178.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192346.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238522783.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192348.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238522783.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192348.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193756416.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192354.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193756416.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192354.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715153.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192356.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715153.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192356.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355133.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192366.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355133.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192366.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755188.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192368.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755188.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192368.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238402745.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192432.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238402745.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192432.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238402777.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192434.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238402777.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192434.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475123.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192436.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475123.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192436.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193481094.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192438.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193481094.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192438.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355131.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192440.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355131.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192440.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475137.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192446.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475137.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192446.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595232.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192454.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595232.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192454.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193642848.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192456.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193642848.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192456.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/11111-5.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192458.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/11111-5.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192458.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595224.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192460.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595224.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192460.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075166.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192462.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075166.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192462.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075134.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192464.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075134.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192464.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595214.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192488.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595214.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192488.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352336.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352336.png new file mode 100644 index 0000000000000000000000000000000000000000..45be809bdb14e8badfaac2dc8e2486864d29f763 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352336.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352338.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352338.png new file mode 100644 index 0000000000000000000000000000000000000000..5eecca641660f12e3ad2ba7b97b97eca253a4acf Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352338.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352352.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352352.png new file mode 100644 index 0000000000000000000000000000000000000000..5d649492978121a484c2a7a55d4548384c919149 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352352.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352354.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352354.png new file mode 100644 index 0000000000000000000000000000000000000000..563ce2878d24a7fa46044f201433d759c3fa9001 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352354.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352364.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352364.png new file mode 100644 index 0000000000000000000000000000000000000000..801bf97495213f41c2b196b2f170af85b156dd5b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352364.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355135.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352432.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355135.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352432.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555181.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352434.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555181.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352434.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755180.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352436.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755180.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352436.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715151.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352438.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715151.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352438.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715155.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352440.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715155.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352440.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915154.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352442.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915154.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352442.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715141.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352450.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715141.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352450.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755182.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352452.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755182.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352452.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238537297.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352454.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238537297.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352454.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475133.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352456.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475133.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352456.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238401031.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352458.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238401031.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352458.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555149.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352460.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555149.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352460.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/lottie-ark-2-0-canvas-ui-animate.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352468.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/lottie-ark-2-0-canvas-ui-animate.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352468.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755172.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352486.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755172.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352486.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001198839004.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001198839004.gif new file mode 100644 index 0000000000000000000000000000000000000000..b0667769e77a2a2d1b131736bdce96489b7e064e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001198839004.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/overlay.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001205769446.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/overlay.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001205769446.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Image2.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001205812616.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Image2.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001205812616.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Image3.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001205972610.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Image3.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001205972610.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001208256092.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001208256092.png new file mode 100644 index 0000000000000000000000000000000000000000..b15b9d83968672a6771322069b47394cfb3b8c1f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001208256092.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001209874754.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001209874754.gif new file mode 100644 index 0000000000000000000000000000000000000000..f0962619f5df0fec543cd693195045c9203378d9 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001209874754.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001210195016.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001210195016.gif new file mode 100644 index 0000000000000000000000000000000000000000..7b839683df88c833812ce75bd656abd22dae950f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001210195016.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001210353788.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001210353788.gif new file mode 100644 index 0000000000000000000000000000000000000000..b8a7961adce1b592b8fdbce98966c70cf1da68e8 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001210353788.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/ImageAnimator.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662643.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/ImageAnimator.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662643.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/s3.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662645.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/s3.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662645.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/opacity.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662647.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/opacity.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662647.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Blank1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662649.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Blank1.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662649.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Flex04-2.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662653.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Flex04-2.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662653.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662657.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662657.png new file mode 100644 index 0000000000000000000000000000000000000000..999ad44c80a018d45353044e13923a8566bf3cf0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662657.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Rating.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662659.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Rating.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662659.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/DisplayPriorityExample.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662667.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/DisplayPriorityExample.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662667.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/qrcode.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662669.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/qrcode.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662669.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/textstyle.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662673.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/textstyle.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219662673.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/s1.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744181.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/s1.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744181.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/grid-3.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744183.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/grid-3.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744183.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/polyline.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744185.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/polyline.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744185.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/grid.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744187.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/grid.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744187.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Flex01.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744189.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Flex01.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744189.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/circle.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744191.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/circle.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744191.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/path.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744193.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/path.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744193.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/SharedTransition.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744195.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/SharedTransition.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744195.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/flex.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744197.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/flex.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744197.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/customdialog.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744203.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/customdialog.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744203.gif diff --git "a/zh-cn/application-dev/reference/arkui-ts/figures/\347\253\226\345\261\217\346\230\276\347\244\272.gif" b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744205.gif similarity index 100% rename from "zh-cn/application-dev/reference/arkui-ts/figures/\347\253\226\345\261\217\346\230\276\347\244\272.gif" rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744205.gif diff --git "a/zh-cn/application-dev/reference/arkui-ts/figures/\350\256\276\345\244\207\345\256\275\345\272\246\344\270\272MD.png" b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744207.png similarity index 100% rename from "zh-cn/application-dev/reference/arkui-ts/figures/\350\256\276\345\244\207\345\256\275\345\272\246\344\270\272MD.png" rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744207.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/s4-(1).png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864131.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/s4-(1).png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864131.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/222.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864133.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/222.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864133.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/1111.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864137.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/1111.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864137.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/PageTransition2.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864139.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/PageTransition2.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864139.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Button.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864141.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Button.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864141.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Navigator.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864145.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Navigator.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864145.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/badge.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864147.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/badge.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864147.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/colorGradient.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864149.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/colorGradient.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864149.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/appear.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864151.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/appear.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864151.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Text1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864155.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Text1.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864155.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/2222.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864157.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/2222.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864157.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/ListItem.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864159.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/ListItem.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864159.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/stack.jpg b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982699.jpg similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/stack.jpg rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982699.jpg diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/back.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982703.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/back.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982703.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/border.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982705.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/border.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982705.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/ColumnSplit.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982707.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/ColumnSplit.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982707.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Span.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982709.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Span.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982709.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Counter.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982711.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Counter.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982711.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/enabled.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982713.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/enabled.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982713.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/line.jpg b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.jpg similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/line.jpg rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.jpg diff --git "a/zh-cn/application-dev/reference/arkui-ts/figures/\350\256\276\345\244\207\345\256\275\345\272\246\344\270\272LG.png" b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982727.png similarity index 100% rename from "zh-cn/application-dev/reference/arkui-ts/figures/\350\256\276\345\244\207\345\256\275\345\272\246\344\270\272LG.png" rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982727.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/RowSplit.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982729.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/RowSplit.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982729.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001224621917.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001224621917.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GIF-0.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001231374559.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/GIF-0.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001231374559.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/F.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001232775585.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/F.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001232775585.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001234375607.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001234375607.gif new file mode 100644 index 0000000000000000000000000000000000000000..bbaa383d7fcd489934fe740d7f9852a81fcca9ff Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001234375607.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/datapanel.jpg b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001236876377.jpg similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/datapanel.jpg rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001236876377.jpg diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355087.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355087.gif deleted file mode 100644 index 38502c83c52aa9229da69d638e4b9b1f5a35009b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355087.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475107.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475107.gif deleted file mode 100644 index b3966d0abb39044241ee174a126fcf919f402d98..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475107.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/66666.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237616085.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/66666.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237616085.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595234.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712325.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595234.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712325.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475139.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712331.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475139.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712331.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595220.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712335.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595220.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712335.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595226.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712345.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595226.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712345.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595230.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712347.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595230.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712347.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712411.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712411.png new file mode 100644 index 0000000000000000000000000000000000000000..657eee10e270eb448fc7f7f4b24b18134a42d5dc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712411.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712413.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712413.png new file mode 100644 index 0000000000000000000000000000000000000000..7cbe07731306eff949ff7ced4dd7eb4a374c8310 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712413.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712415.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712415.png new file mode 100644 index 0000000000000000000000000000000000000000..e764c43599592d821c403aac0d3fa40d9edd22e5 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712415.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712417.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712417.png new file mode 100644 index 0000000000000000000000000000000000000000..294b32cf04462b04243afb828199be9b95e6dd17 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712417.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712419.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712419.png new file mode 100644 index 0000000000000000000000000000000000000000..af02181de0d07d5311b09c8d05c2a018e6e5b4cf Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712419.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712421.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712421.png new file mode 100644 index 0000000000000000000000000000000000000000..3e7218eb57566d86457a9fbd4a8ed0f0dd490c3f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712421.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238282783.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712437.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238282783.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712437.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238282827.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712439.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238282827.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712439.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238457271.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712441.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238457271.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712441.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238601051.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712443.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238601051.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712443.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238601053.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712445.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238601053.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712445.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915180.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712447.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915180.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712447.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595216.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712467.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595216.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712467.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075154.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712471.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075154.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712471.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832295.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832295.png new file mode 100644 index 0000000000000000000000000000000000000000..10059591af349daced4bf7abeb009209a3e90f1d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832295.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832297.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832297.png new file mode 100644 index 0000000000000000000000000000000000000000..b2728fd1b4e050edddf499398b44a7e3aa634109 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832297.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832305.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832305.png new file mode 100644 index 0000000000000000000000000000000000000000..4fb651372a67eca9de3848baa6b66cac0ee9f173 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832305.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832309.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832309.png new file mode 100644 index 0000000000000000000000000000000000000000..1f4208ebcf5ffeeda0d1f5c452327c8fd8dcf7ac Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832309.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832317.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832317.png new file mode 100644 index 0000000000000000000000000000000000000000..945862898489d8e008e94abbcd691aa307b18d06 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832317.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832319.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832319.png new file mode 100644 index 0000000000000000000000000000000000000000..f36078d6d832fa757378b72fa0739f66fe781c64 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832319.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238602771.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832385.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238602771.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832385.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238602821.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832387.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238602821.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832387.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193436448.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832389.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193436448.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832389.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193801070.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832391.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193801070.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832391.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193801072.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832395.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193801072.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832395.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832403.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832403.png new file mode 100644 index 0000000000000000000000000000000000000000..4608132f8e4292a3fe0174a65a9a3f2fc428c0e7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832403.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832405.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832405.png new file mode 100644 index 0000000000000000000000000000000000000000..f5cd637e5bf9db13e3334ca00413e3a91412c813 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832405.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832407.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832407.png new file mode 100644 index 0000000000000000000000000000000000000000..e3b4b42aecaef72ed4a08b3566a895b3f9b12343 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832407.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832409.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832409.png new file mode 100644 index 0000000000000000000000000000000000000000..1f4208ebcf5ffeeda0d1f5c452327c8fd8dcf7ac Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832409.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832411.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832411.png new file mode 100644 index 0000000000000000000000000000000000000000..138e011909c2d4738f3cd9671a79ea0c37cb5b87 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832411.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832413.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832413.png new file mode 100644 index 0000000000000000000000000000000000000000..defc3c9eb037c06b894ee2e30563facb8c8375ab Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832413.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/unnaming-(3).png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832437.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/unnaming-(3).png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832437.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952277.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952277.png new file mode 100644 index 0000000000000000000000000000000000000000..c1803b711d45a86552a2be4099424206a1561534 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952277.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952279.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952279.png new file mode 100644 index 0000000000000000000000000000000000000000..ad8582f58ed05f9ac3b8962f82d8565d1f580f6c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952279.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952291.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952291.png new file mode 100644 index 0000000000000000000000000000000000000000..50726d3e461d7a5dbfec674899fee603aaf41bee Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952291.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952293.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952293.png new file mode 100644 index 0000000000000000000000000000000000000000..d0e446b213816e4db8d67a9898da1afa7b8226ad Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952293.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952301.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952301.png new file mode 100644 index 0000000000000000000000000000000000000000..d3db21e0e3da6d8663f59b2ddabd9e50d6eb1e6a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952301.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952303.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952303.png new file mode 100644 index 0000000000000000000000000000000000000000..1ba89fa119f9a64c74b9353c20ec3d741aaad9be Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952303.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193642802.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952373.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193642802.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952373.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355137.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952375.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355137.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952375.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/11111.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952377.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/11111.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952377.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193321136.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952379.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193321136.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952379.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193321138.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952381.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193321138.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952381.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075170.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952387.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075170.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952387.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238522733.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952397.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238522733.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952397.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555155.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952399.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555155.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952399.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715149.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952401.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715149.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952401.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238281067.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952403.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238281067.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952403.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238281069.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952405.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238281069.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952405.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555179.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952407.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555179.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952407.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555151.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952419.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555151.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952419.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032317.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032317.png new file mode 100644 index 0000000000000000000000000000000000000000..160278c82fcdf310c796609d5ee29a2a4869af9e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032317.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032319.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032319.png new file mode 100644 index 0000000000000000000000000000000000000000..83b7a51accdda21d21a39e5e9d917d75811cb496 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032319.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032327.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032327.png new file mode 100644 index 0000000000000000000000000000000000000000..5da42e3e14d601745274cb62d914c6600620bb25 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032327.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032329.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032329.png new file mode 100644 index 0000000000000000000000000000000000000000..72a515c8b425037a4307ef1b16def3e528aab4a0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032329.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032337.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032337.png new file mode 100644 index 0000000000000000000000000000000000000000..fb7fc25c17990998ba263a8525e6a110794c0d87 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032337.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032339.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032339.png new file mode 100644 index 0000000000000000000000000000000000000000..241fe8546ea2acfdb7baf2c5e66a8af2f0d7b593 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032339.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032409.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032409.png new file mode 100644 index 0000000000000000000000000000000000000000..4f115a17e671fa21da2d44cd82bf7b0f3c70c0a6 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032409.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032411.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032411.png new file mode 100644 index 0000000000000000000000000000000000000000..bc093379e122dcac29c4c8d04560d26bfc23d472 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032411.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032413.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032413.png new file mode 100644 index 0000000000000000000000000000000000000000..b0b8bdc7fc7cd417340bbcda6845fd7de0098930 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032413.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032415.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032415.png new file mode 100644 index 0000000000000000000000000000000000000000..22e84d1b8951b163748a079b6d1d302148d3b6bb Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032415.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032417.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032417.png new file mode 100644 index 0000000000000000000000000000000000000000..088d5a479cc188332bb7295b31aea277897faca8 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032417.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032419.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032419.png new file mode 100644 index 0000000000000000000000000000000000000000..cb250dfc130cc329ae9dc74ddb861e8753d419c3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032419.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032423.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032423.png new file mode 100644 index 0000000000000000000000000000000000000000..ec9ddc678b5a74f1e5ae78ba6a9c35618f31a589 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032423.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032425.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032425.png new file mode 100644 index 0000000000000000000000000000000000000000..9cb1361bd9aded6d58d51ae771558989977a0608 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032425.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032427.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032427.png new file mode 100644 index 0000000000000000000000000000000000000000..2eed5759714b99dc039faab67acdfe6d67bfc6ac Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032427.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032429.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032429.png new file mode 100644 index 0000000000000000000000000000000000000000..92a309337be0e2f4c49d0484dab0ffd19584b534 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032429.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032431.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032431.png new file mode 100644 index 0000000000000000000000000000000000000000..b4fd4aff2fb6b7a32fcb8af41a84fbf57c26d035 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032431.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915158.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032455.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915158.png rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001239032455.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/actionsheet.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001241668363.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/actionsheet.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001241668363.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250492613.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250492613.gif new file mode 100644 index 0000000000000000000000000000000000000000..05ad0a8aa0ae63ae9193aa1c9b3f943f060220da Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250492613.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251007721.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251007721.gif new file mode 100644 index 0000000000000000000000000000000000000000..32d2334360f9fd90afd1709f50a39add4e2196c1 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251007721.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/textarea1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251087311.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/textarea1.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251087311.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251092975.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251092975.gif new file mode 100644 index 0000000000000000000000000000000000000000..c269eab06d9dd52463481510edc7089be19cb2b6 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251092975.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251279761.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251279761.gif new file mode 100644 index 0000000000000000000000000000000000000000..ccfd08401bceb09625add910f66bea401bcaf173 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251279761.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251292933.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251292933.gif new file mode 100644 index 0000000000000000000000000000000000000000..587325d41b6320ff8e25afd9d2b19e3d1b5a11d5 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251292933.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252653499.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252653499.png new file mode 100644 index 0000000000000000000000000000000000000000..77113dac339f335dc44b3fb4a271e92f7c8cbb00 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252653499.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252667389.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252667389.gif new file mode 100644 index 0000000000000000000000000000000000000000..a5092180309ecb061248cc205e4bd667eb290085 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252667389.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/textinput1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252769643.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/textinput1.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252769643.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-caution.gif b/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-caution.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-caution.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-danger.gif b/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-danger.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-danger.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-note.gif b/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-note.gif new file mode 100644 index 0000000000000000000000000000000000000000..6314297e45c1de184204098efd4814d6dc8b1cda Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-note.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-notice.gif b/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-notice.gif new file mode 100644 index 0000000000000000000000000000000000000000..86024f61b691400bea99e5b1f506d9d9aef36e27 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-notice.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-tip.gif b/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-tip.gif new file mode 100644 index 0000000000000000000000000000000000000000..93aa72053b510e456b149f36a0972703ea9999b7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-tip.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-warning.gif b/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-warning.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/public_sys-resources/icon-warning.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-animation.md index afb4e3bad98d780e7bc4cf7affcc5dd086967b14..bf1021189ad456a896e297ecd0fb4db7a475dfff 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-animation.md @@ -1,15 +1,13 @@ -# 动画 +# 动画 -- **[属性动画](ts-animatorproperty.md)** +- **[属性动画](ts-animatorproperty.md)** -- **[显式动画](ts-explicit-animation.md)** +- **[显式动画](ts-explicit-animation.md)** -- **[转场动画](ts-transition-animation.md)** +- **[转场动画](ts-transition-animation.md)** -- **[路径动画](ts-motion-path-animation.md)** - -- **[矩阵变换](ts-matrix-transformation.md)** - -- **[插值计算](ts-interpolation-calculation.md)** +- **[路径动画](ts-motion-path-animation.md)** +- **[矩阵变换](ts-matrix-transformation.md)** +- **[插值计算](ts-interpolation-calculation.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md b/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md index e7df635a2e955169f52723f9ea7f09116b77cf1a..2d4e1ad5f0fe45b8108b69a306d96e666f9414b7 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md @@ -1,147 +1,40 @@ -# 属性动画 +# 属性动画 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

duration

-

number

-

1000

-

单位为毫秒，默认动画时长为1000毫秒。

-

curve

-

Curve

-

Linear

-

默认曲线为线性，有效值参见Curve说明。

-

delay

-

number

-

0

-

单位为毫秒，默认不延时播放。

-

iterations

-

number

-

1

-

默认播放一次，设置为-1时表示无限次播放。

-

playMode

-

PlayMode

-

Normal

-

设置动画播放模式，默认播放完成后重头开始播放。

-
-- Curve枚举说明 +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| duration | number | 1000 | 单位为毫秒，默认动画时长为1000毫秒。 | +| curve | Curve | Curve.Linear | 默认曲线为线性。 | +| delay | number | 0 | 单位为毫秒，默认不延时播放。 | +| iterations | number | 1 | 默认播放一次，设置为-1时表示无限次播放。 | +| playMode | [PlayMode](ts-appendix-enums.md#playmode枚举值说明) | PlayMode.Normal | 设置动画播放模式，默认播放完成后重头开始播放。 | + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Linear

-

表示动画从头到尾的速度都是相同的。

-

Ease

-

表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。

-

EaseIn

-

表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。

-

EaseOut

-

表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。

-

EaseInOut

-

表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。

-

FastOutSlowIn

-

标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。

-

LinearOutSlowIn

-

减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。

-

FastOutLinearIn

-

加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。

-

ExtremeDeceleration

-

急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。

-

Sharp

-

锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。

-

Rhythm

-

节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。

-

Smooth

-

平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。

-

Friction

-

阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。

-
+- Curve枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Linear | 表示动画从头到尾的速度都是相同的。 | + | Ease | 表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。 | + | EaseIn | 表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。 | + | EaseOut | 表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。 | + | EaseInOut | 表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。 | + | FastOutSlowIn | 标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。 | + | LinearOutSlowIn | 减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。 | + | FastOutLinearIn | 加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。 | + | ExtremeDeceleration | 急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。 | + | Sharp | 锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。 | + | Rhythm | 节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。 | + | Smooth | 平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。 | + | Friction | 阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。 | -## 示例 +## 示例 ``` @Entry @@ -177,5 +70,4 @@ struct AttrAnimationExample { } ``` -![](figures/AttrAnimation.gif) - +![zh-cn_image_0000001174264358](figures/zh-cn_image_0000001174264358.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md index 4ee8d2499f2bcccb58b1a9d4761536058a3a14b4..a63bdad32971f333d3669a6bab490f0cc05f9da2 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -1,291 +1,92 @@ -# 文档中涉及到的内置枚举值 +# 文档中涉及到的内置枚举值 -## Alignment枚举说明 +## Alignment枚举说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

TopStart

-

顶部起始端。

-

Top

-

顶部横向居中。

-

TopEnd

-

顶部尾端。

-

Start

-

起始端纵向居中。

-

Center

-

横向和纵向居中。

-

End

-

尾端纵向居中。

-

BottomStart

-

底部起始端。

-

Bottom

-

底部横向居中。

-

BottomEnd

-

底部尾端。

-
+| 名称 | 描述 | +| -------- | -------- | +| TopStart | 顶部起始端。 | +| Top | 顶部横向居中。 | +| TopEnd | 顶部尾端。 | +| Start | 起始端纵向居中。 | +| Center | 横向和纵向居中。 | +| End | 尾端纵向居中。 | +| BottomStart | 底部起始端。 | +| Bottom | 底部横向居中。 | +| BottomEnd | 底部尾端。 | -## Axis枚举说明 - - - - - - - - - - - -

名称

-

描述

-

Vertical

-

方向为纵向。

-

Horizontal

-

方向为横向。

-
+## Axis枚举说明 -## ItemAlign枚举说明 +| 名称 | 描述 | +| -------- | -------- | +| Vertical | 方向为纵向。 | +| Horizontal | 方向为横向。 | - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Auto

-

使用Flex容器中默认配置。

-

Start

-

元素在Flex容器中，交叉轴方向首部对齐。

-

Center

-

元素在Flex容器中，交叉轴方向居中对齐。

-

End

-

元素在Flex容器中，交叉轴方向底部对齐。

-

Stretch

-

元素在Flex容器中，交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。

-

Baseline

-

元素在Flex容器中，交叉轴方向文本基线对齐。

-
-## LineCapStyle枚举说明 +## ItemAlign枚举说明 - - - - - - - - - - - - - - -

名称

-

描述

-

Butt

-

分割线两端为平行线。

-

Round

-

分割线两端为半圆。

-

Square

-

分割线两端为平行线。

-
+| 名称 | 描述 | +| -------- | -------- | +| Auto | 使用Flex容器中默认配置。 | +| Start | 元素在Flex容器中，交叉轴方向首部对齐。 | +| Center | 元素在Flex容器中，交叉轴方向居中对齐。 | +| End | 元素在Flex容器中，交叉轴方向底部对齐。 | +| Stretch | 元素在Flex容器中，交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。 | +| Baseline | 元素在Flex容器中，交叉轴方向文本基线对齐。 | -## PlayMode枚举值说明 - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Normal

-

动画按正常播放。

-

Reverse

-

动画反向播放。

-

Alternate

-

动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。

-

AlternateReverse

-

动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

-
+## LineCapStyle枚举说明 -## ImageRepeat枚举说明 +| 名称 | 描述 | +| -------- | -------- | +| Butt | 分割线两端为平行线。 | +| Round | 分割线两端为半圆。 | +| Square | 分割线两端为平行线。 | - - - - - - - - - - - - - - - - - -

名称

-

描述

-

X

-

只在水平轴上重复绘制图片。

-

Y

-

只在竖直轴上重复绘制图片。

-

XY

-

在两个轴上重复绘制图片。

-

NoRepeat

-

不重复绘制图片。

-
-## TextDecorationType枚举说明 +## PlayMode枚举值说明 - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Underline

-

文字下划线修饰。

-

LineThrough

-

穿过文本的修饰线。

-

Overline

-

文字上划线修饰。

-

None

-

不使用文本装饰线。

-
+| 名称 | 描述 | +| -------- | -------- | +| Normal | 动画按正常播放。 | +| Reverse | 动画反向播放。 | +| Alternate | 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 | +| AlternateReverse | 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 | -## TextCase枚举说明 - - - - - - - - - - - - - - -

名称

-

描述

-

Normal

-

保持文本原有大小写。

-

LowerCase

-

文本采用全小写。

-

UpperCase

-

文本采用全大写。

-
+## ImageRepeat枚举说明 -## BarState枚举说明 +| 名称 | 描述 | +| -------- | -------- | +| X | 只在水平轴上重复绘制图片。 | +| Y | 只在竖直轴上重复绘制图片。 | +| XY | 在两个轴上重复绘制图片。 | +| NoRepeat | 不重复绘制图片。 | - - - - - - - - - - - - - - -

名称

-

描述

-

Off

-

不显示。

-

On

-

常驻显示。

-

Auto

-

按需显示(触摸时显示，2s后消失)。

-
+## TextDecorationType枚举说明 + +| 名称 | 描述 | +| -------- | -------- | +| Underline | 文字下划线修饰。 | +| LineThrough | 穿过文本的修饰线。 | +| Overline | 文字上划线修饰。 | +| None | 不使用文本装饰线。 | + + +## TextCase枚举说明 + +| 名称 | 描述 | +| -------- | -------- | +| Normal | 保持文本原有大小写。 | +| LowerCase | 文本采用全小写。 | +| UpperCase | 文本采用全大写。 | + + +## BarState枚举说明 + +| 名称 | 描述 | +| -------- | -------- | +| Off | 不显示。 | +| On | 常驻显示。 | +| Auto | 按需显示(触摸时显示，2s后消失)。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-appendix.md b/zh-cn/application-dev/reference/arkui-ts/ts-appendix.md index 5eaa9c8adf1ed664d8a880c5a298cb039b0565e3..beb10bf5a791ed0247bdd78dcbe855a1a12c6f34 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-appendix.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-appendix.md @@ -1,5 +1,3 @@ -# 附录 - -- **[文档中涉及到的内置枚举值](ts-appendix-enums.md)** - +# 附录 +- **[文档中涉及到的内置枚举值](ts-appendix-enums.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md index 99be5453d987f2edac260c69435ff7f7edd71b3e..bb429a7b1797e981bb4b83b0afe0afcc18635bfb 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md @@ -1,79 +1,43 @@ -# Blank +# Blank + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 - -Blank\(min?: Length\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

min

-

Length

-

否

-

0

-

空白填充组件在容器主轴上的最小大小。

-
- - -## 属性 - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

color

-

Color

-

0x00000000

-

设置空白填充的填充颜色。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 不支持通用属性方法。 - -## 示例 + +## 接口 + +Blank(min?: Length) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | min | Length | 否 | 0 | 空白填充组件在容器主轴上的最小大小。 | + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| color | Color | 0x00000000 | 设置空白填充的填充颜色。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 不支持通用属性方法。 + + +## 示例 ``` @Entry @@ -93,9 +57,8 @@ struct BlankExample { 竖屏状态 -![](figures/Blank1.gif) +![zh-cn_image_0000001219662649](figures/zh-cn_image_0000001219662649.gif) 横屏状态 -![](figures/Blank2.gif) - +![zh-cn_image_0000001174104388](figures/zh-cn_image_0000001174104388.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md index 7d01e7c45afcbbdd538dc24ebed63ab7471c89a1..f77635b380f69bc5cf28bf7cc9b9ecb104009bc0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md @@ -1,172 +1,65 @@ -# Button +# Button + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 提供按钮组件。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 可以包含子组件。 -## 接口 - -- Button\(options?: \{type?: ButtonType, stateEffect?: boolean\}\) - - **表 1** options参数说明 - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

type

-

ButtonType

-

否

-

Capsule

-

描述按钮风格。

-

stateEffect

-

boolean

-

否

-

true

-

按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭。

-
- - -- Button\(label?: string, options?: \{ type?: ButtonType, stateEffect?: boolean \}\) - - 使用文本内容创建相应的按钮组件，此时Button无法包含子组件。 - - **表 2** value参数说明 - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

label

-

string

-

否

-

-

-

按钮文本内容。

-

options

-

Object

-

否

-

-

-

见options参数说明。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

type

-

ButtonType

-

Capsule

-

设置Button样式。

-

stateEffect

-

boolean

-

true

-

状态切换时是否开启切换效果，当状态置为false时，点击效果关闭。

-
- -- ButtonType枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

Capsule

-

胶囊型按钮（圆角默认为高度的一半）。

-

Circle

-

圆形按钮。

-

Normal

-

普通按钮（默认不带圆角）。

-
- - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 按钮圆角通过[通用属性borderRadius设置](ts-universal-attributes-border.md)（不支持通过border接口设置圆角）。 ->- 按钮文本通过[通用文本样式](ts-universal-attributes-text-style.md)进行设置。 - -## 示例 + +## 接口 + +- Button(options?: {type?: ButtonType, stateEffect?: boolean}) + **表1** options参数说明 + + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | type | ButtonType | 否 | Capsule | 描述按钮风格。 | + | stateEffect | boolean | 否 | true | 按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭。 | + + +- Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean }) + 使用文本内容创建相应的按钮组件，此时Button无法包含子组件。 + + **表2** value参数说明 + + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | label | string | 否 | - | 按钮文本内容。 | + | options | Object | 否 | - | 见options参数说明。 | + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| type | ButtonType | Capsule | 设置Button样式。 | +| stateEffect | boolean | true | 状态切换时是否开启切换效果，当状态置为false时，点击效果关闭。 | + +- ButtonType枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Capsule | 胶囊型按钮（圆角默认为高度的一半）。 | + | Circle | 圆形按钮。 | + | Normal | 普通按钮（默认不带圆角）。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 按钮圆角通过[通用属性borderRadius设置](ts-universal-attributes-border.md)（不支持通过border接口设置圆角）。 +> +> - 按钮文本通过[通用文本样式](ts-universal-attributes-text-style.md)进行设置。 + + +## 示例 ``` @Entry @@ -217,5 +110,4 @@ struct ButtonExample { } ``` -![](figures/Button.gif) - +![zh-cn_image_0000001219864141](figures/zh-cn_image_0000001219864141.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md index 8bd9ccfebf5b90019d43a4adfc46a6a696419d24..4493797aed695da02300d185ed71aded7b337b95 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md @@ -1,94 +1,38 @@ -# DataPanel +# DataPanel 数据面板组件，用于将多个数据占比情况使用占比图进行展示。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 - -DataPanel\(value:\{values: number\[\], max?: number, type?: DataPanelType\}\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

values

-

number[]

-

是

-

-

-

数据值列表，最大支持9个数据。

-

max

-

number

-

否

-

100

-

1.max大于0，表示数据的最大值。

-

2.max小于等于0，max等于value数组各项的和，按比例显示。

-

type8+

-

DataPanelType

-

否

-

DataPanelType.Circle

-

数据面板的类型。

-
- - -- DataPanelType枚举说明 - - - - - - - - - - - - -

名称

-

描述

-

Line

-

线型数据面板。

-

Circle

-

环形数据面板。

-
- - -## 示例 + +## 接口 + +DataPanel(value:{values: number[], max?: number, type?: DataPanelType}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | values | number[] | 是 | - | 数据值列表，最大支持9个数据。 | + | max | number | 否 | 100 | - max大于0，表示数据的最大值。
- max小于等于0，max等于value数组各项的和，按比例显示。 | + | type8+ | DataPanelType | 否 | DataPanelType.Circle | 数据面板的类型。 | + + +- DataPanelType枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Line | 线型数据面板。 | + | Circle | 环形数据面板。 | + + +## 示例 ``` @Entry @@ -108,5 +52,4 @@ struct DataPanelExample { } ``` -![](figures/datapanel.jpg) - +![zh-cn_image_0000001236876377](figures/zh-cn_image_0000001236876377.jpg) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md new file mode 100644 index 0000000000000000000000000000000000000000..68b89fa6cbdc77f2ff39baa9836a38880a0d5b1f --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md @@ -0,0 +1,149 @@ +# DatePicker + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +选择日期和时间的滑动选择器组件。 + + +## 权限列表 + +无 + + +## 子组件 + +无 + + +## 接口 + +DatePicker(value:{start?: Date, end?: Date, selected?: Date, type?: DatePickerType}) + +根据指定范围的Date创建可以选择时间或者日期的滑动选择器。 + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | start | Date | 否 | Date('1970-1-1') | 指定选择器的起始日期。 | + | end | Date | 否 | Date('2100-12-31') | 指定选择器的结束日期。 | + | selected | Date | 否 | 当前系统日期或时间 | 当type为DatePickerType.Date时，设置选中项的日期，当type为DatePickerType.Time时，设置选中项的时间。 | + | type | DatePickerType | 否 | DatePickerType.Date | 指定选择器的类型，包括日期选择器和时间选择器，缺省使用日期选择器。 | + +- DatePickerType枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Date | 日期选择器。 | + | Time | 时间选择器。 | + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| lunar | boolean | false | 日期是否显示农历。
- true：展示农历。
- false：不展示农历。 | +| useMilitaryTime | boolean | false | 展示时间是否为24小时制。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onChange(callback: (value: DatePickerResult) => void) | 选择日期或时间时触发该事件。 | + +- DatePickerResult对象说明 + | 名称 | 参数类型 | 描述 | + | -------- | -------- | -------- | + | year | number | 选中日期的年（type为DatePickerType.Date）。 | + | month | number | 选中日期的月（type为DatePickerType.Date）。 | + | day | number | 选中日期的日（type为DatePickerType.Date）。 | + | hour | number | 选中时间的时（type为DatePickerType.Time）。 | + | minute | number | 选中时间的分（type为DatePickerType.Time）。 | + + +## 示例 + + +### 日期选择器（显示农历） + +``` +@Entry +@Component +struct DatePickerExample01 { + private selectedDate: Date = new Date('2021-08-08') + + build() { + Column() { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2200-1-1'), + selected: this.selectedDate, + type: DatePickerType.Date + }) + .lunar(true) + .onChange((date: DatePickerResult) => { + console.info('select current date is: ' + JSON.stringify(date)) + }) + }.width('100%') + } +} +``` + +![zh-cn_image_0000001251279761](figures/zh-cn_image_0000001251279761.gif) + + +### 日期选择器（不显示农历） + +``` +@Entry +@Component +struct DatePickerExample02 { + private selectedDate: Date = new Date('2021-08-08') + + build() { + Column() { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2200-1-1'), + selected: this.selectedDate, + type: DatePickerType.Date + }) + .lunar(false) + .onChange((date: DatePickerResult) => { + console.info('select current date is: ' + JSON.stringify(date)) + }) + }.width('100%') + } +} +``` + +![zh-cn_image_0000001251092975](figures/zh-cn_image_0000001251092975.gif) + + +### 时间选择器 + +``` +@Entry +@Component +struct DatePickerExample03 { + private selectedTime: Date = new Date('2021-9-29 08:00:00') + + build() { + Column() { + DatePicker({ + start: new Date('00:00:00'), + end: new Date('23:59:59'), + selected: this.selectedTime, + type: DatePickerType.Time + }) + .useMilitaryTime(true) + .onChange((date: DatePickerResult) => { + console.info('select current date is: ' + JSON.stringify(date)) + }) + }.width('100%') + } +} +``` + +![zh-cn_image_0000001251292933](figures/zh-cn_image_0000001251292933.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md index 38aba99c0bc5c8552375bd11bc05376f1b1cf4d7..6dd00b38d01bb96374e23c3767fda593735e54ee 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md @@ -1,78 +1,43 @@ -# Divider +# Divider + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 提供分隔器组件，分隔不同内容块/内容元素。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 - -Divider\(\) - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

vertical

-

boolean

-

false

-

使用水平分割线还是垂直分割线，false: 水平分割线， true:垂直分割线。

-

color

-

Color

-

-

-

设置分割线颜色。

-

strokeWidth

-

Length

-

1

-

设置分割线宽度。

-

lineCap

-

LineCapStyle

-

Butt

-

设置分割线条的端点样式，默认为Butt。

-
- -## 事件 + +## 接口 + +Divider() + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| vertical | boolean | false | 使用水平分割线还是垂直分割线，false: 水平分割线， true:垂直分割线。 | +| color | Color | - | 设置分割线颜色。 | +| strokeWidth | Length | 1 | 设置分割线宽度。 | +| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle枚举说明) | LineCapStyle.Butt | 设置分割线条的端点样式。 | + + +## 事件 不支持通用事件。 -## 示例 + +## 示例 ``` @Entry @@ -103,5 +68,4 @@ struct DividerExample { } ``` -![](figures/divider.png) - +![zh-cn_image_0000001174422926](figures/zh-cn_image_0000001174422926.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md deleted file mode 100644 index 87c23afdb1dc9515ac702b0ea0cbbeda59ec51e7..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md +++ /dev/null @@ -1,150 +0,0 @@ -# Gauge - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -数据量规图表组件，用于将数据展示为环形图表。 - -## 权限列表 - -无 - -## 子组件 - -无 - -## 接口 - -Gauge\(value:\{value: number, min?: number, max?: number\}\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

value

-

number

-

是

-

-

-

当前数据值。

-

min

-

number

-

否

-

0

-

当前数据段最小值。

-

max

-

number

-

否

-

100

-

当前数据段最大值。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

value

-

number

-

0

-

设置当前数据图表的值。

-

startAngle

-

Angle

-

-150

-

设置起始角度位置，时钟0点为0度，顺时针方向为正角度。

-

endAngle

-

Angle

-

150

-

设置终止角度位置，时钟0点为0度，顺时针方向为正角度。

-

colors

-

Color | Array<ColorStop>

-

-

-

设置图表的颜色，支持纯色和分段渐变色设置。

-

strokeWidth

-

Length

-

-

-

设置环形图表的环形厚度。

-
- -## 示例 - -``` -@Entry -@Component -struct GaugeExample { - build() { - Column() { - Gauge({ value: 50, min: 0, max: 100 }) - .startAngle(210).endAngle(150) - .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]]) - .strokeWidth(20) - .width(200).height(200) - }.width('100%').margin({ top: 5 }) - } -} -``` - -![](figures/gauge.png) - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md index 7df158ada40dbe6ce2229f0900ac69a7163a8b6f..28429dd5c02886be2490756f42846ba7e0eb3605 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -1,265 +1,85 @@ -# Image +# Image + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 图片组件，用来渲染展示图片。 -## 权限列表 + +## 权限列表 ohos.permission.INTERNET（使用网络图片） -## 子组件 + +## 子组件 无 -## 接口 - -Image\(value: \{uri: string | PixelMap\}\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

uri

-

string

-

是

-

-

-

图片的uri，支持本地图片和网络路径。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

alt

-

string

-

-

-

加载时显示的占位图。支持本地图片和网络路径。

-

objectFit

-

ImageFit

-

Cover

-

设置图片的缩放类型。

-

objectRepeat

-

ImageRepeat

-

NoRepeat

-

设置图片的重复样式。

-
说明：
  • SVG类型图源不支持该属性。
-
-

interpolation

-

ImageInterpolation

-

None

-

设置图片的插值效果，仅针对图片放大插值。

-
说明：
  • SVG类型图源不支持该属性。
  • PixelMap资源不支持该属性。
-
-

renderMode

-

ImageRenderMode

-

Original

-

设置图片渲染的模式。

-
说明：
  • SVG类型图源不支持该属性。
-
-

sourceSize

-

{

-

width: number,

-

height: number

-

}

-

-

-

设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。

-
说明：

PixelMap资源不支持该属性。

-
-

syncLoad8+

-

boolean

-

false

-

设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。

-
- -- ImageFit枚举说明 - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Cover

-

保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。

-

Contain

-

保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。

-

Fill

-

不保持宽高比进行放大缩小，使得图片填充满显示边界。

-

None

-

保持原有尺寸显示。通常配合objectRepeat属性一起使用。

-

ScaleDown

-

保持宽高比显示，图片缩小或者保持不变。

-
- - -- ImageInterpolation枚举说明 - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

None

-

不使用插值图片数据。

-

High

-

高度使用插值图片数据，可能会影响图片渲染的速度。

-

Medium

-

中度使用插值图片数据。

-

Low

-

低度使用插值图片数据。

-
- - -- ImageRenderMode枚举说明 - - - - - - - - - - - - -

名称

-

描述

-

Original

-

按照原图进行渲染，包括颜色。

-

Template

-

将图像渲染为模板图像，忽略图片的颜色信息。

-
- - -## 事件 - - - - - - - - - - - - - - - -

名称

-

功能描述

-

onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) => void)

-

图片成功加载时触发该回调，返回成功加载的图源尺寸。

-

onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void)

-

图片加载出现异常时触发该回调。

-

onFinish(callback: () => void)

-

当加载的源文件为带动效的svg图片时，当svg动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。

-
- -## 示例 + +## 接口 + +Image(value: {uri: string | PixelMap}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | uri | string | 是 | - | 图片的uri，支持本地图片和网络路径。 | + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| alt | string | - | 加载时显示的占位图。支持本地图片和网络路径。 | +| objectFit | ImageFit | Cover | 设置图片的缩放类型。 | +| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat枚举说明) | NoRepeat | 设置图片的重复样式。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - SVG类型图源不支持该属性。 | +| interpolation | ImageInterpolation | None | 设置图片的插值效果，仅针对图片放大插值。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - SVG类型图源不支持该属性。
> 
> - PixelMap资源不支持该属性。 | +| renderMode | ImageRenderMode | Original | 设置图片渲染的模式。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - SVG类型图源不支持该属性。 | +| sourceSize | {
width: number,
height: number
} | - | 设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> PixelMap资源不支持该属性。 | +| syncLoad8+ | boolean | false | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。 | + +- ImageFit枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。 | + | Contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。 | + | Fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 | + | None | 保持原有尺寸显示。通常配合objectRepeat属性一起使用。 | + | ScaleDown | 保持宽高比显示，图片缩小或者保持不变。 | + +- ImageInterpolation枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | None | 不使用插值图片数据。 | + | High | 高度使用插值图片数据，可能会影响图片渲染的速度。 | + | Medium | 中度使用插值图片数据。 | + | Low | 低度使用插值图片数据。 | + +- ImageRenderMode枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Original | 按照原图进行渲染，包括颜色。 | + | Template | 将图像渲染为模板图像，忽略图片的颜色信息。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) => void) | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 | +| onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void) | 图片加载出现异常时触发该回调。 | +| onFinish(callback: () => void) | 当加载的源文件为带动效的svg图片时，当svg动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。 | + + +## 示例 ``` // Image1 @Entry @Component struct ImageExample1 { - private on: string = 'http://uxd.rnd.huawei.com/uxIcon/file/2021-08/d2d6e6c6-043f-471e-80e3-57199142201e.svg' + private on: string = 'www.example.com' @State src: string = this.on build() { @@ -319,7 +139,7 @@ struct ImageExample1 { } ``` -![](figures/Image1.gif) +![zh-cn_image_0000001250492613](figures/zh-cn_image_0000001250492613.gif) ``` // Image2 @@ -388,7 +208,7 @@ struct ImageExample2 { } ``` -![](figures/Image2.png) +![zh-cn_image_0000001205812616](figures/zh-cn_image_0000001205812616.png) ``` // Image3 @@ -450,4 +270,4 @@ struct ImageExample3 { } ``` -![](figures/Image3.gif) \ No newline at end of file +![zh-cn_image_0000001205972610](figures/zh-cn_image_0000001205972610.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md index e99ba3230c1baaa67b29f49391c621a3009a1fe5..19087baf60dd31f2bf438d8f8d0c627996fbc77d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md @@ -1,241 +1,67 @@ -# ImageAnimator +# ImageAnimator + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 -ImageAnimator\(\) +## 接口 -## 属性 +ImageAnimator() - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

默认值

-

必填

-

参数描述

-

images

-

Array<{

-

src:string,

-

width?:Length,

-

height?:Length,

-

top?:Length,

-

left?:Length,

-

duration?:number

-

}>

-

[]

-

是

-

设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小、图片位置和图片播放时长信息。详细说明如下：

-

src：图片路径，图片格式为svg，png和jpg。

-

width：图片宽度。

-

height：图片高度。

-

top：图片相对于组件左上角的纵向坐标。

-

left：图片相对于组件左上角的横向坐标。

-

duration：每一帧图片的播放时长，单位毫秒。

-

state

-

AnimationStatus

-

Initial

-

否

-

默认为初始状态，用于控制播放状态。

-

duration

-

number

-

1000

-

否

-

单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中设置了单独的duration后，该属性设置无效。

-

reverse

-

boolean

-

false

-

否

-

设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。

-

fixedSize

-

boolean

-

true

-

否

-

设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。

-

preDecode

-

number

-

0

-

否

-

是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。

-

fillMode

-

FillMode

-

Forwards

-

否

-

设置动画开始前和结束后的状态，可选值参见FillMode说明。

-

iterations

-

number

-

1

-

否

-

默认播放一次，设置为-1时表示无限次播放。

-
-- AnimationStatus枚举说明 +## 属性 - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Initial

-

动画初始状态。

-

Running

-

动画处于播放状态。

-

Paused

-

动画处于暂停状态。

-

Stopped

-

动画处于停止状态。

-
+| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| images | Array<{
src:string,
width?:Length,
height?:Length,
top?:Length,
left?:Length,
duration?:number
}> | [] | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小、图片位置和图片播放时长信息。详细说明如下：
src：图片路径，图片格式为svg，png和jpg。
width：图片宽度。
height：图片高度。
top：图片相对于组件左上角的纵向坐标。
left：图片相对于组件左上角的横向坐标。
duration：每一帧图片的播放时长，单位毫秒。 | +| state | AnimationStatus | Initial | 否 | 默认为初始状态，用于控制播放状态。 | +| duration | number | 1000 | 否 | 单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中设置了单独的duration后，该属性设置无效。 | +| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。 | +| fixedSize | boolean | true | 否 | 设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。 | +| preDecode | number | 0 | 否 | 是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。 | +| fillMode | FillMode | Forwards | 否 | 设置动画开始前和结束后的状态，可选值参见FillMode说明。 | +| iterations | number | 1 | 否 | 默认播放一次，设置为-1时表示无限次播放。 | +- AnimationStatus枚举说明 + | **名称** | **描述** | + | -------- | -------- | + | Initial | 动画初始状态**。** | + | Running | 动画处于播放状态。 | + | Paused | 动画处于暂停状态。 | + | Stopped | 动画处于停止状态。 | -- FillMode枚举值说明 +- FillMode枚举值说明 + | 名称 | 描述 | + | -------- | -------- | + | None | 播放完成后恢复初始状态。 | + | Forwards | 播放完成后保持动画结束时的状态。 | - - - - - - - - - - - - - - - - - -

名称

-

描述

-

None

-

播放完成后恢复初始状态。

-

Forwards

-

播放完成后保持动画结束时的状态。

-

Backwards

-

在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值。

-

Both

-

向前和向后填充模式都被应用。

-
+## 事件 -## 事件 +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onStart() => void | 状态回调，动画开始播放时触发。 | +| onPause() => void | 状态回调，动画暂停播放时触发。 | +| onRepeat() => void | 状态回调，动画重新播放时触发。 | +| onCancel() => void | 状态回调，动画取消播放时触发。 | +| onFinish() => void | 状态回调，动画播放完成时触发。 | - - - - - - - - - - - - - - - - - - - - -

名称

-

功能描述

-

onStart() => void

-

状态回调，动画开始播放时触发。

-

onPause() => void

-

状态回调，动画暂停播放时触发。

-

onRepeat() => void

-

状态回调，动画重新播放时触发。

-

onCancel() => void

-

状态回调，动画取消播放时触发。

-

onFinish() => void

-

状态回调，动画播放完成时触发。

-
-## 示例 +## 示例 ``` @Entry @@ -327,5 +153,4 @@ struct ImageAnimatorExample { } ``` -![](figures/ImageAnimator.gif) - +![zh-cn_image_0000001219662643](figures/zh-cn_image_0000001219662643.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md deleted file mode 100644 index e946c18503add3dfaacee6cd62b139532947ed6a..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md +++ /dev/null @@ -1,170 +0,0 @@ -# Marquee - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -跑马灯组件，用于滚动展示一段单行文本。 - -## 权限列表 - -无 - -## 子组件 - -无 - -## 接口 - -Marquee\(value: \{ start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string \}\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

start

-

boolean

-

是

-

-

-

控制是否进入播放状态。

-

step

-

number

-

否

-

6

-

滚动动画文本滚动步长。

-

loop

-

number

-

否

-

-1

-

设置重复滚动的次数，小于等于零时无限循环。

-

fromStart

-

boolean

-

否

-

true

-

设置文本从头开始滚动或反向滚动。

-

src

-

string

-

是

-

-

-

需要滚动的文本。

-
- - -## 事件 - - - - - - - - - - - - - - - -

名称

-

功能描述

-

onStart(callback: () => void)

-

开始滚动时触发回调。

-

onBounce(callback: () => void)

-

滚动到底时触发回调。

-

onFinish(callback: () => void)

-

滚动完成时触发回调。

-
- -## 示例 - -``` -@Entry -@Component -struct MarqueeExample { - @State start: boolean = false - @State fromStart: boolean = true - @State step: number = 50 - @State loop: number = 3 - @State src: string = "Running Marquee starts rolling" - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Marquee({ - start: this.start, - step: this.step, - loop: this.loop, - fromStart: this.fromStart, - src: this.src - }) - .fontColor(Color.White) - .fontSize(50) - .allowScale(false) - .fontWeight(FontWeight.Bold) - .backgroundColor(Color.Black) - .margin({bottom:40}) - .onStart(() => { - console.log('Marquee animation complete onStart') - }) - .onBounce(() => { - console.log('Marquee animation complete onBounce') - }) - .onFinish(() => { - console.log('Marquee animation complete onFinish') - }) - Button('start') - .onClick(() => { - this.start = true - }) - .width(200) - .height(60) - .margin({bottom:20}) - } - .width('100%') - .height('100%') - } -} -``` - -![](figures/GIF-1.gif) - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md new file mode 100644 index 0000000000000000000000000000000000000000..aaaffec88d0661ddd173b180dd9e9d7e76126816 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md @@ -0,0 +1,219 @@ +# Navigation + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单。 + + +## 权限列表 + +无 + + +## 子组件 + +可以包含子组件。 + + +## 接口 + +Navigation() + +创建可以根据属性设置，自动展示导航栏、标题、工具栏的组件。 + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| title | string \| [CustomBuilder](../../ui/ts-types.md#custombuilder类型8+)8+ | - | 页面标题。 | +| subtitle | string | - | 页面副标题。 | +| menus | Array8+ | - | 页面右上角菜单。 | +| titleMode | NavigationTitleMode | NavigationTitleMode.Free | 页面标题栏显示模式。 | +| toolBar | {
items:[
Object
] }
\| [CustomBuilder](../../ui/ts-types.md#custombuilder类型8+)8+ | - | 设置工具栏内容。
items: 工具栏所有项。 | +| hideToolBar | boolean | false | 设置隐藏/显示工具栏：
true: 隐藏工具栏。
false: 显示工具栏。 | +| hideTitleBar | boolean | false | 隐藏标题栏。 | +| hideBackButton | boolean | false | 隐藏返回键。 | + +- NavigationMenuItem类型接口说明 + | 名称 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | value | string | 是 | - | 菜单栏单个选项的显示文本。 | + | icon | string | 否 | - | 菜单栏单个选项的图标资源路径。 | + | action | () => void | 否 | - | 当前选项被选中的事件回调。 | + +- Object类型接口说明 + | 名称 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | value | string | 是 | - | 工具栏单个选项的显示文本。 | + | icon | string | 否 | - | 工具栏单个选项的图标资源路径。 | + | action | () => void | 否 | - | 当前选项被选中的事件回调。 | + +- NavigationTitleMode枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 | + | Mini | 固定为小标题模式（图标+主副标题）。 | + | Full | 固定为大标题模式（主副标题）。 | + + > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** + > 目前可滚动组件只支持List。 + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | +| onTitleModeChanged(callback: (titleMode: NavigationTitleMode) => void) | 当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 | + + +## 示例 + +``` +// Example 01 +@Entry +@Component +struct NavigationExample { + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + @State hideBar: boolean = true + + @Builder NavigationTitle() { + Column() { + Text('title') + .width(80) + .height(60) + .fontColor(Color.Blue) + .fontSize(30) + } + .onClick(() => { + console.log("title") + }) + } + + @Builder NavigationMenus() { + Row() { + Image('images/add.png') + .width(25) + .height(25) + Image('comment/more.png') + .width(25) + .height(25) + .margin({ left: 30 }) + }.width(100) + } + + build() { + Column() { + Navigation() { + Search({ value: '', placeholder: "" }).width('85%').margin(26) + List({ space: 5, initialIndex: 0 }) { + ForEach(this.arr, (item) => { + ListItem() { + Text('' + item) + .width('90%') + .height(80) + .backgroundColor('#3366CC') + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + }.editable(true) + }, item => item) + } + .listDirection(Axis.Vertical) + .height(300) + .margin({ top: 10, left: 18 }) + .width('100%') + + Button(this.hideBar ? "tool bar" : "hide bar") + .onClick(() => { + this.hideBar = !this.hideBar + }) + .margin({ left: 135, top: 60 }) + } + .title(this.NavigationTitle) + .subTitle('subtitle') + .menus(this.NavigationMenus) + .titleMode(NavigationTitleMode.Free) + .hideTitleBar(false) + .hideBackButton(false) + .onTitleModeChanged((titleModel: NavigationTitleMode) => { + console.log('titleMode') + }) + .toolBar({ items: [ + { value: 'app', icon: 'images/grid.svg', action: () => { + console.log("app") + } }, + { value: 'add', icon: 'images/add.svg', action: () => { + console.log("add") + } }, + { value: 'collect', icon: 'images/collect.svg', action: () => { + console.log("collect") + } }] }) + .hideToolBar(this.hideBar) + } + } +} +``` + +![zh-cn_image_0000001237616085](figures/zh-cn_image_0000001237616085.gif) + +``` +// Example 02 +@Entry +@Component +struct ToolbarBuilderExample { + @State currentIndex: number = 0 + @State Build: Array = [ + { + icon: $r('app.media.ic_public_add'), + icon_after: $r('app.media.ic_public_addcolor'), + text: 'add', + num: 0 + }, + { + icon: $r('app.media.ic_public_app'), + icon_after: $r('app.media.ic_public_appcolor'), + text: 'app', + num: 1 + }, + { + icon: $r('app.media.ic_public_collect'), + icon_after: $r('app.media.ic_public_collectcolor'), + text: 'collect', + num: 2 + } + ] + + @Builder NavigationToolbar() { + Row() { + ForEach(this.Build, item => { + Column() { + Image(this.currentIndex == item.num ? item.icon_after : item.icon) + .width(25) + .height(25) + Text(item.text) + .fontColor(this.currentIndex == item.num ? "#ff7500" : "#000000") + } + .onClick(() => { + this.currentIndex = item.num + }) + .margin({ left: 70 }) + }) + } + } + + build() { + Column() { + Navigation() { + Flex() { + } + } + .toolBar(this.NavigationToolbar) + } + } +} +``` + +![zh-cn_image_0000001192655288](figures/zh-cn_image_0000001192655288.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md index 3eeff7306216394cb00baaea76a7d6e5f7456138..626f8bae09c0d2ba6d06e1b05874dae3a748c06c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md @@ -1,143 +1,97 @@ -# Progress +# Progress + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 进度条，用于显示内容加载或操作处理进度。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口说明 - -Progress\(value: \{value: number, total?: number, style?: ProgressStyle\}\) - -创建指定进度的进度条。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

value

-

number

-

是

-

-

-

指定当前进度值。

-

total

-

number

-

否

-

100

-

指定进度总长。

-

style

-

ProgressStyle

-

否

-

Linear

-

指定进度条样式。

-
- - -- ProgressStyle枚举说明 - - - - - - - - - - -

名称

-

描述

-

Linear

-

线性进度条样式。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

value

-

number

-

-

-

设置当前进度值。

-

color

-

Color

-

-

-

设置进度条前景色。

-
- -## 示例 + +## 接口说明 + +Progress(value: {value: number, total?: number, style?: ProgressStyle}) + +创建进度组件，用于显示内容加载或操作处理进度。 + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | value | number | 是 | - | 指定当前进度值。 | + | total | number | 否 | 100 | 指定进度总长。 | + | style | ProgressStyle | 否 | ProgressStyle.Linear | 指定进度条样式。 | + + +- ProgressStyle枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Linear | 线性样式。 | + | Ring8+ | 环形无刻度样式，环形圆环逐渐填充完成过程。 | + | Eclipse | 圆形样式，展现类似月圆月缺的进度展示效果，从月牙逐渐到满月的这个过程代表了下载的进度。 | + | ScaleRing8+ | 环形有刻度样式，类似时钟刻度形式加载进度。 | + | Capsule8+ | 胶囊样式，头尾两端处，进度条由弧形变成直线和直线变成弧形的过程；中段处，进度条正常往右走的过程。 | + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| value | number | - | 设置当前进度值。 | +| color | Color | - | 设置进度条前景色。 | +| circularStyle8+ | {
strokeWidth？: Length,
scaleCount？: number,
scaleWidth？: Length
} | - | 定义style为ProgressStyle.ScaleRing时的样式，包括：宽度，总刻度数，刻度粗细。
strokeWidth: 设置环形进度条宽度。
scaleCount: 设置环形进度条总刻度数。
scaleWidth: 设置环形进度条刻度粗细。
刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。 | + + +## 示例 ``` @Entry @Component struct ProgressExample { build() { - Column({ space: 5 }) { + Column({ space: 15 }) { Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') Progress({ value: 10, style: ProgressStyle.Linear }).width(200) - - Text('Linear Progress Color').fontSize(9).fontColor(0xCCCCCC).width('90%') - Progress({ value: 20, total: 150, style: ProgressStyle.Linear }).color(Color.Red).value(50).width(200) - }.width('100%').margin({ top: 5 }) + Progress({ value: 20, total: 150, style: ProgressStyle.Linear }).color(Color.Grey).value(50).width(200) + + Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row({ space: 40 }) { + Progress({ value: 10, style: ProgressStyle.Eclipse }).width(100) + Progress({ value: 20, total: 150, style: ProgressStyle.Eclipse }).color(Color.Grey).value(50).width(100) + } + + Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row({ space: 40 }) { + Progress({ value: 10, style: ProgressStyle.ScaleRing }).width(100) + Progress({ value: 20, total: 150, style: ProgressStyle.ScaleRing }) + .color(Color.Grey).value(50).width(100) + .circularStyle({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 }) + } + + Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row({ space: 40 }) { + Progress({ value: 10, style: ProgressStyle.Ring }).width(100) + Progress({ value: 20, total: 150, style: ProgressStyle.Ring }) + .color(Color.Grey).value(50).width(100) + .circularStyle({ strokeWidth: 20, scaleCount: 30, scaleWidth: 20 }) + } + + Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row({ space: 40 }) { + Progress({ value: 10, style: ProgressStyle.Capsule }).width(100) + Progress({ value: 20, total: 150, style: ProgressStyle.Capsule }).color(Color.Grey).value(50).width(100) + } + }.width('100%').margin({ top: 30 }) } } ``` -![](figures/progress.png) - +![zh-cn_image_0000001198839004](figures/zh-cn_image_0000001198839004.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md index 72456b91c63855e5553b446346c003aca8422df6..12c56374fd3726415f7d99046bdd74f2bd931b17 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md @@ -1,80 +1,45 @@ -# QRCode +# QRCode + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 显示二维码信息。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 - -QRCode\(value: string\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

value

-

string

-

是

-

-

-

二维码内容字符串。

-
- - -## 属性 - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

color

-

Color

-

Black

-

设置二维码颜色。

-
- -## 事件 + +## 接口 + +QRCode(value: string) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | value | string | 是 | - | 二维码内容字符串。 | + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| color | Color | Black | 设置二维码颜色。 | + + +## 事件 通用事件仅支持点击事件。 -## 示例 + +## 示例 ``` @Entry @@ -94,5 +59,4 @@ struct QRCodeExample { } ``` -![](figures/qrcode.png) - +![zh-cn_image_0000001219662669](figures/zh-cn_image_0000001219662669.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md index c9cfb76932c3741f8f13ed73dfc125ffdde56cd3..08f29cbf786e3ea5b61224086ca1ab2fefe738a2 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md @@ -1,127 +1,50 @@ -# Rating +# Rating + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 评分条组件。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口说明 - -Rating\(options?: \{ rating: number, indicator?: boolean \}\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

rating

-

number

-

是

-

0

-

设置并接收评分值。

-

indicator

-

boolean

-

否

-

false

-

仅作为指示器使用，不可操作。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

stars

-

number

-

5

-

设置评星总数。

-

stepSize

-

number

-

0.5

-

操作评级的步长。

-

starStyle

-

{

-

backgroundUri: string,

-

foregroundUri: string,

-

secondaryUri?: string

-

}

-

-

-

backgroundSrc：未选中的星级的图片链接，可由用户自定义或使用系统默认图片，仅支持本地。

-

foregroundSrc：选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。

-

secondarySrc：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。

-
- -## 事件 - - - - - - - - - -

名称

-

功能描述

-

onChange(callback:(value: number) => void)

-

操作评分条的评星发生改变时触发该回调。

-
- -## 示例 + +## 接口说明 + +Rating(options?: { rating: number, indicator?: boolean }) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | rating | number | 是 | 0 | 设置并接收评分值。 | + | indicator | boolean | 否 | false | 仅作为指示器使用，不可操作。 | + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| stars | number | 5 | 设置评星总数。 | +| stepSize | number | 0.5 | 操作评级的步长。 | +| starStyle | {
backgroundUri: string,
foregroundUri: string,
secondaryUri?: string
} | - | backgroundSrc：未选中的星级的图片链接，可由用户自定义或使用系统默认图片，仅支持本地。
foregroundSrc：选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。
secondarySrc：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onChange(callback:(value: number) => void) | 操作评分条的评星发生改变时触发该回调。 | + + +## 示例 ``` @Entry @@ -144,5 +67,4 @@ struct RatingExample { } ``` -![](figures/Rating.gif) - +![zh-cn_image_0000001219662659](figures/zh-cn_image_0000001219662659.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md new file mode 100644 index 0000000000000000000000000000000000000000..0b59d6a846540b804705777e32fed355d64eed37 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md @@ -0,0 +1,94 @@ +# ScrollBar + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。 + + +## 权限列表 + +无 + + +## 子组件 + +可以包含单个子组件。 + + +## 接口 + +ScrollBar(value: ScrollBarOption) + +- ScrollBarOption的参数描述 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | scroller | [Scroller](ts-container-scroll.md#scroller) | 是 | - | 可滚动组件的控制器。用于与可滚动组件进行绑定。 | + | direction | ScrollBarDirection | 否 | ScrollBarDirection.Vertical | 滚动条的方向，控制可滚动组件对应方向的滚动。 | + | state | BarState | 否 | BarState.Auto | 滚动条状态。 | + + > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** + > ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。 + > + > 滚动条组件与可滚动组件通过Scroller进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。 + +- ScrollBarDirection枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Vertical | 纵向滚动条。 | + | Horizontal | 横向滚动条。 | + +- BarState枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | On | 常驻显示。 | + | Off | 不显示。 | + | Auto | 按需显示(触摸时显示，无操作2s后消失)。 | + + +## 示例 + +``` +@Entry +@Component +struct ScrollBarExample { + private scroller: Scroller = new Scroller() + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + + build() { + Column() { + Stack({ alignContent: Alignment.End }) { + Scroll(this.scroller) { + Flex({ direction: FlexDirection.Column }) { + ForEach(this.arr, (item) => { + Row() { + Text(item.toString()) + .width('90%') + .height(100) + .backgroundColor('#3366CC') + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ top: 5 }) + } + }, item => item) + }.margin({ left: 52 }) + } + .scrollBar(BarState.Off) + .scrollable(ScrollDirection.Vertical) + ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) { + Text() + .width(30) + .height(100) + .borderRadius(10) + .backgroundColor('#C0C0C0') + }.width(30).backgroundColor('#ededed') + } + } + } +} +``` + + +![zh-cn_image_0000001232775585](figures/zh-cn_image_0000001232775585.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md index 8abad1b866794455905430806916efc749d5b90b..b6c9f6927ae5d374901c8668d70e174a73d843c7 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md @@ -1,190 +1,52 @@ -# Select +# Select ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![](public_sys-resources/icon-note.gif) **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 提供下拉选择菜单，可以让用户在多个选项之间选择。 -## 权限列表 +## 权限列表 无 -## 子组件 +## 子组件 无 -## 接口 - -Select(options: Array<SelectOption>) - -- `SelectOption`参数 - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

value

-

ResourceStr

-

是

-

-

-

下拉选项内容。

-

icon

-

ResourceStr

-

否

-

-

-

下拉选项图片。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

selected

-

number

-

-

-

设置下拉菜单初始选择项的索引，第一项的索引为0。

-

value

-

string

-

-

-

设置下拉按钮本身的文本显示。

-

font

-

Font

-

-

-

设置下拉按钮本身的文本样式：

-

fontColor

-

ResourceColor

-

-

-

设置下拉按钮本身的文本颜色。

-

selectedOptionBgColor

-

ResourceColor

-

-

-

设置下拉菜单选中项的背景色。

-

selectedOptionFont

-

Font

-

-

-

设置下拉菜单选中项的文本样式：

-

selectedOptionFontColor

-

ResourceColor

-

-

-

设置下拉菜单选中项的文本颜色。

-

optionBgColor

-

ResourceColor

-

-

-

设置下拉菜单项的背景色。

-

optionFont

-

Font

-

-

-

设置下拉菜单项的文本样式：

-

optionFontColor

-

ResourceColor

-

-

-

设置下拉菜单项的文本颜色。

-
- - -## 事件 - - - - - - - - - -

名称

-

功能描述

-

onSelected(callback: (index: number, value?:string) => void）

-

下拉菜单选中某一项的回调。

-

index：选中项的索引。

-

value：选中项的值。

-
- -## 示例 +## 接口 -``` +Select(options: Array) + +- `SelectOption`参数 + + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | ------ | ----------------------------------------------- | ---- | ------ | -------------- | + | value | [ResourceStr](../../ui/ts-types.md#ResourceStr) | 是 | - | 下拉选项内容。 | + | icon | [ResourceStr](../../ui/ts-types.md#ResourceStr) | 否 | - | 下拉选项图片。 | + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| ----------------------- | --------------------------------------------------- | ------ | ----------------------------------------------- | +| selected | number | - | 设置下拉菜单初始选择项的索引，第一项的索引为0。 | +| value | string | - | 设置下拉按钮本身的文本显示。 | +| font | [Font](../../ui/ts-types.md#Font) | - | 设置下拉按钮本身的文本样式： | +| fontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | 设置下拉按钮本身的文本颜色。 | +| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | 设置下拉菜单选中项的背景色。 | +| selectedOptionFont | [Font](../../ui/ts-types.md#Font) | - | 设置下拉菜单选中项的文本样式： | +| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | 设置下拉菜单选中项的文本颜色。 | +| optionBgColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | 设置下拉菜单项的背景色。 | +| optionFont | [Font](../../ui/ts-types.md#Font) | - | 设置下拉菜单项的文本样式： | +| optionFontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | 设置下拉菜单项的文本颜色。 | +## 事件 + +| 名称 | 功能描述 | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onSelected(callback: (index: number, value?:string) => void） | 下拉菜单选中某一项的回调。index：选中项的索引。value：选中项的值。 | + +## 示例 + +``` @Entry @Component struct SliderExample { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md index ca499e7c50458ee8ecda7688e1d3e4cd9ab87644..abb19a1baabfdf1c5ae429a4367702eedb5c5ef2 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md @@ -1,237 +1,74 @@ -# Slider +# Slider + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 滑动条组件，用来快速调节设置值，如音量、亮度等。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 - -Slider\(value:\{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis\}\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

value

-

number

-

否

-

0

-

当前进度值。

-

min

-

number

-

否

-

0

-

设置最小值。

-

max

-

number

-

否

-

100

-

设置最大值。

-

step

-

number

-

否

-

1

-

设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。

-

style

-

SliderStyle

-

否

-

SliderStyle.OutSet

-

设置Slider的滑块样式。

-

direction8+

-

Axis

-

否

-

Axis.Horizontal

-

设置滑动条滑动方向为水平或竖直方向。

-
- -- SliderStyle枚举说明 - - - - - - - - - - - - -

名称

-

描述

-

OutSet

-

滑块在滑轨上。

-

InSet

-

滑块在滑轨内。

-
- - -## 属性 + +## 接口 + +Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | value | number | 否 | 0 | 当前进度值。 | + | min | number | 否 | 0 | 设置最小值。 | + | max | number | 否 | 100 | 设置最大值。 | + | step | number | 否 | 1 | 设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。 | + | style | SliderStyle | 否 | SliderStyle.OutSet | 设置Slider的滑块样式。 | + | direction8+ | [Axis](ts-appendix-enums.md#axis枚举说明) | 否 | Axis.Horizontal | 设置滑动条滑动方向为水平或竖直方向。 | + | reverse8+ | boolean | 否 | false | 设置滑动条取值范围是否反向。 | + +- SliderStyle枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | OutSet | 滑块在滑轨上。 | + | InSet | 滑块在滑轨内。 | + + +## 属性 不支持触摸热区设置。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

blockColor

-

Color

-

-

-

设置滑块的颜色。

-

trackColor

-

Color

-

-

-

设置滑轨的背景颜色。

-

selectedColor

-

Color

-

-

-

设置滑轨的已滑动颜色。

-

showSteps

-

boolean

-

false

-

设置当前是否显示步长刻度值。

-

showTips

-

boolean

-

false

-

设置滑动时是否显示气泡提示百分比。

-
- -## 事件 +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| blockColor | Color | - | 设置滑块的颜色。 | +| trackColor | Color | - | 设置滑轨的背景颜色。 | +| selectedColor | Color | - | 设置滑轨的已滑动颜色。 | +| showSteps | boolean | false | 设置当前是否显示步长刻度值。 | +| showTips | boolean | false | 设置滑动时是否显示气泡提示百分比。 | + + +## 事件 通用事件仅支持：OnAppear，OnDisAppear。 - - - - - - - - -

名称

-

功能描述

-

onChange(callback: (value: number, mode: SliderChangeMode) => void）

-

Slider滑动时触发事件回调。

-

value：当前进度值。

-

mode：拖动状态。

-
- -- SliderChangeMode枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

Begin

-

用户开始拖动滑块。

-

Moving

-

用户拖动滑块中。

-

End

-

用户结束拖动滑块。

-
- - -## 示例 +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onChange(callback: (value: number, mode: SliderChangeMode) => void） | Slider滑动时触发事件回调。
value：当前进度值。
mode：拖动状态。 | + +- SliderChangeMode枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Begin | 用户开始拖动滑块。 | + | Moving | 用户拖动滑块中。 | + | End | 用户结束拖动滑块。 | + + +## 示例 ``` @Entry @@ -340,5 +177,4 @@ struct SliderExample { } ``` -![](figures/slider.gif) - +![zh-cn_image_0000001179613854](figures/zh-cn_image_0000001179613854.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md index 4549c5fb494c524cec0062ae9f9916cade4e6d5f..fc850b8b669cfdc6316f811b838465d6df2b6efb 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md @@ -1,99 +1,51 @@ -# Span +# Span + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 文本段落，只能作为Text子组件，呈现一段文本信息。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 - -Span\(content: string\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

content

-

string

-

是

-

-

-

文本内容。

-
- - -## 属性 + +## 接口 + +Span(content: string) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | content | string | 是 | - | 文本内容。 | + + +## 属性 通用属性方法仅支持通用文本样式，不支持触摸热区设置。 - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

decoration

-

{

-

type: TextDecorationType,

-

color?: Color

-

}

-

{

-

type: TextDecorationType.None

-

}

-

设置文本装饰线样式及其颜色。

-

textCase

-

TextCase

-

Normal

-

设置文本大小写。

-
- -## 事件 +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype枚举说明),
color?: Color
} | {
type: TextDecorationType.None
} | 设置文本装饰线样式及其颜色。 | +| textCase | [TextCase](ts-appendix-enums.md#textcase枚举说明) | Normal | 设置文本大小写。 | + + +## 事件 通用事件仅支持点击事件。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->由于Span组件无尺寸信息，因此点击事件返回的ClickEvent对象的target属性无效。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 由于Span组件无尺寸信息，因此点击事件返回的ClickEvent对象的target属性无效。 + -## 示例 +## 示例 ``` @Entry @@ -132,5 +84,4 @@ struct SpanExample { } ``` -![](figures/Span.gif) - +![zh-cn_image_0000001219982709](figures/zh-cn_image_0000001219982709.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md index 69adcaf5dfb8ca1774bf18ae3bc6f0be3bf216b5..a1c18769817fc29ec6a441e286fcf804d8c8a1a0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md @@ -1,252 +1,78 @@ -# Text +# Text ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -文本，用于呈现一段信息。 - -## 权限列表 - -无 - -## 子组件 -可以包含[Span](ts-basic-components-span.md)子组件。 - -## 接口 +文本，用于呈现一段信息。 -Text\(content?: string\) -- 参数 +## 权限列表 - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

content

-

string

-

否

-

''

-

文本内容，包含子组件Span时不生效，显示Span内容。

-
+无 -## 属性 +## 子组件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

textAlign

-

TextAlign

-

Start

-

设置多行文本的文本对齐方式。

-

textOverflow

-

{overflow: TextOverflow}

-

{overflow: TextOverflow.Clip}

-

设置文本超长时的显示方式。

-

maxLines

-

number

-

Infinity

-

设置文本的最大行数。

-

lineHeight

-

Length

-

-

-

设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。

-

decoration

-

{

-

type: TextDecorationType,

-

color?: Color

-

}

-

{

-

type: TextDecorationType.None,

-

color：Color.Black

-

}

-

设置文本装饰线样式及其颜色。

-

baselineOffset

-

Length

-

-

-

设置文本基线的偏移量。

-

textCase

-

TextCase

-

Normal

-

设置文本大小写。

-
+可以包含[Span](ts-basic-components-span.md)子组件。 -- TextAlign枚举说明 - - - - - - - - - - - - - - -

名称

-

描述

-

Center

-

文本居中对齐。

-

Start

-

根据文字书写相同的方向对齐。

-

End

-

根据文字书写相反的方向对齐。

-
+## 接口 +Text(content?: string) -- TextOverflow枚举说明 +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | content | string | 否 | '' | 文本内容，包含子组件Span时不生效，显示Span内容。 | - - - - - - - - - - - - - - -

名称

-

描述

-

Clip

-

文本超长时进行裁剪显示。

-

Ellipsis

-

文本超长时显示不下的文本用省略号代替。

-

None

-

文本超长时不进行裁剪。

-
+## 属性 -- TextDecorationType枚举说明 +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| textAlign | TextAlign | TextAlign.Start | 设置多行文本的文本对齐方式。 | +| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | 设置文本超长时的显示方式。 | +| maxLines | number | Infinity | 设置文本的最大行数。 | +| lineHeight | Length | - | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 | +| decoration | {
type: TextDecorationType,
color?: Color
} | {
type: TextDecorationType.None,
color：Color.Black
} | 设置文本装饰线样式及其颜色。 | +| baselineOffset | Length | - | 设置文本基线的偏移量。 | +| textCase | TextCase | TextCase.Normal | 设置文本大小写。 | - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Underline

-

文字下划线修饰。

-

LineThrough

-

穿过文本的修饰线。

-

Overline

-

文字上划线修饰。

-

None

-

不使用文本装饰线。

-
+- TextAlign枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Center | 文本居中对齐。 | + | Start | 根据文字书写相同的方向对齐。 | + | End | 根据文字书写相反的方向对齐。 | +- TextOverflow枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Clip | 文本超长时进行裁剪显示。 | + | Ellipsis | 文本超长时显示不下的文本用省略号代替。 | + | None | 文本超长时不进行裁剪。 | -- TextCase枚举说明 +- TextDecorationType枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Underline | 文字下划线修饰。 | + | LineThrough | 穿过文本的修饰线。 | + | Overline | 文字上划线修饰。 | + | None | 不使用文本装饰线。 | - - - - - - - - - - - - - - -

名称

-

描述

-

Normal

-

保持文本原有大小写。

-

LowerCase

-

文本采用全小写。

-

UpperCase

-

文本采用全大写。

-
+- TextCase枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Normal | 保持文本原有大小写。 | + | LowerCase | 文本采用全小写。 | + | UpperCase | 文本采用全大写。 | +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 不支持Text内同时存在文本内容和Span子组件。（如果同时存在，只显示Span内的内容)。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->不支持Text内同时存在文本内容和Span子组件。（如果同时存在，只显示Span内的内容\)。 -## 示例 +## 示例 ``` @Entry @@ -284,7 +110,7 @@ struct TextExample1 { } ``` -![](figures/Text1.gif) +![zh-cn_image_0000001219864155](figures/zh-cn_image_0000001219864155.gif) ``` @Entry @@ -326,5 +152,4 @@ struct TextExample2 { } ``` -![](figures/Text2.gif) - +![zh-cn_image_0000001174422918](figures/zh-cn_image_0000001174422918.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md index 5c03119227bc0987d66791546aa6754913da6f4c..85bfb03fea497abcad546a0e327fbbc6f04ad110 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md @@ -1,165 +1,85 @@ -# TextArea +# TextArea + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 提供多行文本输入组件。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 - -TextArea\(value?: \{ placeholder?: string \}\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

placeholder

-

string

-

否

-

-

-

无输入时的提示文本。

-
- - -## 属性 + +## 接口 + +TextArea(value?:{placeholder?: string controller?: TextAreaController}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | placeholder | string | 否 | - | 无输入时的提示文本。 | + | controller8+ | [TextAreaController](#textareacontroller8+

名称

- -

参数类型

- -

默认值

- -

描述

- - - -

placeholderColor

- -

Color

- -

-

- -

设置placeholder文本颜色。

- - -

placeholderFont

- -

{

-

size?: number,

-

weight?:number | FontWeight,

-

family?: string,

-

style?: FontStyle

-

}

- -

-

- -

设置placeholder文本样式：

-
  • size: 设置文本尺寸，Length为number类型时，使用fp单位。
  • weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
  • family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
  • style: 设置文本的字体样式。
- - -

textAlign

- -

TextAlign

- -

TextAlign.Start

- -

设置文本水平对齐方式。

- - -

caretColor

- -

Color

- -

-

- -

设置输入框光标颜色。

- - - - - -- TextAlign枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

Start

-

水平对齐首部。

-

Center

-

水平居中对齐。

-

End

-

水平对齐尾部。

-
- - -## 事件 - - - - - - - - - - -

名称

-

功能描述

-

onChange(callback: (value: string) => void)

-

输入发生变化时，触发回调。

-
- -## 示例 +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| placeholderColor | Color | - | 设置placeholder文本颜色。 | +| placeholderFont | {
size?: number,
weight?:number \| [FontWeight](ts-universal-attributes-text-style.md)，
family?: string,
style?: [FontStyle](ts-universal-attributes-text-style.md)
} | - | 设置placeholder文本样式：
- size: 设置文本尺寸，Length为number类型时，使用fp单位。
- weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
- family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效，例如：'Arial, sans-serif'。
- style: 设置文本的字体样式。 | +| textAlign | TextAlign | Start | 设置文本水平对齐方式。 | +| caretColor | Color | - | 设置输入框光标颜色。 | +| inputFilter8+ | {
value: [ResourceStr](../../ui/ts-types.md#resourcestr类型8-)8+,
error?: (value: string)
} | - | 通过正则表达式设置输入过滤器。满足表达式的输入允许显示，不满足的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，不支持过滤8到10位的强密码。
- value：设置正则表达式。
- error：正则匹配失败时，返回被忽略的内容。 | + +- TextAlign枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Start | 水平对齐首部。 | + | Center | 水平居中对齐。 | + | End | 水平对齐尾部。 | + + +### TextAreaController8+ + +TextArea组件的控制器，通过它操作TextArea组件。 + +| 接口名称 | 功能描述 | +| -------- | -------- | +| caretPosition(value: number): void | 设置输入光标的位置。
value：从字符串开始到光标所在位置的字符长度。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onChange(callback: (value: string) => void) | 输入发生变化时，触发回调。 | +| onCopy8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发回调。
value：复制的文本内容。 | +| onCut8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发回调。
value：剪切的文本内容。 | +| onPaste8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发回调。
value：粘贴的文本内容。 | + + +## 示例 + + +### 多行文本输入 ``` @Entry @Component -struct TextAreaExample { +struct TextAreaExample2 { @State text: string = '' - build() { Column() { - TextArea({ placeholder: 'input your word' }) + TextArea({ placeholder: 'input your word'}) .placeholderColor("rgb(0,0,225)") .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic }) .textAlign(TextAlign.Center) @@ -170,6 +90,9 @@ struct TextAreaExample { .fontFamily("sans-serif") .fontStyle(FontStyle.Normal) .fontColor(Color.Red) + .inputFilter('^[\u4E00-\u9FA5A-Za-z0-9_]+$',(value: string) => { + console.info("hyb"+value) + }) .onChange((value: string) => { this.text = value }) @@ -179,5 +102,26 @@ struct TextAreaExample { } ``` -![](figures/textarea1.gif) +![zh-cn_image_0000001251087311](figures/zh-cn_image_0000001251087311.gif) + + +### 设置光标 + +``` +@Entry +@Component +struct TextAreaTest { + controller: TextAreaController = new TextAreaController() + build() { + Column() { + TextArea({ placeholder: 'input your word',controller:this.controller }) + Button('caretPosition') + .onClick(() => { + this.controller.caretPosition(4) + }) + } + } +} +``` +![zh-cn_image_0000001252653499](figures/zh-cn_image_0000001252653499.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md index a6173f048a929b12a1f612333995786ba2c962ad..a6e941884d9fca0359992139cb7454fa8649bef9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md @@ -1,107 +1,43 @@ -# TextClock +# TextClock ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![](public_sys-resources/icon-note.gif) **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 TextClock主要用于显示系统时间，支持不同时区的时间显示，时间显示最高精度到秒级。 -## 权限列表 +## 权限列表 无 -## 子组件 +## 子组件 无 -## 接口 +## 接口 TextClock(options?: {hourswest?: number}) - 参数 - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

hourwest

-

number

-

否

-

系统时间所在的时区

-

设置时区信息，时区范围为[-14, 12]，其中负值表示东时区，比如东八区为-8，浮点数也会进行相应的换算（30分钟/0.5时区）；理论上时区范围是[-12,+12]，但是一些国家横跨国际日界线，因此用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

format

-

string

-

'hhmmss'

-

设置显示时间格式，如“yyyy/mm/dd”、“yyyy-mm-dd”等。支持的时间格式化字符串：yyyy（年份），mm（英文月份简写），mmm（英文月份简写），mmmm（英文月份全称），dd（英文星期简写），ddd（英文星期简写），dddd（英文星期全称），HH（24小时制），hh（12小时制），MM/mm（分钟），SS/ss（秒）。

-

status

-

boolean

-

-

-

设置文本时钟的启动和停止。

    -
  • true表示文本时钟是启动状态。
  • false表示文本时钟是停止状态。
    • -

-
- - - -## 事件 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | ---- | ------------------ | ------------------------------------------------------------ | + | hourwest | number | 否 | 系统时间所在的时区 | 设置时区信息，时区范围为[-14, 12]，其中负值表示东时区，比如东八区为-8，浮点数也会进行相应的换算（30分钟/0.5时区）；理论上时区范围是[-12,+12]，但是一些国家横跨国际日界线，因此用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间。 | -支持以下通用事件：onClick，onTouch，onKeyEvent，onDeleteEvent，onAppear，onDisAppear +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| ------ | -------- | -------- | ------------------------------------------------------------ | +| format | string | 'hhmmss' | 设置显示时间格式，如“yyyy/mm/dd”、“yyyy-mm-dd”等。支持的时间格式化字符串：yyyy（年份），mm（英文月份简写），mmm（英文月份简写），mmmm（英文月份全称），dd（英文星期简写），ddd（英文星期简写），dddd（英文星期全称），HH（24小时制），hh（12小时制），MM/mm（分钟），SS/ss（秒）。 | +| status | boolean | - | 设置文本时钟的启动和停止。true表示文本时钟是启动状态。false表示文本时钟是停止状态。 | - - - - - - - - -

名称

-

功能描述

-

onDateChange(event: (value: number) => void)

-

提供时间变化回调，回调参数为Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数，该事件最小回调间隔为秒。

-
+## 事件 +支持以下通用事件：onClick，onTouch，onKeyEvent，onDeleteEvent，onAppear，onDisAppear -## 示例 +| 名称 | 功能描述 | +| -------------------------------------------- | ------------------------------------------------------------ | +| onDateChange(event: (value: number) => void) | 提供时间变化回调，回调参数为Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数，该事件最小回调间隔为秒。 | + +## 示例 ``` @Entry @@ -133,4 +69,3 @@ struct TextClockExmaple { ``` ![](figures/textclock.png) - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index bedd6d3f8ddd86440ef4fe037c6d4961c07637a5..65c70aaa785cdc97048a5b83349e5372b227d32b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -1,263 +1,141 @@ -# TextInput +# TextInput + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 提供单行文本输入组件。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 - -TextInput\(value?: \{ placeholder?: string \}\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

placeholder

-

string

-

否

-

-

-

无输入时的提示文本。

-
- - -## 属性 + +## 接口 + +TextInput(value?:{placeholder?: string controller?: TextInputController}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | placeholder | string | 否 | - | 无输入时的提示文本。 | + | controller8+ | [TextInputController](#textinputcontroller8+) | 否 | - | 设置TextInput控制器。 | + + +## 属性 除支持[通用属性](ts-universal-attributes.md)外，还支持以下属性： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

type

-

InputType

-

InputType.Normal

-

设置输入框类型。

-

placeholderColor

-

Color

-

-

-

设置placeholder颜色。

-

placeholderFont

-

{

-

size?: Length,

-

weight?: number | FontWeight,

-

family?: string,

-

style?: FontStyle

-

}

-

-

-

设置placeholder文本样式：

-
  • size: 设置文本尺寸，Length为number类型时，使用fp单位。
  • weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
  • family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
  • style: 设置文本的字体样式。
-

enterKeyType

-

EnterKeyType

-

EnterKeyType.Done

-

设置输入法回车键类型。

-

caretColor

-

Color

-

-

-

设置输入框光标颜色。

-

maxLength

-

number

-

-

-

设置文本的最大输入字符数。

-
- -- EnterKeyType枚举说明 - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Go

-

显示Go文本。

-

Search

-

显示为搜索样式。

-

Send

-

显示为发送样式。

-

Next

-

显示为下一个样式。

-

Done

-

标准样式。

-
- - -- InputType枚举说明 - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Normal

-

基本输入模式。

-

Password

-

密码输入模式。

-

Email

-

e-mail地址输入模式。

-

Number

-

纯数字输入模式。

-
- - -## 事件 - - - - - - - - - - - - - - - -

名称

-

功能描述

-

onChange(value: string) => void

-

输入发生变化时，触发回调。

-

onSubmit(callback: (enterKey: EnterKeyType) => void)

-

回车键或者软键盘回车键触发该回调，参数为当前软键盘回车键类型。

-

onEditChanged(callback: (isEditing: boolean) => void)

-

输入状态变化时，触发回调。

-
- -## 示例 +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| type | InputType | InputType.Normal | 设置输入框类型。 | +| placeholderColor | Color | - | 设置placeholder颜色。 | +| placeholderFont | {
size?: Length,
weight?: number\|[FontWeight](ts-universal-attributes-text-style.md),
family?: string,
style?: [FontStyle](ts-universal-attributes-text-style.md)
} | - | 设置placeholder文本样式：
- size: 设置文本尺寸，Length为number类型时，使用fp单位。
- weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
- family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
- style: 设置文本的字体样式。 | +| enterKeyType | EnterKeyType | EnterKeyType.Done | 设置输入法回车键类型。 | +| caretColor | Color | - | 设置输入框光标颜色。 | +| maxLength8+ | number | - | 设置文本的最大输入字符数。 | +| inputFilter8+ | {
value: [ResourceStr](../../ui/ts-types.md#resourcestr类型8-)8+,
error?: (value: string)
} | - | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。
- value：设置正则表达式。
- error：正则匹配失败时，返回被忽略的内容。 | + +- EnterKeyType枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | EnterKeyType.Go | 显示Go文本。 | + | EnterKeyType.Search | 显示为搜索样式。 | + | EnterKeyType.Send | 显示为发送样式。 | + | EnterKeyType.Next | 显示为下一个样式。 | + | EnterKeyType.Done | 标准样式。 | + +- InputType枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | InputType.Normal | 基本输入模式。 | + | InputType.Password | 密码输入模式。 | + | InputType.Email | e-mail地址输入模式。 | + | InputType.Number | 纯数字输入模式。 | + + +### TextInputController8+ + +TextInput组件的控制器，通过它操作TextInput组件。 + +| 接口名称 | 功能描述 | +| -------- | -------- | +| caretPosition(value: number):void | 设置输入光标的位置。
value：从字符串开始到光标所在位置的字符长度。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onChange(value: string) => void | 输入发生变化时，触发回调。 | +| onSubmit(callback: (enterKey: EnterKeyType) => void) | 回车键或者软键盘回车键触发该回调，参数为当前软键盘回车键类型。 | +| onEditChanged(callback: (isEditing: boolean) => void) | 输入状态变化时，触发回调。 | +| onCopy8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发回调。
value：复制的文本内容。 | +| onCut8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发回调。
value：剪切的文本内容。 | +| onPaste8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发回调。
value：粘贴的文本内容。 | + + +## 示例 + + +### 单行文本输入 + +``` +@Entry +@Component +struct TextAreaExample2 { + @State text: string = '' + + build() { + Column() { + TextArea({ placeholder: 'input your word' }) + .placeholderColor("rgb(0,0,225)") + .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic }) + .textAlign(TextAlign.Center) + .caretColor(Color.Blue) + .height(50) + .fontSize(30) + .fontWeight(FontWeight.Bold) + .fontFamily("sans-serif") + .fontStyle(FontStyle.Normal) + .fontColor(Color.Red) + .onChange((value: string) => { + this.text = value + }) + Text(this.text).width('90%') + } + } +} +``` + + +![zh-cn_image_0000001252769643](figures/zh-cn_image_0000001252769643.gif) + + +### 设置光标 ``` @Entry @Component struct TextInputTest { @State text: string = '' - @State text1: string = '' - @State text2: string = '' + controller: TextInputController = new TextInputController() build() { - Column() { - TextInput({ placeholder: 'input your word' }) - .type(InputType.Normal) - .placeholderColor(Color.Blue) - .placeholderFont({ size: 40, weight: FontWeight.Normal, family: "sans-serif", style: FontStyle.Normal }) - .enterKeyType(EnterKeyType.Next) - .caretColor(Color.Green) - .height(60) - .fontSize(30) - .fontWeight(FontWeight.Bold) - .fontFamily("cursive") - .fontStyle(FontStyle.Italic) - .fontColor(Color.Red) - .maxLength(20) - .onChange((value: string) => { - this.text = value - }) - .onSubmit((enterKey) => { - this.text1 = 'onSubmit' - }) - .onEditChanged((isEditing) => { - this.text2 = 'onEditChanged' - }) - Text(this.text) - Text(this.text1) - Text(this.text2) + Column() { + TextInput({ placeholder: 'Please input your words.', controller:this.controller}) + Button('caretPosition') + .onClick(() => { + this.controller.caretPosition(4) + }) } } } ``` -![](figures/textinput1.gif) - +![zh-cn_image_0000001208256092](figures/zh-cn_image_0000001208256092.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md new file mode 100644 index 0000000000000000000000000000000000000000..8fb49248f247637d4ff2de89602849c3a2c7a5a5 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md @@ -0,0 +1,67 @@ +# TextPicker + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +文本类滑动选择器组件。 + + +## 权限列表 + +无 + + +## 子组件 + +无 + + +## 接口 + +TextPicker(value: {range: string[], selected?: number}) + +根据range指定的选择范围创建文本选择器。 + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | range | string[] | 是 | - | 选择器的数据选择范围。 | + | selected | number | 否 | 第一个元素 | 选中项在数组中的index值。 | + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| defaultPickerItemHeight | Length | - | 默认Picker内容项元素高度。 | + + +## 事件 + +| 名称 | 描述 | +| -------- | -------- | -------- | +| onChange(callback: (value: string, index: number) => void) | 滑动选中TextPicker文本内容后，触发该回调。
- value: 当前选中项的文本。
- index: 当前选中项的下标。 | + + +## 示例 + +``` +@Entry +@Component +struct TextPickerExample { + private select: number = 1 + private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4'] + + build() { + Column() { + TextPicker({range: this.fruits, selected: this.select}) + .onChange((value: string, index: number) => { + console.info('Picker item changed, value: ' + value + ', index: ' + index) + }) + } + } +} +``` + +![zh-cn_image_0000001219662657](figures/zh-cn_image_0000001219662657.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md new file mode 100644 index 0000000000000000000000000000000000000000..d4b2cac6b4fc143c2fd947cddd6b9d462def6e28 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md @@ -0,0 +1,99 @@ +# TextTimer + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +文本计时器组件，支持自定义时间格式。 + + +## 支持设备 + +| 手机 | 平板 | 智慧屏 | 智能穿戴 | 轻量级智能穿戴 | +| -------- | -------- | -------- | -------- | -------- | +| 支持 | 支持 | 不支持 | 不支持 | 不支持 | + + +## 权限列表 + +无 + + +## 子组件 + +无 + + +## 接口说明 + +TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTimerController }) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | isCountDown | boolean | 否 | false | 是否倒计时。 | + | count | number | 否 | 60000 | 倒计时时间（isCountDown为true时生效），单位为毫秒。
- count<=0时，使用默认值为倒计时初始值。
- count>0时，count值为倒计时初始值。 | + | controller | [TextTimerController](#texttimercontroller) | 否 | null | TextTimer控制器。 | + + +### TextTimerController + +TextTimer组件的控制器，用于控制文本计时器。 + +| 接口名称 | 功能描述 | +| -------- | -------- | +| start() | 计时开始。 | +| pause() | 计时暂停。 | +| reset() | 重置计时器。 | + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| format | string | 'hh:mm:ss.ms' | 自定义格式，需至少包含一个hh、mm、ss、ms中的关键字。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onTimer(callback: (utc: number, elapsedTime: number) => void) | 时间文本发生变化时触发。
utc：当前显示的时间，单位为毫秒。
elapsedTime：计时器经过的时间，单位为毫秒。 | + + +## 示例 + +``` +@Entry +@Component +struct TextTimerExample { + myTimerController: TextTimerController = new TextTimerController() + @State format: string = 'hh:mm:ss.ms' + + build() { + Column() { + TextTimer({controller: this.myTimerController}) + .format(this.format) + .fontColor(Color.Black) + .fontSize(this.textSize) + .onTimer((utc: number, elapsedTime: number) => { + console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime) + }) + Row() { + Button("start").onClick(() => { + this.myTimerController.start(); + }); + Button("pause").onClick(() => { + this.myTimerController.pause(); + }); + Button("reset").onClick(() => { + this.myTimerController.reset(); + }); + } + } + } +} +``` + + +![zh-cn_image_0000001251007721](figures/zh-cn_image_0000001251007721.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md index 5250d9065173652651cc1aa00953d093bd78f6c8..5dee22c25d1a8e10e7bd280203115ba454d2778b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md @@ -1,141 +1,54 @@ -# Toggle +# Toggle ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 - -Toggle\(options: \{ type: ToggleType, isOn?: boolean \}\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

type

-

ToggleType

-

是

-

-

-

创建相应的开关状态组件。

-

isOn

-

boolean

-

否

-

false

-

设置开关状态组件初始化状态。

-
说明：

在创建组件时不设置isOn，组件复用时可保持选中状态；如设置isOn初始值，则需要在通过事件方法记录选中状态已达到组件复用时保持选中状态。

-
-
- - -- ToggleType枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

Checkbox

-

提供单选框样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。

-

Button

-

提供状态按钮样式，如果有文本设置，则相应的文本内容会显示在按钮内部。

-

Switch

-

提供开关样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

默认值

-

参数描述

-

selectedColor

-

Color

-

-

-

设置组件打开状态的背景颜色。

-

switchPointColor

-

Color

-

-

-

设置Switch类型的圆形滑块颜色。

-
说明：

仅对type为ToggleType.Switch生效。

-
-
- -## 事件 - - - - - - - - - -

名称

-

功能描述

-

onChange(callback: (isOn: boolean) => void)

-

开关状态切换时触发该事件。

-
- -## 示例 + +## 接口 + +Toggle(options: { type: ToggleType, isOn?: boolean }) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | type | ToggleType | 是 | - | 创建相应的开关状态组件。 | + | isOn | boolean | 否 | false | 设置开关状态组件初始化状态。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 在创建组件时不设置isOn，组件复用时可保持选中状态；如设置isOn初始值，则需要在通过事件方法记录选中状态已达到组件复用时保持选中状态。 | + + +- ToggleType枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Checkbox | 提供单选框样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。 | + | Button | 提供状态按钮样式，如果有文本设置，则相应的文本内容会显示在按钮内部。 | + | Switch | 提供开关样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。 | + + +## 属性 + +| 名称 | 参数 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | +| selectedColor | Color | - | 设置组件打开状态的背景颜色。 | +| switchPointColor | Color | - | 设置Switch类型的圆形滑块颜色。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅对type为ToggleType.Switch生效。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onChange(callback: (isOn: boolean) => void) | 开关状态切换时触发该事件。 | + + +## 示例 ``` @Entry @@ -200,5 +113,4 @@ struct ToggleExample { } ``` -![](figures/toggle.gif) - +![zh-cn_image_0000001174104402](figures/zh-cn_image_0000001174104402.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components.md index e41757c9660744647ab17a30e88c399f32508b11..bd0363da802f007410fe5fafe209016c81ab90c3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components.md @@ -1,37 +1,41 @@ -# 基础组件 +# 基础组件 -- **[Blank](ts-basic-components-blank.md)** +- **[Blank](ts-basic-components-blank.md)** -- **[Button](ts-basic-components-button.md)** +- **[Button](ts-basic-components-button.md)** -- **[DataPanel](ts-basic-components-datapanel.md)** +- **[DataPanel](ts-basic-components-datapanel.md)** -- **[Divider](ts-basic-components-divider.md)** +- **[DatePicker](ts-basic-components-datepicker.md)** -- **[Gauge](ts-basic-components-gauge.md)** +- **[Divider](ts-basic-components-divider.md)** -- **[Image](ts-basic-components-image.md)** +- **[Image](ts-basic-components-image.md)** -- **[ImageAnimator](ts-basic-components-imageanimator.md)** +- **[ImageAnimator](ts-basic-components-imageanimator.md)** -- **[Marquee](ts-basic-components-marquee.md)** +- **[Progress](ts-basic-components-progress.md)** -- **[Progress](ts-basic-components-progress.md)** +- **[QRCode](ts-basic-components-qrcode.md)** -- **[QRCode](ts-basic-components-qrcode.md)** +- **[Rating](ts-basic-components-rating.md)** -- **[Rating](ts-basic-components-rating.md)** +- **[Span](ts-basic-components-span.md)** -- **[Span](ts-basic-components-span.md)** +- **[Slider](ts-basic-components-slider.md)** -- **[Slider](ts-basic-components-slider.md)** +- **[Text](ts-basic-components-text.md)** -- **[Text](ts-basic-components-text.md)** +- **[TextArea](ts-basic-components-textarea.md)** -- **[TextArea](ts-basic-components-textarea.md)** +- **[TextInput](ts-basic-components-textinput.md)** -- **[TextInput](ts-basic-components-textinput.md)** +- **[TextPicker](ts-basic-components-textpicker.md)** -- **[Toggle](ts-basic-components-toggle.md)** +- **[TextTimer](ts-basic-components-texttimer.md)** +- **[Toggle](ts-basic-components-toggle.md)** + +- **[Select](ts-basic-components-select.md)** +- **[TextClock](ts-basic-components-textClock.md)** diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md index 7a81e51f43167ccefd770669cda7fcb58b3b014b..5374d0f6d2202c1f5ed0f91893ebdbb2bd3a44e9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md @@ -1,117 +1,41 @@ -# LongPressGesture +# LongPressGesture ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 接口 - -LongPressGesture\(options?: \{ fingers?: number, repeat?: boolean, duration?: number \}\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

必填

-

默认值

-

参数描述

-

fingers

-

number

-

否

-

1

-

触发长按的最少手指数，最小为1指， 最大取值为10指。

-

repeat

-

boolean

-

否

-

false

-

是否连续触发事件回调。

-

duration

-

number

-

否

-

500

-

最小触发长按的时间，单位为毫秒（ms）。

-
- - -## 事件 - - - - - - - - - - - - - - - -

名称

-

功能描述

-

onAction((event?: LongPressGestureEvent) => void)

-

LongPress手势识别成功回调。

-

onActionEnd((event?: LongPressGestureEvent) => void)

-

LongPress手势识别成功，手指抬起后触发回调。

-

onActionCancel(event: () => void)

-

LongPress手势识别成功，接收到触摸取消事件触发回调。

-
- -- LongPressGestureEvent类型说明8+ - - 继承自[GestureEvent](ts-gesture-settings.md#table290mcpsimp)类型。 - - - - - - - - - - - -

属性名称

-

属性类型

-

描述

-

repeat

-

boolean

-

事件是否为重复触发事件。

-
- - -## 示例 + +## 接口 + +LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number }) + +- 参数 + | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | fingers | number | 否 | 1 | 触发长按的最少手指数，最小为1指， 最大取值为10指。 | + | repeat | boolean | 否 | false | 是否连续触发事件回调。 | + | duration | number | 否 | 500 | 最小触发长按的时间，单位为毫秒（ms）。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onAction((event?: LongPressGestureEvent) => void) | LongPress手势识别成功回调。 | +| onActionEnd((event?: LongPressGestureEvent) => void) | LongPress手势识别成功，手指抬起后触发回调。 | +| onActionCancel(event: () => void) | LongPress手势识别成功，接收到触摸取消事件触发回调。 | + +- LongPressGestureEvent对象说明8+ + | 属性名称 | 属性类型 | 描述 | + | -------- | -------- | -------- | + | repeat | boolean | 事件是否为重复触发事件。 | + + +## 示例 ``` @Entry @@ -139,5 +63,4 @@ struct LongPressGestureExample { } ``` -![](figures/LongPressGesture.gif) - +![zh-cn_image_0000001174264380](figures/zh-cn_image_0000001174264380.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md index 8b37e123129b5da7ea7bfeb6ee4689caa8f53a35..880246a3240754eda41a03c6fd6f2758c91da4be 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md @@ -1,218 +1,72 @@ -# PanGesture +# PanGesture ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 接口 - -PanGesture\(options?: \{ fingers?: number, direction?: PanDirection, distance?: number \} | [PanGestureOption](#section14214195212149)\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

必填

-

默认值

-

参数描述

-

fingers

-

number

-

否

-

1

-

触发滑动的最少手指数，最小为1指， 最大取值为10指。

-

direction

-

PanDirection

-

否

-

All

-

设置滑动方向，此枚举值支持逻辑与(&)和逻辑或（|）运算。

-

distance

-

number

-

否

-

5.0

-

最小滑动识别距离，单位为vp。

-
- -- PanDirection枚举说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

All

-

所有方向可滑动。

-

Horizontal

-

水平方向可滑动。

-

Vertical

-

竖直方向可滑动。

-

Left

-

向左滑动。

-

Right

-

向右滑动。

-

Up

-

向上滑动。

-

Down

-

向下滑动。

-

None

-

任何方向都不可滑动。

-
- - -### PanGestureOption + +## 接口 + +PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOption](#pangestureoption)) + +- 参数 + | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | fingers | number | 否 | 1 | 触发滑动的最少手指数，最小为1指， 最大取值为10指。 | + | direction | PanDirection | 否 | All | 设置滑动方向，此枚举值支持逻辑与(&)和逻辑或（\|）运算。 | + | distance | number | 否 | 5.0 | 最小滑动识别距离，单位为vp。 | + +- PanDirection枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | All | 所有方向可滑动。 | + | Horizontal | 水平方向可滑动。 | + | Vertical | 竖直方向可滑动。 | + | Left | 向左滑动。 | + | Right | 向右滑动。 | + | Up | 向上滑动。 | + | Down | 向下滑动。 | + | None | 任何方向都不可滑动。 | + + +### PanGestureOption 通过PanGestureOption对象接口可以动态修改滑动手势识别器的属性，从而避免通过状态变量修改属性（状态变量修改会导致UI刷新）。 -PanGestureOption\(options?: \{ fingers?: number, direction?: PanDirection, distance?: number \}\) - -- 参数 - - 同[PanGesture](#li118312377710)参数说明。 - - -- 接口 - - - - - - - - - - - - - - - -

名称

-

功能描述

-

setDirection(value: PanDirection)

-

设置direction属性。

-

setDistance(value: number)

-

设置distance属性。

-

setFingers(value: number)

-

设置fingers属性。

-
- - -## 事件 - - - - - - - - - - - - - - - - - - -

名称

-

功能描述

-

onActionStart(callback: (event?: PanGestureEvent) => void)

-

Pan手势识别成功回调。

-

onActionUpdate(callback: (event?: PanGestureEvent) => void)

-

Pan手势移动过程中回调。

-

onActionEnd(callback: (event?: PanGestureEvent) => void)

-

Pan手势识别成功，手指抬起后触发回调。

-

onActionCancel(callback: () => void)

-

Pan手势识别成功，接收到触摸取消事件触发回调。

-
- -- PanGestureEvent类型说明8+ - - 继承自[GestureEvent](ts-gesture-settings.md#table290mcpsimp)类型。 - - - - - - - - - - - - - - - -

属性名称

-

属性类型

-

描述

-

offsetX

-

number

-

手势事件偏移量，单位为vp。

-

offsetY

-

number

-

手势事件偏移量，单位为vp。

-
- - -## 示例 +PanGestureOption(options?: { fingers?: number, direction?: PanDirection, distance?: number }) + +- 参数 + 同PanGesture参数说明。 + +- 接口 + | 名称 | 功能描述 | + | -------- | -------- | + | setDirection(value: PanDirection) | 设置direction属性。 | + | setDistance(value: number) | 设置distance属性。 | + | setFingers(value: number) | 设置fingers属性。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onActionStart(callback: (event?: PanGestureEvent) => void) | Pan手势识别成功回调。 | +| onActionUpdate(callback: (event?: PanGestureEvent) => void) | Pan手势移动过程中回调。 | +| onActionEnd(callback: (event?: PanGestureEvent) => void) | Pan手势识别成功，手指抬起后触发回调。 | +| onActionCancel(callback: () => void) | Pan手势识别成功，接收到触摸取消事件触发回调。 | + +- PanGestureEvent对象说明8+ + | 属性名称 | 属性类型 | 描述 | + | -------- | -------- | -------- | + | offsetX | number | 手势事件偏移量，单位为vp。 | + | offsetY | number | 手势事件偏移量，单位为vp。 | + + +## 示例 ``` @Entry @@ -244,5 +98,4 @@ struct PanGestureExample { } ``` -![](figures/PanGesture.gif) - +![zh-cn_image_0000001174264374](figures/zh-cn_image_0000001174264374.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md index aa886db055387dd3eace79c46acc898499d3e71e..58f33f5da2a4a7b49f53c41c841fe9ded09d8937 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md @@ -1,125 +1,43 @@ -# PinchGesture +# PinchGesture ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 接口 - -PinchGesture\(options?: \{ fingers?: number, distance?: number \}\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

必填

-

默认值

-

参数描述

-

fingers

-

number

-

否

-

2

-

触发捏合的最少手指数, 最小为2指，最大为5指。

-

distance

-

number

-

否

-

3.0

-

最小识别距离，单位为vp。

-
- - -## 事件 - - - - - - - - - - - - - - - - - - -

名称

-

功能描述

-

onActionStart((event?: PinchGestureEvent) => void)

-

Pinch手势识别成功回调。

-

onActionUpdate((event?: PinchGestureEvent) => void)

-

Pinch手势移动过程中回调。

-

onActionEnd((event?: PinchGestureEvent) => void)

-

Pinch手势识别成功，手指抬起后触发回调。

-

onActionCancel(event: () => void)

-

Pinch手势识别成功，接收到触摸取消事件触发回调。

-
- -- PinchGestureEvent类型说明8+ - - 继承自[GestureEvent](ts-gesture-settings.md#table290mcpsimp)类型。 - - - - - - - - - - - - - - - - - - - -

属性名称

-

属性类型

-

描述

-

scale

-

number

-

缩放比例，用于PinchGesture手势触发场景。

-

pinchCenterX

-

number

-

捏合手势中心点X轴坐标，单位为px。

-

pinchCenterY

-

number

-

捏合手势中心点Y轴坐标，单位为px。

-
- - -## 示例 + +## 接口 + +PinchGesture(options?: { fingers?: number, distance?: number }) + +- 参数 + | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | fingers | number | 否 | 2 | 触发捏合的最少手指数, 最小为2指，最大为5指。 | + | distance | number | 否 | 3.0 | 最小识别距离，单位为vp。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onActionStart((event?: PinchGestureEvent) => void) | Pinch手势识别成功回调。 | +| onActionUpdate((event?: PinchGestureEvent) => void) | Pinch手势移动过程中回调。 | +| onActionEnd((event?: PinchGestureEvent) => void) | Pinch手势识别成功，手指抬起后触发回调。 | +| onActionCancel(event: () => void) | Pinch手势识别成功，接收到触摸取消事件触发回调。 | + +- PinchGestureEvent对象说明8+ + | 属性名称 | 属性类型 | 描述 | + | -------- | -------- | -------- | + | scale | number | 缩放比例，用于PinchGesture手势触发场景。 | + | pinchCenterX | number | 捏合手势中心点X轴坐标，单位为px。 | + | pinchCenterY | number | 捏合手势中心点Y轴坐标，单位为px。 | + + +## 示例 ``` @Entry @@ -149,5 +67,4 @@ struct PinchGestureExample { } ``` -![](figures/PinchGesture.gif) - +![zh-cn_image_0000001174582848](figures/zh-cn_image_0000001174582848.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md index e7bd9c07edc4597684e7e8fb7c0aa391e7010630..1e8bedb589b6b12f4b08d85e2e49797329f4de39 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md @@ -1,125 +1,41 @@ -# RotationGesture +# RotationGesture ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 接口 - -RotationGesture\(options?: \{ fingers?: number, angle?: number \}\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

必填

-

默认值

-

参数描述

-

fingers

-

number

-

否

-

2

-

触发旋转的最少手指数, 最小为2指，最大为5指。

-

angle

-

number

-

否

-

1.0

-

触发旋转手势的最小改变度数，单位为度数。

-
- - -## 事件 - - - - - - - - - - - - - - - - - - -

名称

-

功能描述

-

onActionStart((event?: RotationGestureEvent) => void)

-

Rotation手势识别成功回调。

-

onActionUpdate((event?: RotationGestureEvent) => void)

-

Rotation手势移动过程中回调。

-

onActionEnd((event?: RotationGestureEvent) => void)

-

Rotation手势识别成功，手指抬起后触发回调。

-

onActionCancel(event: () => void)

-

Rotation手势识别成功，接收到触摸取消事件触发回调。

-
- -- RotationGestureEvent类型说明8+ - - 继承自[GestureEvent](ts-gesture-settings.md#table290mcpsimp)类型。 - - - - - - - - - - - - - - - - - - - -

属性名称

-

属性类型

-

描述

-

angle

-

number

-

旋转角度。

-

pinchCenterX

-

number

-

捏合手势中心点X轴坐标，单位为px。

-

pinchCenterY

-

number

-

捏合手势中心点Y轴坐标，单位为px。

-
- - -## 示例 + +## 接口 + +RotationGesture(options?: { fingers?: number, angle?: number }) + +- 参数 + | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | fingers | number | 否 | 2 | 触发旋转的最少手指数, 最小为2指，最大为5指。 | + | angle | number | 否 | 1.0 | 触发旋转手势的最小改变度数，单位为度数。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onActionStart((event?: RotationGestureEvent) => void) | Rotation手势识别成功回调。 | +| onActionUpdate((event?: RotationGestureEvent) => void) | Rotation手势移动过程中回调。 | +| onActionEnd((event?: RotationGestureEvent) => void) | Rotation手势识别成功，手指抬起后触发回调。 | +| onActionCancel(event: () => void) | Rotation手势识别成功，接收到触摸取消事件触发回调。 | + +- RotationGestureEvent对象说明8+ + | 属性名称 | 属性类型 | 描述 | + | -------- | -------- | -------- | + | angle | number | 旋转角度。 | + + +## 示例 ``` @Entry @@ -149,5 +65,4 @@ struct RotationGestureExample { } ``` -![](figures/RotationGesture.gif) - +![zh-cn_image_0000001174264372](figures/zh-cn_image_0000001174264372.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md index edf7217879df56abdef15aefa4d805077b536648..b63f4b049dba5f787e317be04bbfbc9ec5e7a107 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md @@ -1,140 +1,48 @@ -# SwipeGesture +# SwipeGesture ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 接口 - -SwipeGesture\(value?: \{ fingers?: number; direction?: SwipeDirection; speed?: number \}\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

必填

-

默认值

-

参数描述

-

fingers

-

number

-

否

-

1

-

触发滑动的最少手指数，默认为1，最小为1指，最大为10指。

-

direction

-

SwipeDirection

-

否

-

SwipeDirection.All

-

滑动方向。

-

speed

-

number

-

否

-

100

-

识别滑动的最小速度（100VP/秒）。

-
- -- SwipeDirection枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

All

-

所有方向。

-

Horizontal

-

水平方向。

-

Vertical

-

竖直方向。

-
- - -## 事件 - - - - - - - - - -

名称

-

功能描述

-

onAction(callback:(event?: SwipeGestureEvent) => void)

-

滑动手势识别成功回调。

-
- -- SwipeGestureEvent类型说明 - - 继承自[GestureEvent](ts-gesture-settings.md#table290mcpsimp)类型。 - - - - - - - - - - - - - - - -

参数名

-

类型

-

说明

-

angle

-

number

-

滑动手势的角度。

-

speed

-

number

-

滑动手势的速度。

-
- - -## 示例 + +## 接口 + +SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number }) + +- 参数 + | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | fingers | number | 否 | 1 | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 | + | direction | SwipeDirection | 否 | SwipeDirection.All | 滑动方向。 | + | speed | number | 否 | 100 | 识别滑动的最小速度（100VP/秒）。 | + +- SwipeDirection枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | All | 所有方向。 | + | Horizontal | 水平方向。 | + | Vertical | 竖直方向。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onAction(callback:(event?: SwipeGestureEvent) => void) | 滑动手势识别成功回调。 | + + +- SwipeGestureEvent对象说明 + | 参数名 | 类型 | 说明 | + | -------- | -------- | -------- | + | angle | number | 滑动手势的角度。 | + | speed | number | 滑动手势的速度。 | + + +## 示例 ``` @Entry @@ -163,5 +71,4 @@ struct SwipeGestureExample { } ``` -![](figures/GIF-0.gif) - +![zh-cn_image_0000001231374559](figures/zh-cn_image_0000001231374559.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md index ebf47a07da9db437c2ee1220fc49f7a42f77eafa..ec836a9f0d3e33d29edf75197c4ffb06ed2f21cd 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md @@ -1,83 +1,33 @@ -# TapGesture +# TapGesture ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 接口 - -TapGesture\(options?: \{ count?: number, fingers?: number \}\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

必填

-

默认值

-

参数描述

-

count

-

number

-

否

-

1

-

识别的连续点击次数。如果设置小于1，会被转化为默认值。

-
说明：

如配置多击，上一次抬起和下一次按下的超时时间为300毫秒（ms）。

-
-

fingers

-

number

-

否

-

1

-

触发点击的最少手指数，最小为1指， 最大为10指。

-
说明：

1. 当配置多指时，第一根手指按下后300毫秒（ms）内未有足够的手指数按下，手势识别失败。

-

2. 实际点击手指数超过配置值，手势识别失败。

-
-
- - -## 事件 - - - - - - - - - -

名称

-

功能描述

-

onAction((event?: TapGestureEvent) => void)

-

Tap手势识别成功回调。

-
- -- TapGestureEvent类型说明8+ - - 继承自[GestureEvent](ts-gesture-settings.md#table290mcpsimp)类型。 - - -## 示例 + +## 接口 + +TapGesture(options?: { count?: number, fingers?: number }) + +- 参数 + | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | count | number | 否 | 1 | 识别的连续点击次数。如果设置小于1，会被转化为默认值。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如配置多击，上一次抬起和下一次按下的超时时间为300毫秒（ms）。 | + | fingers | number | 否 | 1 | 触发点击的最少手指数，最小为1指， 最大为10指。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 1. 当配置多指时，第一根手指按下后300毫秒（ms）内未有足够的手指数按下，手势识别失败。
> 
> 2. 实际点击手指数超过配置值，手势识别失败。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onAction((event?: [GestureEvent](ts-gesture-settings.md)) => void) | Tap手势识别成功回调。 | + + +## 示例 ``` @Entry @@ -101,5 +51,4 @@ struct TapGestureExample { } ``` -![](figures/TapGesture.gif) - +![zh-cn_image_0000001174422900](figures/zh-cn_image_0000001174422900.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures.md index 82d86fcd235337bd6df9b5ff7608c3012e2d008f..bd6c3ded10801cac7a2741707976c75a7724dad8 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures.md @@ -1,15 +1,13 @@ -# 基础手势 +# 基础手势 -- **[TapGesture](ts-basic-gestures-tapgesture.md)** +- **[TapGesture](ts-basic-gestures-tapgesture.md)** -- **[LongPressGesture](ts-basic-gestures-longpressgesture.md)** +- **[LongPressGesture](ts-basic-gestures-longpressgesture.md)** -- **[PanGesture](ts-basic-gestures-pangesture.md)** +- **[PanGesture](ts-basic-gestures-pangesture.md)** -- **[PinchGesture](ts-basic-gestures-pinchgesture.md)** - -- **[RotationGesture](ts-basic-gestures-rotationgesture.md)** - -- **[SwipeGesture](ts-basic-gestures-swipegesture.md)** +- **[PinchGesture](ts-basic-gestures-pinchgesture.md)** +- **[RotationGesture](ts-basic-gestures-rotationgesture.md)** +- **[SwipeGesture](ts-basic-gestures-swipegesture.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index c6efba1fd72e46de2323575f64cad167f788ac72..8aa097feebec90c33481cc229e004cc7b6b7a14b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -1,271 +1,62 @@ -# CanvasRenderingContext2D对象 +# CanvasRenderingContext2D对象 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。 -## 接口 - -CanvasRenderingContext2D\(setting: RenderingContextSettings\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

setting

-

RenderingContextSettings

-

是

-

-

-

见RenderingContextSettings。

-
- - -### RenderingContextSettings - -RenderingContextSettings\(antialias?: bool) + +## 接口 + +CanvasRenderingContext2D(setting: RenderingContextSetting) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 | + + +### RenderingContextSettings + +RenderingContextSettings(antialias?: bool) 用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。 -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

antialias

-

bool

-

否

-

false

-

表明canvas是否开启抗锯齿。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

fillStyle

-

<color> | CanvasGradient | CanvasPattern

-

-

-

指定绘制的填充色。

-
  • 类型为<color>时，表示设置填充区域的颜色。
  • 类型为CanvasGradient时，表示渐变对象，使用createLinearGradient方法创建。
  • 类型为CanvasPattern时，使用createPattern方法创建。
-

lineWidth

-

number

-

-

-

设置绘制线条的宽度。

-

strokeStyle

-

<color> | CanvasGradient | CanvasPattern

-

-

-

设置描边的颜色。

-
  • 类型为<color>时，表示设置描边使用的颜色。
  • 类型为CanvasGradient时，表示渐变对象，使用createLinearGradient方法创建。
  • 类型为CanvasPattern时，使用createPattern方法创建。
-

lineCap

-

string

-

'butt'

-

指定线端点的样式，可选值为：

-
  • 'butt'：线端点以方形结束。
  • 'round'：线端点以圆形结束。
  • 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
-

lineJoin

-

string

-

'miter'

-

指定线段间相交的交点样式，可选值为：

-
  • 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
  • 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
  • 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
-

miterLimit

-

number

-

10

-

设置斜接面限制值，该值指定了线条相交处内角和外角的距离。

-

font

-

string

-

'normal normal 14px sans-serif'

-

设置文本绘制中的字体样式。

-

语法：ctx.font='font-size font-family'

-
  • font-size(可选)，指定字号和行高，单位只支持px。
  • font-family(可选)，指定字体系列。
-

语法：ctx.font='font-style font-weight font-size font-family'

-
  • font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。
  • font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
  • font-size(可选)，指定字号和行高，单位只支持px。
  • font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。
-

textAlign

-

string

-

'left'

-

设置文本绘制中的文本对齐方式，可选值为：

-
  • 'left'：文本左对齐。
  • 'right'：文本右对齐。
  • 'center'：文本居中对齐。
  • 'start'：文本对齐界线开始的地方。
  • 'end'：文本对齐界线结束的地方。
-
说明：

ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。

-
-

textBaseline

-

string

-

'alphabetic'

-

设置文本绘制中的水平对齐方式，可选值为：

-
  • 'alphabetic'：文本基线是标准的字母基线。
  • 'top'：文本基线在文本块的顶部。
  • 'hanging'：文本基线是悬挂基线。
  • 'middle'：文本基线在文本块的中间。
  • 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
  • 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。
-

globalAlpha

-

number

-

-

-

设置透明度，0.0为完全透明，1.0为完全不透明。

-

lineDashOffset

-

number

-

0.0

-

设置画布的虚线偏移量，精度为float。

-

globalCompositeOperation

-

string

-

'source-over'

-

设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。

-

shadowBlur

-

number

-

0.0

-

设置绘制阴影时的模糊级别，值越大越模糊，精度为float。

-

shadowColor

-

<color>

-

-

-

设置绘制阴影时的阴影颜色。

-

shadowOffsetX

-

number

-

-

-

设置绘制阴影时和原有对象的水平偏移值。

-

shadowOffsetY

-

number

-

-

-

设置绘制阴影时和原有对象的垂直偏移值。

-

imageSmoothingEnabled

-

boolean

-

true

-

用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。

-

imageSmoothingQuality

-

string

-

'low'

-

用于设置图像平滑度，支持如下三种类型：'low', 'medium', 'high'。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明：** ->类型格式为 'rgb\(255, 255, 255\)'，'rgba\(255, 255, 255, 1.0\)'，'\#FFFFFF'。 - -### fillStyle +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | antialias | bool | 否 | false | 表明canvas是否开启抗锯齿。 | + + +## 属性 + +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。
- 类型为<color>时，表示设置填充区域的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | +| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 | +| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 设置描边的颜色。
- 类型为<color>时，表示设置描边使用的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | +| [lineCap](#linecap) | string | 'butt' | 指定线端点的样式，可选值为：
- 'butt'：线端点以方形结束。
- 'round'：线端点以圆形结束。
- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 | +| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：
- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 | +| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 | +| [font](#font) | string | 'normal normal 14px sans-serif' | 设置文本绘制中的字体样式。
语法：ctx.font='font-size font-family'
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列。
语法：ctx.font='font-style font-weight font-size font-family'
- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。
- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。 | +| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：
- 'left'：文本左对齐。
- 'right'：文本右对齐。
- 'center'：文本居中对齐。
- 'start'：文本对齐界线开始的地方。
- 'end'：文本对齐界线结束的地方。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 | +| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：
- 'alphabetic'：文本基线是标准的字母基线。
- 'top'：文本基线在文本块的顶部。
- 'hanging'：文本基线是悬挂基线。
- 'middle'：文本基线在文本块的中间。
- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 | +| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 | +| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 | +| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。 | +| [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 | +| [shadowColor](#shadowcolor) | <color> | - | 设置绘制阴影时的阴影颜色。 | +| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 | +| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 | +| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 | +| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low', 'medium', 'high'。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> <color>类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 + + +### fillStyle ``` @Entry @@ -291,9 +82,10 @@ struct FillStyleExample { } ``` -![](figures/zh-cn_image_0000001193322850.png) +![zh-cn_image_0000001238712411](figures/zh-cn_image_0000001238712411.png) -### lineWidth + +### lineWidth ``` @Entry @@ -319,9 +111,10 @@ struct LineWidthExample { } ``` -![](figures/zh-cn_image_0000001238402745.png) +![zh-cn_image_0000001194192432](figures/zh-cn_image_0000001194192432.png) + -### strokeStyle +### strokeStyle ``` @Entry @@ -348,9 +141,11 @@ struct StrokeStyleExample { } ``` -![](figures/zh-cn_image_0000001238282783.png) -### lineCap +![zh-cn_image_0000001194352432](figures/zh-cn_image_0000001194352432.png) + + +### lineCap ``` @Entry @@ -380,9 +175,10 @@ struct LineCapExample { } ``` -![](figures/zh-cn_image_0000001193642802.png) +![zh-cn_image_0000001238952373](figures/zh-cn_image_0000001238952373.png) + -### lineJoin +### lineJoin ``` @Entry @@ -413,9 +209,10 @@ struct LineJoinExample { } ``` -![](figures/zh-cn_image_0000001193802788.png) +![zh-cn_image_0000001194032454](figures/zh-cn_image_0000001194032454.png) -### miterLimit + +### miterLimit ``` @Entry @@ -446,9 +243,10 @@ struct MiterLimit { } ``` -![](figures/zh-cn_image_0000001238522733.png) +![zh-cn_image_0000001239032409](figures/zh-cn_image_0000001239032409.png) + -### font +### font ``` @Entry @@ -474,9 +272,10 @@ struct Font { } ``` -![](figures/zh-cn_image_0000001193482814.png) +![zh-cn_image_0000001193872488](figures/zh-cn_image_0000001193872488.png) -### textAlign + +### textAlign ``` @Entry @@ -517,9 +316,10 @@ struct CanvasExample { } ``` -![](figures/zh-cn_image_0000001238602771.png) +![zh-cn_image_0000001238832385](figures/zh-cn_image_0000001238832385.png) + -### textBaseline +### textBaseline ``` @Entry @@ -560,9 +360,10 @@ struct TextBaseline { } ``` -![](figures/zh-cn_image_0000001193322872.png) +![zh-cn_image_0000001238712413](figures/zh-cn_image_0000001238712413.png) -### globalAlpha + +### globalAlpha ``` @Entry @@ -591,9 +392,10 @@ struct GlobalAlpha { } ``` -![](figures/zh-cn_image_0000001238402777.png) +![zh-cn_image_0000001194192434](figures/zh-cn_image_0000001194192434.png) + -### lineDashOffset +### lineDashOffset ``` @Entry @@ -620,73 +422,24 @@ struct LineDashOffset { } ``` -![](figures/zh-cn_image_0000001238282827.png) - -### globalCompositeOperation - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

source-over

-

在现有绘制内容上显示新绘制内容，属于默认值。

-

source-atop

-

在现有绘制内容顶部显示新绘制内容。

-

source-in

-

在现有绘制内容中显示新绘制内容。

-

source-out

-

在现有绘制内容之外显示新绘制内容。

-

destination-over

-

在新绘制内容上方显示现有绘制内容。

-

destination-atop

-

在新绘制内容顶部显示现有绘制内容。

-

destination-in

-

在新绘制内容中显示现有绘制内容。

-

destination-out

-

在新绘制内容外显示现有绘制内容。

-

lighter

-

显示新绘制内容和现有绘制内容。

-

copy

-

显示新绘制内容而忽略现有绘制内容。

-

xor

-

使用异或操作对新绘制内容与现有绘制内容进行融合。

-
+![zh-cn_image_0000001194352434](figures/zh-cn_image_0000001194352434.png) + + +### globalCompositeOperation + +| 名称 | 描述 | +| -------- | -------- | +| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 | +| source-atop | 在现有绘制内容顶部显示新绘制内容。 | +| source-in | 在现有绘制内容中显示新绘制内容。 | +| source-out | 在现有绘制内容之外显示新绘制内容。 | +| destination-over | 在新绘制内容上方显示现有绘制内容。 | +| destination-atop | 在新绘制内容顶部显示现有绘制内容。 | +| destination-in | 在新绘制内容中显示现有绘制内容。 | +| destination-out | 在新绘制内容外显示现有绘制内容。 | +| lighter | 显示新绘制内容和现有绘制内容。 | +| copy | 显示新绘制内容而忽略现有绘制内容。 | +| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 | ``` @Entry @@ -720,9 +473,10 @@ struct GlobalCompositeOperation { } ``` -![](figures/zh-cn_image_0000001193642848.png) +![zh-cn_image_0000001238952375](figures/zh-cn_image_0000001238952375.png) -### shadowBlur + +### shadowBlur ``` @Entry @@ -750,9 +504,10 @@ struct ShadowBlur { } ``` -![](figures/zh-cn_image_0000001193802836.png) +![zh-cn_image_0000001194032456](figures/zh-cn_image_0000001194032456.png) + -### shadowColor +### shadowColor ``` @Entry @@ -780,9 +535,10 @@ struct ShadowColor { } ``` -![](figures/zh-cn_image_0000001238522783.png) +![zh-cn_image_0000001239032411](figures/zh-cn_image_0000001239032411.png) -### shadowOffsetX + +### shadowOffsetX ``` @Entry @@ -811,9 +567,10 @@ struct ShadowOffsetX { } ``` -![](figures/zh-cn_image_0000001193482866.png) +![zh-cn_image_0000001193872490](figures/zh-cn_image_0000001193872490.png) + -### shadowOffsetY +### shadowOffsetY ``` @Entry @@ -841,9 +598,10 @@ struct ShadowOffsetY { } ``` -![](figures/zh-cn_image_0000001238602821.png) +![zh-cn_image_0000001238832387](figures/zh-cn_image_0000001238832387.png) -### imageSmoothingEnabled + +### imageSmoothingEnabled ``` @Entry @@ -870,2902 +628,1376 @@ struct ImageSmoothingEnabled { } ``` -![](figures/zh-cn_image_0000001193322910.png) +![zh-cn_image_0000001238712415](figures/zh-cn_image_0000001238712415.png) + -## 方法 +## 方法 -### fillRect -fillRect\(x: number, y: number, w: number, h: number\): void +### fillRect + +fillRect(x: number, y: number, w: number, h: number): void 填充一个矩形。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

说明

-

x

-

number

-

是

-

0

-

指定矩形左上角点的x坐标。

-

y

-

number

-

是

-

0

-

指定矩形左上角点的y坐标。

-

width

-

number

-

是

-

0

-

指定矩形的宽度。

-

height

-

number

-

是

-

0

-

指定矩形的高度。

-
- - -- 示例 - - ``` - @Entry - @Component - struct FillRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.fillRect(0,30,100,100) - }) - } - .width('100%') - .height('100%') - } +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 指定矩形左上角点的x坐标。 | + | y | number | 是 | 0 | 指定矩形左上角点的y坐标。 | + | width | number | 是 | 0 | 指定矩形的宽度。 | + | height | number | 是 | 0 | 指定矩形的高度。 | + +- 示例 + ``` + @Entry + @Component + struct FillRect { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.fillRect(0,30,100,100) + }) + } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193737314.png) + ![zh-cn_image_0000001194192436](figures/zh-cn_image_0000001194192436.png) -### strokeRect +### strokeRect -strokeRect\(x: number, y: number, w: number, h: number\): void +strokeRect(x: number, y: number, w: number, h: number): void 绘制具有边框的矩形，矩形内部不填充。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

说明

-

x

-

number

-

是

-

0

-

指定矩形的左上角x坐标。

-

y

-

number

-

是

-

0

-

指定矩形的左上角y坐标。

-

width

-

number

-

是

-

0

-

指定矩形的宽度。

-

height

-

number

-

是

-

0

-

指定矩形的高度。

-
- - -- 示例 - - ``` - @Entry - @Component - struct StrokeRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.strokeRect(30, 30, 200, 150) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 指定矩形的左上角x坐标。 | + | y | number | 是 | 0 | 指定矩形的左上角y坐标。 | + | width | number | 是 | 0 | 指定矩形的宽度。 | + | height | number | 是 | 0 | 指定矩形的高度。 | + +- 示例 + ``` + @Entry + @Component + struct StrokeRect { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.strokeRect(30, 30, 200, 150) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001238457271.png) + ![zh-cn_image_0000001194352436](figures/zh-cn_image_0000001194352436.png) -### clearRect +### clearRect -clearRect\(x: number, y: number, w: number, h: number\): void +clearRect(x: number, y: number, w: number, h: number): void 删除指定区域内的绘制内容。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

指定矩形上的左上角x坐标。

-

y

-

number

-

是

-

0

-

指定矩形上的左上角y坐标。

-

width

-

number

-

是

-

0

-

指定矩形的宽度。

-

height

-

number

-

是

-

0

-

指定矩形的高度。

-
- - -- 示例 - - ``` - @Entry - @Component - struct ClearRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.fillStyle = 'rgb(0,0,255)' - this.context.fillRect(0,0,500,500) - this.context.clearRect(20,20,150,100) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | + | y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | + | width | number | 是 | 0 | 指定矩形的宽度。 | + | height | number | 是 | 0 | 指定矩形的高度。 | + +- 示例 + ``` + @Entry + @Component + struct ClearRect { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.fillStyle = 'rgb(0,0,255)' + this.context.fillRect(0,0,500,500) + this.context.clearRect(20,20,150,100) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/11111.png) + ![zh-cn_image_0000001238952377](figures/zh-cn_image_0000001238952377.png) -### fillText +### fillText -fillText\(text: string, x: number, y: number\): void +fillText(text: string, x: number, y: number): void 绘制填充类文本。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

说明

-

text

-

string

-

是

-

“”

-

需要绘制的文本内容。

-

x

-

number

-

是

-

0

-

需要绘制的文本的左下角x坐标。

-

y

-

number

-

是

-

0

-

需要绘制的文本的左下角y坐标。

-
- - -- 示例 - - ``` - @Entry - @Component - struct FillText { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.font = '30px sans-serif' - this.context.fillText("Hello World!", 20, 100) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | text | string | 是 | “” | 需要绘制的文本内容。 | + | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | + | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | + +- 示例 + ``` + @Entry + @Component + struct FillText { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.font = '30px sans-serif' + this.context.fillText("Hello World!", 20, 100) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001238537297.png) + ![zh-cn_image_0000001194032458](figures/zh-cn_image_0000001194032458.png) -### strokeText +### strokeText -strokeText\(text: string, x: number, y: number\): void +strokeText(text: string, x: number, y: number): void 绘制描边类文本。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

text

-

string

-

是

-

“”

-

需要绘制的文本内容。

-

x

-

number

-

是

-

0

-

需要绘制的文本的左下角x坐标。

-

y

-

number

-

是

-

0

-

需要绘制的文本的左下角y坐标。

-
- - -- 示例 - - ``` - @Entry - @Component - struct StrokeText { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.font = '55px sans-serif' - this.context.strokeText("Hello World!", 20, 60) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | text | string | 是 | “” | 需要绘制的文本内容。 | + | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | + | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | + +- 示例 + ``` + @Entry + @Component + struct StrokeText { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.font = '55px sans-serif' + this.context.strokeText("Hello World!", 20, 60) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193756416.png) + ![zh-cn_image_0000001239032413](figures/zh-cn_image_0000001239032413.png) -### measureText +### measureText -measureText\(text: string\): TextMetrics +measureText(text: string): TextMetrics 该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

说明

-

text

-

string

-

是

-

""

-

需要进行测量的文本。

-
- - -- 返回值 - - - - - - - - - -

类型

-

说明

-

TextMetrics

-

文本的尺寸信息

-
- -- TextMetrics类型描述 - - - - - - - - - - - -

属性

-

类型

-

描述

-

width

-

number

-

字符串的宽度。

-
- - -- 示例 - - ``` - @Entry - @Component - struct MeasureText { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.font = '50px sans-serif' - this.context.fillText("Hello World!", 20, 100) - this.context.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | text | string | 是 | "" | 需要进行测量的文本。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | TextMetrics | 文本的尺寸信息 | + +- TextMetrics类型描述 + | 属性 | 类型 | 描述 | + | -------- | -------- | -------- | + | width | number | 字符串的宽度。 | + +- 示例 + ``` + @Entry + @Component + struct MeasureText { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.font = '50px sans-serif' + this.context.fillText("Hello World!", 20, 100) + this.context.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001238476361.png) + ![zh-cn_image_0000001193872492](figures/zh-cn_image_0000001193872492.png) -### stroke +### stroke -stroke\(path?: Path2D\): void +stroke(path?: Path2D): void 进行边框绘制操作。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

path

-

Path2D

-

否

-

null

-

需要绘制的Path2D。

-
- - -- 示例 - - ``` - @Entry - @Component - struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.moveTo(25, 25) - this.context.lineTo(25, 105) - this.context.strokeStyle = 'rgb(0,0,255)' - this.context.stroke() - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | + +- 示例 + ``` + @Entry + @Component + struct Stroke { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.moveTo(25, 25) + this.context.lineTo(25, 105) + this.context.strokeStyle = 'rgb(0,0,255)' + this.context.stroke() + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193436448.png) + ![zh-cn_image_0000001238832389](figures/zh-cn_image_0000001238832389.png) -### beginPath +### beginPath -beginPath\(\): void +beginPath(): void 创建一个新的绘制路径。 -- 示例 - - ``` - @Entry - @Component - struct BeginPath { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.beginPath() - this.context.lineWidth = 6 - this.context.strokeStyle = '#0000ff' - this.context.moveTo(15, 80) - this.context.lineTo(280, 160) - this.context.stroke() - }) - } - .width('100%') - .height('100%') +- 示例 + ``` + @Entry + @Component + struct BeginPath { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath() + this.context.lineWidth = 6 + this.context.strokeStyle = '#0000ff' + this.context.moveTo(15, 80) + this.context.lineTo(280, 160) + this.context.stroke() + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001238556395.png) + ![zh-cn_image_0000001238712417](figures/zh-cn_image_0000001238712417.png) -### moveTo +### moveTo -moveTo\(x: number, y: number\): void +moveTo(x: number, y: number): void 路径从当前点移动到指定点。 -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

说明

-

x

-

number

-

是

-

0

-

指定位置的x坐标。

-

y

-

number

-

是

-

0

-

指定位置的y坐标。

-
- - -- 示例 - - ``` - @Entry - @Component - struct MoveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.beginPath() - this.context.moveTo(10, 10) - this.context.lineTo(280, 160) - this.context.stroke() - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 指定位置的x坐标。 | + | y | number | 是 | 0 | 指定位置的y坐标。 | + +- 示例 + ``` + @Entry + @Component + struct MoveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath() + this.context.moveTo(10, 10) + this.context.lineTo(280, 160) + this.context.stroke() + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193481094.png) + ![zh-cn_image_0000001194192438](figures/zh-cn_image_0000001194192438.png) -### lineTo +### lineTo -lineTo\(x: number, y: number\): void +lineTo(x: number, y: number): void 从当前点到指定点进行路径连接。 -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

指定位置的x坐标。

-

y

-

number

-

是

-

0

-

指定位置的y坐标。

-
- - -- 示例 - - ``` - @Entry - @Component - struct LineTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.beginPath() - this.context.moveTo(10, 10) - this.context.lineTo(280, 160) - this.context.stroke() - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 指定位置的x坐标。 | + | y | number | 是 | 0 | 指定位置的y坐标。 | + +- 示例 + ``` + @Entry + @Component + struct LineTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath() + this.context.moveTo(10, 10) + this.context.lineTo(280, 160) + this.context.stroke() + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001238601051.png) + ![zh-cn_image_0000001194352438](figures/zh-cn_image_0000001194352438.png) -### closePath +### closePath -closePath\(\): void +closePath(): void 结束当前路径形成一个封闭路径。 -- 示例 - - ``` - @Entry - @Component - struct ClosePath { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.beginPath() - this.context.moveTo(30, 30) - this.context.lineTo(110, 30) - this.context.lineTo(70, 90) - this.context.closePath() - this.context.stroke() - }) - } - .width('100%') - .height('100%') +- 示例 + ``` + @Entry + @Component + struct ClosePath { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath() + this.context.moveTo(30, 30) + this.context.lineTo(110, 30) + this.context.lineTo(70, 90) + this.context.closePath() + this.context.stroke() + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193321136.png) + ![zh-cn_image_0000001238952379](figures/zh-cn_image_0000001238952379.png) -### createPattern +### createPattern -createPattern\(image: ImageBitmap, repetition: string\): void +createPattern(image: ImageBitmap, repetition: string): void 通过指定图像和重复方式创建图片填充的模板。 -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

image

-

ImageBitmap

-

是

-

null

-

图源对象，具体参考 ImageBitmap对象。

-

repetition

-

string

-

是

-

“”

-

设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。

-
- -- 示例 - - ``` - @Entry - @Component - struct CreatePattern { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - var pattern = this.context.createPattern(this.img, 'repeat') - this.context.fillStyle = pattern - this.context.fillRect(0, 0, 200, 200) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 | + | repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 | + +- 示例 + ``` + @Entry + @Component + struct CreatePattern { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var pattern = this.context.createPattern(this.img, 'repeat') + this.context.fillStyle = pattern + this.context.fillRect(0, 0, 200, 200) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001238401029.png) + ![zh-cn_image_0000001194032460](figures/zh-cn_image_0000001194032460.png) -### bezierCurveTo +### bezierCurveTo -bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void +bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 创建三次贝赛尔曲线的路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

cp1x

-

number

-

是

-

0

-

第一个贝塞尔参数的x坐标值。

-

cp1y

-

number

-

是

-

0

-

第一个贝塞尔参数的y坐标值。

-

cp2x

-

number

-

是

-

0

-

第二个贝塞尔参数的x坐标值。

-

cp2y

-

number

-

是

-

0

-

第二个贝塞尔参数的y坐标值。

-

x

-

number

-

是

-

0

-

路径结束时的x坐标值。

-

y

-

number

-

是

-

0

-

路径结束时的y坐标值。

-
- - -- 示例 - - ``` - @Entry - @Component - struct BezierCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.beginPath() - this.context.moveTo(10, 10) - this.context.bezierCurveTo(20, 100, 200, 100, 200, 20) - this.context.stroke() - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | + | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | + | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | + | cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 | + | x | number | 是 | 0 | 路径结束时的x坐标值。 | + | y | number | 是 | 0 | 路径结束时的y坐标值。 | + +- 示例 + ``` + @Entry + @Component + struct BezierCurveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath() + this.context.moveTo(10, 10) + this.context.bezierCurveTo(20, 100, 200, 100, 200, 20) + this.context.stroke() + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001238281067.png) + ![zh-cn_image_0000001239032415](figures/zh-cn_image_0000001239032415.png) -### quadraticCurveTo +### quadraticCurveTo -quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void +quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 创建二次贝赛尔曲线的路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

cpx

-

number

-

是

-

0

-

贝塞尔参数的x坐标值。

-

cpy

-

number

-

是

-

0

-

贝塞尔参数的y坐标值。

-

x

-

number

-

是

-

0

-

路径结束时的x坐标值。

-

y

-

number

-

是

-

0

-

路径结束时的y坐标值。

-
- - -- 示例 - - ``` - @Entry - @Component - struct QuadraticCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.beginPath(); - this.context.moveTo(20, 20); - this.context.quadraticCurveTo(100, 100, 200, 20); - this.context.stroke(); - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | + | cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 | + | x | number | 是 | 0 | 路径结束时的x坐标值。 | + | y | number | 是 | 0 | 路径结束时的y坐标值。 | + +- 示例 + ``` + @Entry + @Component + struct QuadraticCurveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath(); + this.context.moveTo(20, 20); + this.context.quadraticCurveTo(100, 100, 200, 20); + this.context.stroke(); + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193641084.png) + ![zh-cn_image_0000001193872494](figures/zh-cn_image_0000001193872494.png) -### arc +### arc -arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean\): void +arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void 绘制弧线路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

弧线圆心的x坐标值。

-

y

-

number

-

是

-

0

-

弧线圆心的y坐标值。

-

radius

-

number

-

是

-

0

-

弧线的圆半径。

-

startAngle

-

number

-

是

-

0

-

弧线的起始弧度。

-

endAngle

-

number

-

是

-

0

-

弧线的终止弧度。

-

anticlockwise

-

boolean

-

否

-

false

-

是否逆时针绘制圆弧。

-
- - -- 示例 - - ``` - @Entry - @Component - struct Arc { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.beginPath() - this.context.arc(100, 75, 50, 0, 6.28) - this.context.stroke() - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 弧线圆心的x坐标值。 | + | y | number | 是 | 0 | 弧线圆心的y坐标值。 | + | radius | number | 是 | 0 | 弧线的圆半径。 | + | startAngle | number | 是 | 0 | 弧线的起始弧度。 | + | endAngle | number | 是 | 0 | 弧线的终止弧度。 | + | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | + +- 示例 + ``` + @Entry + @Component + struct Arc { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath() + this.context.arc(100, 75, 50, 0, 6.28) + this.context.stroke() + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193801070.png) + ![zh-cn_image_0000001238832391](figures/zh-cn_image_0000001238832391.png) -### arcTo +### arcTo -arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void +arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 依据圆弧经过的点和圆弧半径创建圆弧路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x1

-

number

-

是

-

0

-

圆弧经过的第一个点的x坐标值。

-

y1

-

number

-

是

-

0

-

圆弧经过的第一个点的y坐标值。

-

x2

-

number

-

是

-

0

-

圆弧经过的第二个点的x坐标值。

-

y2

-

number

-

是

-

0

-

圆弧经过的第二个点的y坐标值。

-

radius

-

number

-

是

-

0

-

圆弧的圆半径值。

-
- - -- 示例 - - ``` - @Entry - @Component - struct ArcTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.moveTo(100, 20); - this.context.arcTo(150, 20, 150, 70, 50); - this.context.stroke(); - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | + | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | + | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | + | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | + | radius | number | 是 | 0 | 圆弧的圆半径值。 | + +- 示例 + ``` + @Entry + @Component + struct ArcTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.moveTo(100, 20); + this.context.arcTo(150, 20, 150, 70, 50); + this.context.stroke(); + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001238521019.png) + ![zh-cn_image_0000001238712419](figures/zh-cn_image_0000001238712419.png) -### ellipse +### ellipse -ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean\): void +ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void 在规定的矩形区域绘制一个椭圆。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

说明

-

x

-

number

-

是

-

0

-

椭圆圆心的x轴坐标。

-

y

-

number

-

是

-

0

-

椭圆圆心的y轴坐标。

-

radiusX

-

number

-

是

-

0

-

椭圆x轴的半径长度。

-

radiusY

-

number

-

是

-

0

-

椭圆y轴的半径长度。

-

rotation

-

number

-

是

-

0

-

椭圆的旋转角度，单位为弧度。

-

startAngle

-

number

-

是

-

0

-

椭圆绘制的起始点角度，以弧度表示。

-

endAngle

-

number

-

是

-

0

-

椭圆绘制的结束点角度，以弧度表示。

-

anticlockwise

-

number

-

否

-

0

-

是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)

-
- - -- 示例 - - ``` - @Entry - @Component - struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.beginPath() - this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true) - this.context.stroke() - }) - Button('back') - .onClick(() => { - router.back() - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | + | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | + | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | + | radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 | + | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | + | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | + | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | + | anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | + +- 示例 + + ``` + @Entry + @Component + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath() + this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true) + this.context.stroke() + }) + Button('back') + .onClick(() => { + router.back() + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193481096.png) + ![zh-cn_image_0000001194192440](figures/zh-cn_image_0000001194192440.png) -### rect +### rect -rect\(x: number, y: number, width: number, height: number\): void +rect(x: number, y: number, width: number, height: number): void 创建矩形路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

指定矩形的左上角x坐标值。

-

y

-

number

-

是

-

0

-

指定矩形的左上角y坐标值。

-

width

-

number

-

是

-

0

-

指定矩形的宽度。

-

height

-

number

-

是

-

0

-

指定矩形的高度。

-
- - -- 示例 - - ``` - @Entry - @Component - struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) - this.context.stroke() - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | + | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | + | width | number | 是 | 0 | 指定矩形的宽度。 | + | height | number | 是 | 0 | 指定矩形的高度。 | + +- 示例 + ``` + @Entry + @Component + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) + this.context.stroke() + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001238601053.png) + ![zh-cn_image_0000001194352440](figures/zh-cn_image_0000001194352440.png) -### fill +### fill -fill\(\): void +fill(): void 对封闭路径进行填充。 -- 示例 - - ``` - @Entry - @Component - struct Fill { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) - this.context.fill() - }) - } - .width('100%') - .height('100%') +- 示例 + ``` + @Entry + @Component + struct Fill { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) + this.context.fill() + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193321138.png) + ![zh-cn_image_0000001238952381](figures/zh-cn_image_0000001238952381.png) -### clip +### clip -clip\(\): void +clip(): void 设置当前路径为剪切路径。 -- 示例 - - ``` - @Entry - @Component - struct Clip { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.rect(0, 0, 200, 200) - this.context.stroke() - this.context.clip() - this.context.fillStyle = "rgb(255,0,0)" - this.context.fillRect(0, 0, 150, 150) - }) - Button('back') - .onClick(() => { - router.back() - }) - } - .width('100%') - .height('100%') +- 示例 + ``` + @Entry + @Component + struct Clip { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.rect(0, 0, 200, 200) + this.context.stroke() + this.context.clip() + this.context.fillStyle = "rgb(255,0,0)" + this.context.fillRect(0, 0, 150, 150) + }) + Button('back') + .onClick(() => { + router.back() + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001238401031.png) + ![zh-cn_image_0000001194032462](figures/zh-cn_image_0000001194032462.png) -### rotate +### rotate -rotate\(rotate: number\): void +rotate(rotate: number): void 针对当前坐标轴进行顺时针旋转。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

rotate

-

number

-

是

-

0

-

设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。

-
- - -- 示例 - - ``` - @Entry - @Component - struct Rotate { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees - this.context.fillRect(70, 20, 50, 50) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | + +- 示例 + ``` + @Entry + @Component + struct Rotate { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees + this.context.fillRect(70, 20, 50, 50) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001238281069.png) + ![zh-cn_image_0000001239032417](figures/zh-cn_image_0000001239032417.png) -### scale +### scale -scale\(x: number, y: number\): void +scale(x: number, y: number): void 设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

设置水平方向的缩放值。

-

y

-

number

-

是

-

0

-

设置垂直方向的缩放值。

-
- - -- 示例 - - ``` - @Entry - @Component - struct Scale { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.strokeRect(10, 10, 25, 25) - this.context.scale(2, 2) // Scale to 200% - this.context.strokeRect(10, 10, 25, 25) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 设置水平方向的缩放值。 | + | y | number | 是 | 0 | 设置垂直方向的缩放值。 | + +- 示例 + ``` + @Entry + @Component + struct Scale { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.strokeRect(10, 10, 25, 25) + this.context.scale(2, 2) // Scale to 200% + this.context.strokeRect(10, 10, 25, 25) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193641086.png) + ![zh-cn_image_0000001193872498](figures/zh-cn_image_0000001193872498.png) -### transform +### transform -transform\(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number\): void +transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： ->- x' = scaleX \* x + skewY \* y + translateX ->- y' = skewX \* x + scaleY \* y + translateY - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

scaleX

-

number

-

是

-

0

-

指定水平缩放值。

-

skewX

-

number

-

是

-

0

-

指定水平倾斜值。

-

skewY

-

number

-

是

-

0

-

指定垂直倾斜值。

-

scaleY

-

number

-

是

-

0

-

指定垂直缩放值。

-

translateX

-

number

-

是

-

0

-

指定水平移动值。

-

translateY

-

number

-

是

-

0

-

指定垂直移动值。

-
- -- 示例 - - ``` - @Entry - @Component - struct Transform { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.fillStyle = 'rgb(0,0,0)' - this.context.fillRect(0, 0, 100, 100) - this.context.transform(1, 0.5, -0.5, 1, 10, 10) - this.context.fillStyle = 'rgb(255,0,0)' - this.context.fillRect(0, 0, 100, 100) - this.context.transform(1, 0.5, -0.5, 1, 10, 10) - this.context.fillStyle = 'rgb(0,0,255)' - this.context.fillRect(0, 0, 100, 100) - }) - } - .width('100%') - .height('100%') +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： +> +> - x' = scaleX \* x + skewY \* y + translateX +> +> - y' = skewX \* x + scaleY \* y + translateY + +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | scaleX | number | 是 | 0 | 指定水平缩放值。 | + | skewX | number | 是 | 0 | 指定水平倾斜值。 | + | skewY | number | 是 | 0 | 指定垂直倾斜值。 | + | scaleY | number | 是 | 0 | 指定垂直缩放值。 | + | translateX | number | 是 | 0 | 指定水平移动值。 | + | translateY | number | 是 | 0 | 指定垂直移动值。 | + +- 示例 + ``` + @Entry + @Component + struct Transform { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: RenderingContext = new RenderingContext(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.fillStyle = 'rgb(0,0,0)' + this.context.fillRect(0, 0, 100, 100) + this.context.transform(1, 0.5, -0.5, 1, 10, 10) + this.context.fillStyle = 'rgb(255,0,0)' + this.context.fillRect(0, 0, 100, 100) + this.context.transform(1, 0.5, -0.5, 1, 10, 10) + this.context.fillStyle = 'rgb(0,0,255)' + this.context.fillRect(0, 0, 100, 100) + }) } + .width('100%') + .height('100%') } - ``` - - ![](figures/zh-cn_image_0000001193801072.png) - - -### setTransform - -setTransform\(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number\): void - -setTransfrom方法使用的参数和transform\(\)方法相同，但setTransform\(\)方法会重置现有的变换矩阵并创建新的变换矩阵。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

scaleX

-

number

-

是

-

0

-

指定水平缩放值。

-

skewX

-

number

-

是

-

0

-

指定水平倾斜值。

-

skewY

-

number

-

是

-

0

-

指定垂直倾斜值。

-

scaleY

-

number

-

是

-

0

-

指定垂直缩放值。

-

translateX

-

number

-

是

-

0

-

指定水平移动值。

-

translateY

-

number

-

是

-

0

-

指定垂直移动值。

-
- -- 示例 - - ``` - @Entry - @Component - struct SetTransform { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.fillStyle = 'rgb(255,0,0)' - this.context.fillRect(0, 0, 100, 100) - this.context.setTransform(1,0.5, -0.5, 1, 10, 10) - this.context.fillStyle = 'rgb(0,0,255)' - this.context.fillRect(0, 0, 100, 100) - }) - } - .width('100%') - .height('100%') + } + ``` + + ![zh-cn_image_0000001238832395](figures/zh-cn_image_0000001238832395.png) + + +### setTransform + +setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void + +setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 + +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | scaleX | number | 是 | 0 | 指定水平缩放值。 | + | skewX | number | 是 | 0 | 指定水平倾斜值。 | + | skewY | number | 是 | 0 | 指定垂直倾斜值。 | + | scaleY | number | 是 | 0 | 指定垂直缩放值。 | + | translateX | number | 是 | 0 | 指定水平移动值。 | + | translateY | number | 是 | 0 | 指定垂直移动值。 | + +- 示例 + ``` + @Entry + @Component + struct SetTransform { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.fillStyle = 'rgb(255,0,0)' + this.context.fillRect(0, 0, 100, 100) + this.context.setTransform(1,0.5, -0.5, 1, 10, 10) + this.context.fillStyle = 'rgb(0,0,255)' + this.context.fillRect(0, 0, 100, 100) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001238521021.png) + ![zh-cn_image_0000001238712421](figures/zh-cn_image_0000001238712421.png) -### translate +### translate -translate\(x: number, y: number\): void +translate(x: number, y: number): void 移动当前坐标系的原点。 -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

设置水平平移量。

-

y

-

number

-

是

-

0

-

设置竖直平移量。

-
- -- 示例 - - ``` - @Entry - @Component - struct Translate { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.fillRect(10, 10, 50, 50) - this.context.translate(70, 70) - this.context.fillRect(10, 10, 50, 50) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 设置水平平移量。 | + | y | number | 是 | 0 | 设置竖直平移量。 | + +- 示例 + ``` + @Entry + @Component + struct Translate { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.fillRect(10, 10, 50, 50) + this.context.translate(70, 70) + this.context.fillRect(10, 10, 50, 50) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193481098.png) + ![zh-cn_image_0000001194192446](figures/zh-cn_image_0000001194192446.png) -### drawImage +### drawImage -drawImage\(image: ImageBitmap, dx: number, dy: number\): void +drawImage(image: ImageBitmap, dx: number, dy: number): void -drawImage\(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number\): void +drawImage(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number): void -drawImage\(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number\):void +drawImage(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void 进行图像绘制。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

image

-

ImageBitmap

-

是

-

null

-

图片资源，请参考ImageBitmap。

-

sx

-

number

-

否

-

0

-

裁切源图像时距离源图像左上角的x坐标值。

-

sy

-

number

-

否

-

0

-

裁切源图像时距离源图像左上角的y坐标值。

-

sWidth

-

number

-

否

-

0

-

裁切源图像时需要裁切的宽度。

-

sHeight

-

number

-

否

-

0

-

裁切源图像时需要裁切的高度。

-

dx

-

number

-

是

-

0

-

绘制区域左上角在x轴的位置。

-

dy

-

number

-

是

-

0

-

绘制区域左上角在y 轴的位置。

-

dWidth

-

number

-

否

-

0

-

绘制区域的宽度。

-

dHeight

-

number

-

否

-

0

-

绘制区域的高度。

-
- - -- 示例 - - ``` - @Entry - @Component - struct ImageExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); - private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.drawImage( this.img,0,0,500,500,0,0,400,200); - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图片资源，请参考ImageBitmap。 | + | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 | + | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | + | sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | + | sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | + | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | + | dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | + | dWidth | number | 否 | 0 | 绘制区域的宽度。 | + | dHeight | number | 否 | 0 | 绘制区域的高度。 | + + +- 示例 + ``` + @Entry + @Component + struct ImageExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.drawImage( this.img,0,0,500,500,0,0,400,200); + }) } + .width('100%') + .height('100%') } - ``` - - ![](figures/zh-cn_image_0000001192915154.png) - - -### createImageData - -createImageData\(width: number, height: number\): Object - -创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagedata.md)。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认

-

描述

-

width

-

number

-

是

-

0

-

ImageData的宽度。

-

height

-

number

-

是

-

0

-

ImageData的高度。

-
- - -### createImageData - -createImageData\(imageData: Object\): Object - -创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagedata.md)。 - -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认

-

描述

-

imagedata

-

Object

-

是

-

null

-

复制现有的ImageData对象。

-
- - -### getImageData - -getImageData\(sx: number, sy: number, sw: number, sh: number\): Object - -以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagedata.md)对象。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

sx

-

number

-

是

-

0

-

需要输出的区域的左上角x坐标。

-

sy

-

number

-

是

-

0

-

需要输出的区域的左上角y坐标。

-

sw

-

number

-

是

-

0

-

需要输出的区域的宽度。

-

sh

-

number

-

是

-

0

-

需要输出的区域的高度。

-
- - -### putImageData - -putImageData\(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number\): void - -使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

imagedata

-

Object

-

是

-

null

-

包含像素值的ImageData对象。

-

dx

-

number

-

是

-

0

-

填充区域在x轴方向的偏移量。

-

dy

-

number

-

是

-

0

-

填充区域在y轴方向的偏移量。

-

dirtyX

-

number

-

否

-

0

-

源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。

-

dirtyY

-

number

-

否

-

0

-

源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。

-

dirtyWidth

-

number

-

否

-

imagedata的宽度

-

源图像数据矩形裁切范围的宽度。

-

dirtyHeight

-

number

-

否

-

imagedata的高度

-

源图像数据矩形裁切范围的高度。

-
- -- 示例 - - ``` - @Entry - @Component - struct PutImageData { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - var imageData = this.context.createImageData(100, 100) - for (var i = 0; i < imageData.data.length; i += 4) { - imageData.data[i + 0] = 255 - imageData.data[i + 1] = 0 - imageData.data[i + 2] = 255 - imageData.data[i + 3] = 255 - } - this.context.putImageData(imageData, 10, 10) - }) - } - .width('100%') - .height('100%') + } + ``` + + ![zh-cn_image_0000001194352442](figures/zh-cn_image_0000001194352442.png) + + +### createImageData + +createImageData(width: number, height: number): Object + +创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 + +- 参数 + | 参数 | 类型 | 必填 | 默认 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | width | number | 是 | 0 | ImageData的宽度。 | + | height | number | 是 | 0 | ImageData的高度。 | + + +### createImageData + +createImageData(imageData: Object): Object + +创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 + +- 参数 + | 参数 | 类型 | 必填 | 默认 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | imagedata | Object | 是 | null | 复制现有的ImageData对象。 | + + +### getImageData + +getImageData(sx: number, sy: number, sw: number, sh: number): Object + +以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。 +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | + | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | + | sw | number | 是 | 0 | 需要输出的区域的宽度。 | + | sh | number | 是 | 0 | 需要输出的区域的高度。 | + + +### putImageData + +putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void + +使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。 + +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | imagedata | Object | 是 | null | 包含像素值的ImageData对象。 | + | dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 | + | dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 | + | dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | + | dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | + | dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | + | dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | + +- 示例 + ``` + @Entry + @Component + struct PutImageData { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var imageData = this.context.createImageData(100, 100) + for (var i = 0; i < imageData.data.length; i += 4) { + imageData.data[i + 0] = 255 + imageData.data[i + 1] = 0 + imageData.data[i + 2] = 255 + imageData.data[i + 3] = 255 + } + this.context.putImageData(imageData, 10, 10) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193075134.png) + ![zh-cn_image_0000001238952387](figures/zh-cn_image_0000001238952387.png) -### restore +### restore -restore\(\): void +restore(): void 对保存的绘图上下文进行恢复。 -- 示例 - - ``` - @Entry - @Component - struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.restore() - }) - } - .width('100%') - .height('100%') +- 示例 + ``` + @Entry + @Component + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.restore() + }) } + .width('100%') + .height('100%') } - ``` + } + ``` -### save +### save -save\(\): void +save(): void 对当前的绘图上下文进行保存。 -- 示例 - - ``` - @Entry - @Component - struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.save() - }) - } - .width('100%') - .height('100%') +- 示例 + ``` + @Entry + @Component + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.save() + }) } + .width('100%') + .height('100%') } - ``` + } + ``` -### createLinearGradient +### createLinearGradient -createLinearGradient\(x0: number, y0: number, x1: number, y1: number\): void +createLinearGradient(x0: number, y0: number, x1: number, y1: number): void 创建一个线性渐变色。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x0

-

number

-

是

-

0

-

起点的x轴坐标。

-

y0

-

number

-

是

-

0

-

起点的y轴坐标。

-

x1

-

number

-

是

-

0

-

终点的x轴坐标。

-

y1

-

number

-

是

-

0

-

终点的y轴坐标。

-
- -- 示例 - - ``` - @Entry - @Component - struct CreateLinearGradient { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x0 | number | 是 | 0 | 起点的x轴坐标。 | + | y0 | number | 是 | 0 | 起点的y轴坐标。 | + | x1 | number | 是 | 0 | 终点的x轴坐标。 | + | y1 | number | 是 | 0 | 终点的y轴坐标。 | + +- 示例 + ``` + @Entry + @Component + struct CreateLinearGradient { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - var grad = this.context.createLinearGradient(50,0, 300,100) - grad.addColorStop(0.0, 'red') - grad.addColorStop(0.5, 'white') - grad.addColorStop(1.0, 'green') - this.context.fillStyle = grad - this.context.fillRect(0, 0, 500, 500) - }) - } - .width('100%') - .height('100%') + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var grad = this.context.createLinearGradient(50,0, 300,100) + this.grad.addColorStop(0.0, 'red') + this.grad.addColorStop(0.5, 'white') + this.grad.addColorStop(1.0, 'green') + this.context.fillStyle = grad + this.context.fillRect(0, 0, 500, 500) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237555149.png) + ![zh-cn_image_0000001194032466](figures/zh-cn_image_0000001194032466.png) -### createRadialGradient +### createRadialGradient -createRadialGradient\(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number\): void +createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): void 创建一个径向渐变色。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x0

-

number

-

是

-

0

-

起始圆的x轴坐标。

-

y0

-

number

-

是

-

0

-

起始圆的y轴坐标。

-

r0

-

number

-

是

-

0

-

起始圆的半径。必须是非负且有限的。

-

x1

-

number

-

是

-

0

-

终点圆的x轴坐标。

-

y1

-

number

-

是

-

0

-

终点圆的y轴坐标。

-

r1

-

number

-

是

-

0

-

终点圆的半径。必须为非负且有限的。

-
- -- 示例 - - ``` - @Entry - @Component - struct CreateRadialGradient { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x0 | number | 是 | 0 | 起始圆的x轴坐标。 | + | y0 | number | 是 | 0 | 起始圆的y轴坐标。 | + | r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 | + | x1 | number | 是 | 0 | 终点圆的x轴坐标。 | + | y1 | number | 是 | 0 | 终点圆的y轴坐标。 | + | r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 | + +- 示例 + ``` + @Entry + @Component + struct CreateRadialGradient { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - var grad = this.context.createRadialGradient(200,200,50, 200,200,200) - grad.addColorStop(0.0, 'red') - grad.addColorStop(0.5, 'white') - grad.addColorStop(1.0, 'green') - this.context.fillStyle = grad - this.context.fillRect(0, 0, 500, 500) - }) - } - .width('100%') - .height('100%') + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var grad = this.context.createRadialGradient(200,200,50, 200,200,200) + this.grad.addColorStop(0.0, 'red') + this.grad.addColorStop(0.5, 'white') + this.grad.addColorStop(1.0, 'green') + this.context.fillStyle = grad + this.context.fillRect(0, 0, 500, 500) + }) } + .width('100%') + .height('100%') } - ``` - - ![](figures/zh-cn_image_0000001192755188.png) + } + ``` + ![zh-cn_image_0000001239032419](figures/zh-cn_image_0000001239032419.png) -## CanvasPattern -一个Object对象, 通过[createPattern](#section1643216163371)方法创建。 +## CanvasPattern +一个Object对象, 通过[createPattern](#createpattern)方法创建。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md index 17fcb8911b13647951beaa32a8d2b97ccf6130ab..23f3be2f75a04b5f45ab5716981c5e9a5556a38f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md @@ -1,103 +1,40 @@ -# 组合手势 +# 组合手势 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 接口 - -GestureGroup\(mode: GestureMode, ...gesture: GestureType\[\]\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

mode

-

GestureMode

-

是

-

-

-

设置组合手势识别模式。

-

gesture

-

TapGesture

-

| LongPressGesture

-

| PanGesture

-

| PinchGesture

-

| RotationGesture

-

是

-

-

-

可变长参数，1个或者多个基础手势类型，这些手势会被组合识别。

-
- -- GestureMode枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

Sequence

-

顺序识别，按照手势的注册顺序识别手势，直到所有手势识别成功。当有一个手势识别失败时，所有手势识别失败。

-

Parallel

-

并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。

-

Exclusive

-

互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。

-
- - -## 事件 - - - - - - - - - -

名称

-

功能描述

-

onCancel(event: () => void)

-

顺序组合手势（GestureMode.Sequence）取消后触发回调。

-
- -## 示例 + +## 接口 + +GestureGroup(mode: GestureMode, ...gesture: GestureType[]) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | mode | GestureMode | 是 | - | 设置组合手势识别模式。 | + | gesture | [TapGesture](ts-basic-gestures-tapgesture.md)
\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)
\| [PanGesture](ts-basic-gestures-pangesture.md)
\| [PinchGesture](ts-basic-gestures-pinchgesture.md)
\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | 是 | - | 可变长参数，1个或者多个基础手势类型，这些手势会被组合识别。 | + +- GestureMode枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Sequence | 顺序识别，按照手势的注册顺序识别手势，直到所有手势识别成功。当有一个手势识别失败时，所有手势识别失败。 | + | Parallel | 并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。 | + | Exclusive | 互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onCancel(event: () => void) | 顺序组合手势（GestureMode.Sequence）取消后触发回调。 | + + +## 示例 ``` @Entry @@ -142,5 +79,4 @@ struct GestureGroupExample { } ``` -![](figures/GestureGroup.gif) - +![zh-cn_image_0000001174104384](figures/zh-cn_image_0000001174104384.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md index 890dddfd3f0f5460b8701fa0016a1cfe4c6f9692..475e50e2314c1cc389ebc899124ad4d2fc91a9b2 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md @@ -1,78 +1,40 @@ -# Canvas +# Canvas ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![img](https://gitee.com/openharmony/docs/raw/master/zh-cn/application-dev/public_sys-resources/icon-note.gif) **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 提供画布组件，用于自定义绘制图形。 -## 权限列表 +## 权限列表 无 -## 子组件 +## 子组件 不支持。 -## 接口 - -Canvas\(context: CanvasRenderingContext2D\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

context

-

CanvasRenderingContext2D

-

是

-

-

-

见CanvasRenderingContext2D对象。

-
- - -## 属性 - -支持[通用属性](ts-universal-attributes-size.md)。 - -## 事件 - -除支持[通用事件](ts-universal-events-click.md)外，还支持如下事件： - - - - - - - - - - - -

名称

-

参数

-

描述

-

onReady(callback: () => void)

-

无

-

画布组件的事件回调，可以在此时进行绘制。

-
- -## 示例 +## 接口 + +Canvas(context: CanvasRenderingContext2D) + +- 参数 + + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | ------- | ---------------------------------------------------------- | ---- | ------ | -------------------------------- | + | context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 是 | - | 见CanvasRenderingContext2D对象。 | + +## 属性 + +支持[通用属性](ts-universal-attributes.md)。 + +## 事件 + +除支持[通用事件](ts-universal-events.md)外，还支持如下事件： + +| 名称 | 参数 | 描述 | +| ----------------------------- | ---- | ---------------------------------------- | +| onReady(callback: () => void) | 无 | 画布组件的事件回调，可以在此时进行绘制。 | + +## 示例 ``` @Entry @@ -96,4 +58,3 @@ struct CanvasExample { } } ``` - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md index ece4af28de8ab0b2b2f7f3c5a62f29a081a7065f..a2f34e283e7070efebde88e5dfe5b76ae0d9be7a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md @@ -1,85 +1,51 @@ -# CanvasGradient对象 +# CanvasGradient对象 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -渐变对象。 - -## addColorStop -addColorStop\(offset: number, color: string\): void +渐变对象。 -设置渐变断点值，包括偏移和颜色。 -- 参数 +## addColorStop - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

offset

-

number

-

是

-

0

-

设置渐变点距离起点的位置占总体长度的比例，范围为0到1。

-

color

-

string

-

是

-

'ffffff'

-

设置渐变的颜色。

-
+addColorStop(offset: number, color: string): void -- 示例 +设置渐变断点值，包括偏移和颜色。 - ``` - @Entry - @Component - struct Page45 { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - var grad = this.context.createLinearGradient(50,0, 300,100) - grad.addColorStop(0.0, 'red') - grad.addColorStop(0.5, 'white') - grad.addColorStop(1.0, 'green') - this.context.fillStyle = grad - this.context.fillRect(0, 0, 500, 500) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 | + | color | string | 是 | 'ffffff' | 设置渐变的颜色。 | + +- 示例 + ``` + @Entry + @Component + struct Page45 { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var grad = this.context.createLinearGradient(50,0, 300,100) + this.grad.addColorStop(0.0, 'red') + this.grad.addColorStop(0.5, 'white') + this.grad.addColorStop(1.0, 'green') + this.context.fillStyle = grad + this.context.fillRect(0, 0, 500, 500) + }) } + .width('100%') + .height('100%') } - ``` - - ![](figures/zh-cn_image_0000001192915130.png) - + } + ``` + ![zh-cn_image_0000001194032516](figures/zh-cn_image_0000001194032516.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md index fcf6834efccdf82fe89ae1b5ade67eaa00ac30b5..4d29fbf8f32a1071465cc7c31be6fb0242c4a957 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md @@ -1,107 +1,16 @@ -# ImageBitmap对象 +# ImageBitmap对象 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -图片对象。 -## 接口 +CanvasImageData对象可以存储canvas渲染的像素数据。 -ImageBitmap\(src: string\) -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

src

-

string

-

是

-

-

-

图片对象所在的路径。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

默认值

-

必填

-

描述

-

width

-

Length

-

0px

-

否

-

图片的宽度。

-

height

-

Length

-

0px

-

否

-

图片的高度。

-
- -示例 - -``` -@Entry -@Component -struct DrawImageExample { - private settings:RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private img:ImageBitmap = new ImageBitmap("common/images/example.jpg") - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.context.drawImage( this.img,0,0,400,200) - }) - } - .width('100%') - .height('100%') - } -} -``` - -![](figures/zh-cn_image_0000001192595194.png) +## 属性 +| 属性 | 类型 | 描述 | +| -------- | -------- | -------- | +| width | number | 矩形区域实际像素宽度。 | +| height | number | 矩形区域实际像素高度。 | +| data | <Uint8ClampedArray> | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md index 3e8f5ba4220845a682b94bf83453d406d755c92f..2e5d0d3546dad89a41f8fba0989681d50f4fbeae 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md @@ -1,41 +1,16 @@ -# ImageData对象 +# ImageData对象 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -CanvasImageData对象可以存储canvas渲染的像素数据。 -## 属性 +ImageData对象可以存储canvas渲染的像素数据。 - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

描述

-

width

-

number

-

矩形区域实际像素宽度。

-

height

-

number

-

矩形区域实际像素高度。

-

data

-

<Uint8ClampedArray>

-

一维数组，保存了相应的颜色数据，数据值范围为0到255。

-
+## 属性 + +| 属性 | 类型 | 描述 | +| -------- | -------- | -------- | +| width | number | 矩形区域实际像素宽度。 | +| height | number | 矩形区域实际像素高度。 | +| data | <Uint8ClampedArray> | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md index 3fc7865da9b7e882891fb9d0899b680e129939ea..ccb572ecae5f7de57c1a0c32f0918775ce5bb37d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md @@ -1,1318 +1,563 @@ -# Lottie +# Lottie ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -Lottie为三方开源库，依赖Canvas与RenderingContext。 -## 权限列表 +## 权限列表 无 -## 导入模块 + +## 导入模块 ``` -import lottie from 'lottie-web' +import lottie from 'lottie-ohos-ets' ``` ->![](../../public_sys-resources/icon-note.gif) **说明：** ->'lottie-web' 名字以实际生态发布后的命名为准。 - -## lottie.loadAnimation - -loadAnimation\( - -path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string \): AnimationItem - -加载动画，须提前声明Animator\('\_\_lottie\_ets'\)对象，并在Canvas完成布局后调用。可配合Canvas组件生命周期接口使用，比如onAppear\(\)与onPageShow\(\)。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

path

-

string

-

是

-

hap包内动画资源文件路径，仅支持json格式。示例：path: "common/lottie/data.json"

-

container

-

object

-

是

-

canvas绘图上下文，声明范式需提前声明CanvasRenderingContext2D。

-

render

-

string

-

是

-

渲染类型，仅支持“canvas”。

-

loop

-

boolean | number

-

否

-

动画播放结束后，是否循环播放，默认值true。值类型为number，且大于等于1时为设置的重复播放的次数。

-

autoplay

-

boolean

-

否

-

是否自动播放动画，默认值true。

-

name

-

string

-

否

-

开发者自定义的动画名称，后续支持通过该名称引用控制动画，默认为空。

-

initialSegment

-

[number, number]

-

否

-

指定动画播放的起始帧号，指定动画播放的结束帧号。

-
- - -## lottie.destroy - -destroy\(name: string\): void - -销毁动画，页面退出时，必须调用。可配合Canvas组件生命周期接口使用，比如onDisappear\(\)与onPageHide\(\)。 - -- 参数 - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

name

-

string

-

是

-

被指定的动画名，同loadAnimation接口参数name, 缺省时销毁所有动画。

-
- -- 示例 - - ``` - import lottie from 'lottie-web' - - @Entry - @Component - struct Index { - private controller: CanvasRenderingContext2D = new CanvasRenderingContext2D() - private animateName: string = "animate" - private animatePath: string = "common/lottie/data.json" - private animateItem: any = null - - private onPageHide(): void { - console.log('onPageHide') - lottie.destroy() - } - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.controller) - .width('30%') - .height('20%') - .backgroundColor('#0D9FFB') - .onAppear(() => { - console.log('canvas onAppear'); - this.animateItem = lottie.loadAnimation({ - container: this.controller, - renderer: 'canvas', - loop: true, - autoplay: true, - name: this.animateName, - path: this.animatePath, - }) +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 在Terminal窗口使用 npm install 'lottie-ohos-ets'命令下载Lottie。 + + +## lottie.loadAnimation + +loadAnimation( + +path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string ): AnimationItem + +加载动画，须提前声明Animator('__lottie_ets')对象，并在Canvas完成布局后调用。可配合Canvas组件生命周期接口使用，比如onAppear()与onPageShow()。 + +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | path | string | 是 | hap包内动画资源文件路径，仅支持json格式。示例：path: "common/lottie/data.json" | + | container | object | 是 | canvas绘图上下文，声明范式需提前声明CanvasRenderingContext2D。 | + | render | string | 是 | 渲染类型，仅支持“canvas”。 | + | loop | boolean \| number | 否 | 动画播放结束后，是否循环播放，默认值true。值类型为number，且大于等于1时为设置的重复播放的次数。 | + | autoplay | boolean | 否 | 是否自动播放动画，默认值true。 | + | name | string | 否 | 开发者自定义的动画名称，后续支持通过该名称引用控制动画，默认为空。 | + | initialSegment | [number, number] | 否 | 指定动画播放的起始帧号，指定动画播放的结束帧号。 | + + +## lottie.destroy + +destroy(name: string): void + +销毁动画，页面退出时，必须调用。可配合Canvas组件生命周期接口使用，比如onDisappear()与onPageHide()。 + +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name, 缺省时销毁所有动画。 | + +- 示例 + ``` + import lottie from 'lottie-web' + + @Entry + @Component + struct Index { + private controller: CanvasRenderingContext2D = new CanvasRenderingContext2D() + private animateName: string = "animate" + private animatePath: string = "common/lottie/data.json" + private animateItem: any = null + + private onPageHide(): void { + console.log('onPageHide') + lottie.destroy() + } + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.controller) + .width('30%') + .height('20%') + .backgroundColor('#0D9FFB') + .onAppear(() => { + console.log('canvas onAppear'); + this.animateItem = lottie.loadAnimation({ + container: this.controller, + renderer: 'canvas', + loop: true, + autoplay: true, + name: this.animateName, + path: this.animatePath, + }) + }) + + Animator('__lottie_ets') // declare Animator('__lottie_ets') when use lottie + Button('load animation') + .onClick(() => { + if (this.animateItem != null) { + this.animateItem.destroy() + this.animateItem = null + } + this.animateItem = lottie.loadAnimation({ + container: this.controller, + renderer: 'canvas', + loop: true, + autoplay: true, + name: this.animateName, + path: this.animatePath, + initialSegment: [10, 50], }) - - Animator('__lottie_ets') // declare Animator('__lottie_ets') when use lottie - Button('load animation') - .onClick(() => { - if (this.animateItem != null) { - this.animateItem.destroy() - this.animateItem = null - } - this.animateItem = lottie.loadAnimation({ - container: this.controller, - renderer: 'canvas', - loop: true, - autoplay: true, - name: this.animateName, - path: this.animatePath, - initialSegment: [10, 50], - }) + }) + + Button('destroy animation') + .onClick(() => { + lottie.destroy(this.animateName) + this.animateItem = null }) - - Button('destroy animation') - .onClick(() => { - lottie.destroy(this.animateName) - this.animateItem = null - }) - } - .width('100%') - .height('100%') } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/lottie-ark-2-0-canvas-ui-animate.gif) + ![zh-cn_image_0000001194352468](figures/zh-cn_image_0000001194352468.gif) -## lottie.play +## lottie.play -play\(name: string\): void +play(name: string): void 播放指定动画。 -- 参数 - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

name

-

string

-

是

-

被指定的动画名, 同loadAnimation接口参数name，缺省时播放所有动画。

-
- -- 示例 - - ``` - lottie.play(this.animateName) - ``` - - -## lottie.pause - -pause\(name: string\): void - -暂停指定动画，下次调用lottie.play\(\)从当前帧开始。 - -- 参数 - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

name

-

string

-

是

-

被指定的动画名，同loadAnimation接口入参name，缺省时暂停所有动画。

-
- -- 示例 - - ``` - lottie.pause(this.animateName) - ``` - - -## lottie.togglePause - -togglePause\(name: string\): void - -暂停或播放指定动画，等效于lottie.play\(\)与lottie.pause\(\)切换调用。 - -- 参数 - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

name

-

string

-

是

-

被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。

-
- -- 示例 - - ``` - lottie.togglePause(this.animateName) - ``` - - -## lottie.stop - -stop\(name: string\): void - -停止指定动画，下次调用lottie.play\(\)从第一帧开始。 - -- 参数 - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

name

-

string

-

是

-

被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。

-
- -- 示例 - - ``` - lottie.stop(this.animateName) - ``` - - -## lottie.setSpeed - -setSpeed\(speed: number, name: string\): void +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | name | string | 是 | 被指定的动画名, 同loadAnimation接口参数name，缺省时播放所有动画。 | + +- 示例 + ``` + lottie.play(this.animateName) + ``` + + +## lottie.pause + +pause(name: string): void + +暂停指定动画，下次调用lottie.play()从当前帧开始。 + +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | name | string | 是 | 被指定的动画名，同loadAnimation接口入参name，缺省时暂停所有动画。 | + +- 示例 + ``` + lottie.pause(this.animateName) + ``` + + +## lottie.togglePause + +togglePause(name: string): void + +暂停或播放指定动画，等效于lottie.play()与lottie.pause()切换调用。 + +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 | + +- 示例 + ``` + lottie.togglePause(this.animateName) + ``` + + +## lottie.stop + +stop(name: string): void + +停止指定动画，下次调用lottie.play()从第一帧开始。 + +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 | + +- 示例 + ``` + lottie.stop(this.animateName) + ``` + + +## lottie.setSpeed + +setSpeed(speed: number, name: string): void 设置指定动画播放速度。 -- 参数 - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

speed

-

number

-

是

-

值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0/-1.0正常速度播放。

-

name

-

string

-

是

-

被指定的动画，同loadAnimation接口参数name，缺省时停止所有动画。

-
- -- 示例 - - ``` - lottie.setSpeed(5, this.animateName) - ``` - - -## lottie.setDirection - -setDirection\(direction: AnimationDirection, name: string\): void +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0/-1.0正常速度播放。 | + | name | string | 是 | 被指定的动画，同loadAnimation接口参数name，缺省时停止所有动画。 | + +- 示例 + ``` + lottie.setSpeed(5, this.animateName) + ``` + + +## lottie.setDirection + +setDirection(direction: AnimationDirection, name: string): void 设置指定动画播放顺序。 -- 参数 - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

direction

-

AnimationDirection

-

是

-

1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。

-

AnimationDirection：1 | -1

-

name

-

string

-

是

-

被指定的动画名，同loadAnimation接口参数name，缺省时设置所有动画方向。

-
- - -- 示例 - - ``` - lottie.setDirection(-1, this.controlName) - ``` - - -## AnimationItem +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | direction | AnimationDirection | 是 | 1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。
AnimationDirection：1 \| -1 | + | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时设置所有动画方向。 | + +- 示例 + ``` + lottie.setDirection(-1, this.animateName) + ``` + + +## AnimationItem loadAnimation接口的返回对象，具有属性与接口。属性描述如下： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

参数描述

-

name

-

string

-

动画名称。

-

isLoaded

-

boolean

-

动画是否已加载。

-

currentFrame

-

number

-

当前播放的帧号, 默认精度为>=0.0的浮点数, 调用setSubframe(false)后精度为去小数点后的正整数。

-

currentRawFrame

-

number

-

当前播放帧数, 精度为>=0.0的浮点数。

-

firstFrame

-

number

-

当前播放片段的第一帧帧号。

-

totalFrames

-

number

-

当前播放片段的总帧数。

-

frameRate

-

number

-

帧率 (frame/s)。

-

frameMult

-

number

-

帧率 (frame/ms)。

-

playSpeed

-

number

-

值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 | -1.0正常速度播放。

-

playDirection

-

number

-

播放方向, 1为正放, -1为倒放。

-

playCount

-

number

-

动画完成播放的次数。

-

isPaused

-

boolean

-

当前动画是否已暂停, 值为true动画已暂停。

-

autoplay

-

boolean

-

加载动画后是否自动播放, 若值为false需要再调用play()接口开始播放。

-

loop

-

boolean | number

-

类型为boolean时是否循环播放, 类型为number时播放次数。

-

renderer

-

any

-

动画渲染对象, 根据渲染类型而定。

-

animationID

-

string

-

动画ID。

-

timeCompleted

-

number

-

当前动画片段完成单次播放的帧数, 受AnimationSegment设置影响, 与totalFrames属性值相同。

-

segmentPos

-

number

-

当前动画片段序号, 值为>=0的正整数。

-

isSubframeEnabled

-

boolean

-

关联了currentFrame的精度是否为浮点数。

-

segments

-

AnimationSegment | AnimationSegment[]

-

当前动画的播放片段。

-
- -## AnimationItem.play - -play\(name?: string\): void +| 参数名称 | 参数类型 | 参数描述 | +| -------- | -------- | -------- | +| name | string | 动画名称。 | +| isLoaded | boolean | 动画是否已加载。 | +| currentFrame | number | 当前播放的帧号, 默认精度为>=0.0的浮点数, 调用setSubframe(false)后精度为去小数点后的正整数。 | +| currentRawFrame | number | 当前播放帧数, 精度为>=0.0的浮点数。 | +| firstFrame | number | 当前播放片段的第一帧帧号。 | +| totalFrames | number | 当前播放片段的总帧数。 | +| frameRate | number | 帧率 (frame/s)。 | +| frameMult | number | 帧率 (frame/ms)。 | +| playSpeed | number | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 \| -1.0正常速度播放。 | +| playDirection | number | 播放方向, 1为正放, -1为倒放。 | +| playCount | number | 动画完成播放的次数。 | +| isPaused | boolean | 当前动画是否已暂停, 值为true动画已暂停。 | +| autoplay | boolean | 加载动画后是否自动播放, 若值为false需要再调用play()接口开始播放。 | +| loop | boolean \| number | 类型为boolean时是否循环播放, 类型为number时播放次数。 | +| renderer | any | 动画渲染对象, 根据渲染类型而定。 | +| animationID | string | 动画ID。 | +| timeCompleted | number | 当前动画片段完成单次播放的帧数, 受AnimationSegment设置影响, 与totalFrames属性值相同。 | +| segmentPos | number | 当前动画片段序号, 值为>=0的正整数。 | +| isSubframeEnabled | boolean | 关联了currentFrame的精度是否为浮点数。 | +| segments | AnimationSegment \| AnimationSegment[] | 当前动画的播放片段。 | + + +## AnimationItem.play + +play(name?: string): void 播放动画。 -- 参数 - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

name

-

string

-

否

-

被指定的动画名，缺省默认为空。

-
- -- 示例 - - ``` - this.anim.play() - ``` - - -## AnimationItem.destroy - -destroy\(name?: string\): void +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | name | string | 否 | 被指定的动画名，缺省默认为空。 | + +- 示例 + ``` + this.animateItem.play() + ``` + + +## AnimationItem.destroy + +destroy(name?: string): void 销毁动画。 -- 参数 - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

name

-

string

-

否

-

被指定的动画名，缺省默认为空。

-
- -- 示例 - - ``` - this.anim.destroy() - ``` - - -## AnimationItem.pause - -pause\(name?: string\): void +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | name | string | 否 | 被指定的动画名，缺省默认为空。 | + +- 示例 + ``` + this.animateItem.destroy() + ``` + + +## AnimationItem.pause + +pause(name?: string): void 暂停动画，下次调用play接口从当前帧开始播放。 -- 参数 - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

name

-

string

-

否

-

被指定的动画名，缺省默认为空。

-
- -- 示例 - - ``` - this.anim.pause() - ``` - - -## AnimationItem.togglePause - -togglePause\(name?: string\): void +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | name | string | 否 | 被指定的动画名，缺省默认为空。 | + +- 示例 + ``` + this.animateItem.pause() + ``` + + +## AnimationItem.togglePause + +togglePause(name?: string): void 暂停或播放动画，等效于play接口与pause接口之间轮换调用。 -- 参数 - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

name

-

string

-

否

-

被指定的动画名，缺省默认为空。

-
- -- 示例 - - ``` - this.anim.togglePause() - ``` - - -## AnimationItem.stop - -stop\(name?: string\): void +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | name | string | 否 | 被指定的动画名，缺省默认为空。 | + +- 示例 + ``` + this.animateItem.togglePause() + ``` + + +## AnimationItem.stop + +stop(name?: string): void 停止动画，下次调用play接口从第一帧开始播放。 -- 参数 - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

name

-

string

-

否

-

被指定的动画名，缺省默认为空。

-
- -- 示例 - - ``` - this.anim.stop() - ``` - - -## AnimationItem.setSpeed - -setSpeed\(speed: number\): void +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | name | string | 否 | 被指定的动画名，缺省默认为空。 | + +- 示例 + ``` + this.animateItem.stop() + ``` + + +## AnimationItem.setSpeed + +setSpeed(speed: number): void 设置动画播放速度。 -- 参数 - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

speed

-

number

-

是

-

值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 | -1.0正常速度播放。

-
- -- 示例 - - ``` - this.anim.setSpeed(5); - ``` - - -## AnimationItem.setDirection - -setDirection\(direction: AnimationDirection\): void +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 \| -1.0正常速度播放。 | + +- 示例 + ``` + this.animateItem.setSpeed(5); + ``` -设置动画播放顺序。 -- 参数 +## AnimationItem.setDirection - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

direction

-

AnimationDirection

-

是

-

1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。

-

AnimationDirection：1 | -1。

-
+setDirection(direction: AnimationDirection): void +设置动画播放顺序。 -- 示例 +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | direction | AnimationDirection | 是 | 1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。
AnimationDirection：1 \| -1。 | - ``` - this.anim.setDirection(-1) - ``` +- 示例 + ``` + this.animateItem.setDirection(-1) + ``` -## AnimationItem.goToAndStop +## AnimationItem.goToAndStop -goToAndStop\(value: number, isFrame: boolean\): void +goToAndStop(value: number, isFrame: boolean): void 设置动画停止在指定帧或时间进度。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

value

-

number

-

是

-

帧号(值大于等于0)或时间进度(ms)。

-

isFrame

-

boolean

-

否

-

true: 按指定帧控制，false:按指定时间控制，缺省默认false。

-

name

-

string

-

否

-

被指定的动画名，缺省默认为空。

-
- - -- 示例 - - ``` - // 按帧号控制 - this.anim.goToAndStop(25, true) - // 按时间进度控制 - this.anim.goToAndStop(300, false, this.animateName) - ``` - - -## AnimationItem.goToAndPlay - -goToAndPlay\(value: number, isFrame: boolean\): void +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | value | number | 是 | 帧号(值大于等于0)或时间进度(ms)。 | + | isFrame | boolean | 否 | true: 按指定帧控制，false:按指定时间控制，缺省默认false。 | + | name | string | 否 | 被指定的动画名，缺省默认为空。 | + +- 示例 + ``` + // 按帧号控制 + this.animateItem.goToAndStop(25, true) + // 按时间进度控制 + this.animateItem.goToAndStop(300, false, this.animateName) + ``` + + +## AnimationItem.goToAndPlay + +goToAndPlay(value: number, isFrame: boolean): void 设置动画从指定帧或时间进度开始播放。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

value

-

number

-

是

-

帧号(值大于等于0)或时间进度(ms)

-

isFrame

-

boolean

-

是

-

true：按指定帧控制， false：按指定时间控制，缺省默认false。

-

name

-

string

-

否

-

被指定的动画名，缺省默认为空。

-
- - -- 示例 - - ``` - // 按帧号控制 - this.anim.goToAndPlay(25, true) - // 按时间进度控制 - this.anim.goToAndPlay(300, false, this.animateName) - ``` - - -## AnimationItem.playSegments - -playSegments\(segments: AnimationSegment | AnimationSegment\[\], forceFlag: boolean\): void +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | value | number | 是 | 帧号(值大于等于0)或时间进度(ms) | + | isFrame | boolean | 是 | true：按指定帧控制， false：按指定时间控制，缺省默认false。 | + | name | string | 否 | 被指定的动画名，缺省默认为空。 | + +- 示例 + ``` + // 按帧号控制 + this.animateItem.goToAndPlay(25, true) + // 按时间进度控制 + this.animateItem.goToAndPlay(300, false, this.animateName) + ``` + + +## AnimationItem.playSegments + +playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean): void 设置动画仅播放指定片段。 -- 参数 - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

segments

-

AnimationSegment = [number, number] | AnimationSegment[]

-

是

-

片段或片段列表；

-

如果片段列表全部播放完毕后，下轮循环播放仅播放最后一个片段

-

forceFlag

-

boolean

-

是

-

true：即时生效播放，false：延迟到下轮循环播放再生效

-
- - -- 示例 - - ``` - // 指定播放片段 - this.anim.playSegments([10, 20], false) - // 指定播放片段列表 - this.anim.playSegments([[0, 5], [20, 30]], true) - ``` - - -## AnimationItem.resetSegments - -resetSegments\(forceFlag: boolean\): void +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | segments | AnimationSegment = [number, number] \| AnimationSegment[] | 是 | 片段或片段列表；
如果片段列表全部播放完毕后，下轮循环播放仅播放最后一个片段 | + | forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 | -重置动画播放片段，播放全帧。 +- 示例 + ``` + // 指定播放片段 + this.animateItem.playSegments([10, 20], false) + // 指定播放片段列表 + this.animateItem.playSegments([[0, 5], [20, 30]], true) + ``` -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

forceFlag

-

boolean

-

是

-

true：即时生效播放，false：延迟到下轮循环播放再生效

-
+## AnimationItem.resetSegments +resetSegments(forceFlag: boolean): void -- 示例 +重置动画播放片段，播放全帧。 - ``` - this.anim.resetSegments(true) - ``` +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 | +- 示例 + ``` + this.animateItem.resetSegments(true) + ``` -## AnimationItem.resize -resize\(\): void +## AnimationItem.resize -刷新动画布局。 +resize(): void -- 示例 +刷新动画布局。 - ``` - this.anim.resize() - ``` +- 示例 + ``` + this.animateItem.resize() + ``` -## AnimationItem.setSubframe +## AnimationItem.setSubframe -setSubframe\(useSubFrame: boolean\): void +setSubframe(useSubFrame: boolean): void 设置属性currentFrame的精度显示浮点数。 -- 参数 - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

useSubFrames

-

boolean

-

是

-

currentFrame属性默认显示浮点数，该接口参数将影响currentFrame属性的精度。

-

true：属性currentFrame显示浮点。

-

false：属性currentFrame去浮点数显示整数。

-
- - -- 示例 - - ``` - this.anim.setSubframe(false) - ``` - - -## AnimationItem.getDuration - -getDuration\(inFrames?: boolean\): void - -获取动画单次完整播放的时间\(与播放速度无关\)或帧数, 与Lottie.loadAnimation接口入参initialSegment有关。 - -- 参数 - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

inFrames

-

boolean

-

否

-

true：获取帧数， false：获取时间(单位ms)，缺省默认false。

-
- - -- 示例 - - ``` - this.anim.setSubframe(true) - ``` - - -## AnimationItem.addEventListener - -addEventListener\(name: AnimationEventName, callback: AnimationEventCallback\): \(\) =\> void +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | useSubFrames | boolean | 是 | currentFrame属性默认显示浮点数，该接口参数将影响currentFrame属性的精度。
true：属性currentFrame显示浮点。
false：属性currentFrame去浮点数显示整数。 | + +- 示例 + ``` + this.animateItem.setSubframe(false) + ``` + + +## AnimationItem.getDuration + +getDuration(inFrames?: boolean): void + +获取动画单次完整播放的时间(与播放速度无关)或帧数, 与Lottie.loadAnimation接口入参initialSegment有关。 + +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | inFrames | boolean | 否 | true：获取帧数， false：获取时间(单位ms)，缺省默认false。 | + +- 示例 + ``` + this.animateItem.getDuration(true) + ``` + + +## AnimationItem.addEventListener + +addEventListener<T = any>(name: AnimationEventName, callback: AnimationEventCallback<T>): () => void 添加侦听事件, 事件完成后会触发指定回调函数。返回可删除该侦听事件的函数对象。 -- 参数 - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

name

-

AnimationEventName

-

是

-

指定动画事件类型，Lottie内置动画事件类型AnimationEventName：

-

'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images'

-

callback

-

AnimationEventCallback<T>

-

是

-

用户自定义回调函数

-
- - -- 示例 - - ``` - private callbackItem: any = function() { - console.log("grunt loopComplete") - } - let delFunction = this.animateItem.addEventListener('loopComplete', this.callbackItem) - - // 删除侦听 - delFunction() - ``` +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' | + | callback | AnimationEventCallback<T> | 是 | 用户自定义回调函数 | +- 示例 + ``` + private callbackItem: any = function() { + console.log("grunt loopComplete") + } + let delFunction = this.animateItem.addEventListener('loopComplete', this.animateName) + + // 删除侦听 + delFunction() + ``` -## AnimationItem.removeEventListener -removeEventListener\(name: AnimationEventName, callback?: AnimationEventCallback\): void +## AnimationItem.removeEventListener + +removeEventListener<T = any>(name: AnimationEventName, callback?: AnimationEventCallback<T>): void 删除侦听事件。 -- 参数 - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

name

-

AnimationEventName

-

是

-

指定动画事件类型，Lottie内置动画事件类型AnimationEventName：

-

'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images'

-

callback

-

AnimationEventCallback<T>

-

是

-

用户自定义回调函数；缺省为空时, 删除此事件的所有回调函数。

-
- - -- 示例 - - ``` - this.animateItem.removeEventListener('loopComplete', this.callbackItem) - ``` - - -## AnimationItem.triggerEvent - -triggerEvent\(name: AnimationEventName, args: T\): void +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' | + | callback | AnimationEventCallback<T> | 是 | 用户自定义回调函数；缺省为空时, 删除此事件的所有回调函数。 | -直接触发指定事件的所有已设置的回调函数。 +- 示例 + ``` + this.animateItem.removeEventListener('loopComplete', this.animateName) + ``` -- 参数 - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

name

-

AnimationEventName

-

是

-

指定动画事件类型

-

-

args

-

any

-

是

-

用户自定义回调参数

-
- - -- 示例 - - ``` - private triggerCallBack: any = function(item) { - console.log("trigger loopComplete, name:" + item.name) - } - - this.animateItem.addEventListener('loopComplete', this.triggerCallBack) - this.animateItem.triggerEvent('loopComplete', this.animateItem) - this.animateItem.removeEventListener('loopComplete', this.triggerCallBack) - ``` +## AnimationItem.triggerEvent + +triggerEvent<T = any>(name: AnimationEventName, args: T): void + +直接触发指定事件的所有已设置的回调函数。 +- 参数 + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | name | AnimationEventName | 是 | 指定动画事件类型 | + | args | any | 是 | 用户自定义回调参数 | + +- 示例 + ``` + private triggerCallBack: any = function(item) { + console.log("trigger loopComplete, name:" + item.name) + } + + this.animateItem.addEventListener('loopComplete', this.triggerCallBack) + this.animateItem.triggerEvent('loopComplete', this.animateItem) + this.animateItem.removeEventListener('loopComplete', this.triggerCallBack) + ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md index ae6665dd8b95a396696b7e75f3e265b777522755..9659dda43e23befba5bafb5f4ad867ac6286167c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md @@ -1,950 +1,442 @@ -# Path2D对象 +# Path2D对象 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。 -## addPath -addPath\(path: Object\): void +## addPath + +addPath(path: Object): void 将另一个路径添加到当前的路径对象中。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

path

-

Object

-

是

-

null

-

需要添加到当前路径的路径对象

-
- -- 示例 - - ``` - @Entry - @Component - struct AddPath { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z") - private path2Db: Path2D = new Path2D() - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.path2Db.addPath(this.path2Da) - this.context.stroke(this.path2Db) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | path | Object | 是 | null | 需要添加到当前路径的路径对象 | + +- 示例 + ``` + @Entry + @Component + struct AddPath { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z") + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.addPath(this.path2Da) + this.context.stroke(this.path2Db) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001192595216.png) + ![zh-cn_image_0000001238712467](figures/zh-cn_image_0000001238712467.png) -## closePath +## closePath -closePath\(\): void +closePath(): void 将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。 -- 示例 - - ``` - @Entry - @Component - struct ClosePath { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private path2Db: Path2D = new Path2D() - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.path2Db.moveTo(200, 100) - this.path2Db.lineTo(300, 100) - this.path2Db.lineTo(200, 200) - this.path2Db.closePath() - this.context.stroke(this.path2Db) - }) - } - .width('100%') - .height('100%') +- 示例 + ``` + @Entry + @Component + struct ClosePath { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.moveTo(200, 100) + this.path2Db.lineTo(300, 100) + this.path2Db.lineTo(200, 200) + this.path2Db.closePath() + this.context.stroke(this.path2Db) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/unnaming-(4).png) + ![zh-cn_image_0000001193872542](figures/zh-cn_image_0000001193872542.png) -## moveTo +## moveTo -moveTo\(x: number, y: number\): void +moveTo(x: number, y: number): void 将路径的当前坐标点移动到目标点，移动过程中不绘制线条。 -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

目标点X轴坐标

-

y

-

number

-

是

-

0

-

目标点Y轴坐标

-
- -- 示例 - - ``` - @Entry - @Component - struct MoveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private path2Db: Path2D = new Path2D() - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.path2Db.moveTo(50, 100) - this.path2Db.lineTo(250, 100) - this.path2Db.lineTo(150, 200) - this.path2Db.closePath() - this.context.stroke(this.path2Db) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 目标点X轴坐标 | + | y | number | 是 | 0 | 目标点Y轴坐标 | + +- 示例 + ``` + @Entry + @Component + struct MoveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.moveTo(50, 100) + this.path2Db.lineTo(250, 100) + this.path2Db.lineTo(150, 200) + this.path2Db.closePath() + this.context.stroke(this.path2Db) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237475113.png) + ![zh-cn_image_0000001194032502](figures/zh-cn_image_0000001194032502.png) -## lineTo +## lineTo -lineTo\(x: number, y: number\): void +lineTo(x: number, y: number): void 从当前点绘制一条直线到目标点。 -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

目标点X轴坐标

-

y

-

number

-

是

-

0

-

目标点Y轴坐标

-
- -- 示例 - - ``` - @Entry - @Component - struct LineTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private path2Db: Path2D = new Path2D() - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.path2Db.moveTo(100, 100) - this.path2Db.lineTo(100, 200) - this.path2Db.lineTo(200, 200) - this.path2Db.lineTo(200, 100) - this.path2Db.closePath() - this.context.stroke(this.path2Db) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 目标点X轴坐标 | + | y | number | 是 | 0 | 目标点Y轴坐标 | + +- 示例 + ``` + @Entry + @Component + struct LineTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.moveTo(100, 100) + this.path2Db.lineTo(100, 200) + this.path2Db.lineTo(200, 200) + this.path2Db.lineTo(200, 100) + this.path2Db.closePath() + this.context.stroke(this.path2Db) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/unnaming-(3).png) + ![zh-cn_image_0000001238832437](figures/zh-cn_image_0000001238832437.png) -## bezierCurveTo +## bezierCurveTo -bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void +bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 创建三次贝赛尔曲线的路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

cp1x

-

number

-

是

-

0

-

第一个贝塞尔参数的x坐标值。

-

cp1y

-

number

-

是

-

0

-

第一个贝塞尔参数的y坐标值。

-

cp2x

-

number

-

是

-

0

-

第二个贝塞尔参数的x坐标值。

-

cp2y

-

number

-

是

-

0

-

第二个贝塞尔参数的y坐标值。

-

x

-

number

-

是

-

0

-

路径结束时的x坐标值。

-

y

-

number

-

是

-

0

-

路径结束时的y坐标值。

-
- - -- 示例 - - ``` - @Entry - @Component - struct BezierCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private path2Db: Path2D = new Path2D() - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.path2Db.moveTo(10, 10) - this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20);this.context.stroke(this.path2Db) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | + | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | + | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | + | cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 | + | x | number | 是 | 0 | 路径结束时的x坐标值。 | + | y | number | 是 | 0 | 路径结束时的y坐标值。 | + +- 示例 + ``` + @Entry + @Component + struct BezierCurveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.moveTo(10, 10) + this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20);this.context.stroke(this.path2Db) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001192915158.png) + ![zh-cn_image_0000001239032455](figures/zh-cn_image_0000001239032455.png) -## quadraticCurveTo +## quadraticCurveTo -quadraticCurveTo\(cpx: number, cpy: number, x: number ,y: number\): void +quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void 创建二次贝赛尔曲线的路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

cpx

-

number

-

是

-

0

-

贝塞尔参数的x坐标值。

-

cpy

-

number

-

是

-

0

-

贝塞尔参数的y坐标值。

-

x

-

number

-

是

-

0

-

路径结束时的x坐标值。

-

y

-

number

-

是

-

0

-

路径结束时的y坐标值。

-
- -- 示例 - - ``` - @Entry - @Component - struct QuadraticCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private path2Db: Path2D = new Path2D() - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.path2Db.moveTo(10, 10) - this.path2Db.quadraticCurveTo(100, 100, 200, 20) - this.context.stroke(this.path2Db) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | + | cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 | + | x | number | 是 | 0 | 路径结束时的x坐标值。 | + | y | number | 是 | 0 | 路径结束时的y坐标值。 | + +- 示例 + ``` + @Entry + @Component + struct QuadraticCurveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.moveTo(10, 10) + this.path2Db.quadraticCurveTo(100, 100, 200, 20) + this.context.stroke(this.path2Db) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237555151.png) + ![zh-cn_image_0000001238952419](figures/zh-cn_image_0000001238952419.png) -## arc +## arc -arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: number\): void +arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: number): void 绘制弧线路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

弧线圆心的x坐标值。

-

y

-

number

-

是

-

0

-

弧线圆心的y坐标值。

-

radius

-

number

-

是

-

0

-

弧线的圆半径。

-

startAngle

-

number

-

是

-

0

-

弧线的起始弧度。

-

endAngle

-

number

-

是

-

0

-

弧线的终止弧度。

-

anticlockwise

-

boolean

-

否

-

false

-

是否逆时针绘制圆弧。

-
- -- 示例 - - ``` - @Entry - @Component - struct Arc { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private path2Db: Path2D = new Path2D() - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.path2Db.arc(100, 75, 50, 0, 6.28);this.context.stroke(this.path2Db) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 弧线圆心的x坐标值。 | + | y | number | 是 | 0 | 弧线圆心的y坐标值。 | + | radius | number | 是 | 0 | 弧线的圆半径。 | + | startAngle | number | 是 | 0 | 弧线的起始弧度。 | + | endAngle | number | 是 | 0 | 弧线的终止弧度。 | + | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | + +- 示例 + ``` + @Entry + @Component + struct Arc { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.arc(100, 75, 50, 0, 6.28);this.context.stroke(this.path2Db) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001192595214.png) + ![zh-cn_image_0000001194192488](figures/zh-cn_image_0000001194192488.png) -## arcTo +## arcTo -arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void +arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 依据圆弧经过的点和圆弧半径创建圆弧路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x1

-

number

-

是

-

0

-

圆弧经过的第一个点的x坐标值。

-

y1

-

number

-

是

-

0

-

圆弧经过的第一个点的y坐标值。

-

x2

-

number

-

是

-

0

-

圆弧经过的第二个点的x坐标值。

-

y2

-

number

-

是

-

0

-

圆弧经过的第二个点的y坐标值。

-

radius

-

number

-

是

-

0

-

圆弧的圆半径值。

-
- -- 示例 - - ``` - @Entry - @Component - struct ArcTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private path2Db: Path2D = new Path2D() - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.path2Db.arcTo(150, 20, 150, 70, 50) - this.context.stroke(this.path2Db) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | + | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | + | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | + | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | + | radius | number | 是 | 0 | 圆弧的圆半径值。 | + +- 示例 + ``` + @Entry + @Component + struct ArcTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.arcTo(150, 20, 150, 70, 50) + this.context.stroke(this.path2Db) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001192755172.png) + ![zh-cn_image_0000001194352486](figures/zh-cn_image_0000001194352486.png) -## ellipse +## ellipse -ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: number\): void +ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: number): void 在规定的矩形区域绘制一个椭圆。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

椭圆圆心的x轴坐标。

-

y

-

number

-

是

-

0

-

椭圆圆心的y轴坐标。

-

radiusX

-

number

-

是

-

0

-

椭圆x轴的半径长度。

-

radiusY

-

number

-

是

-

0

-

椭圆y轴的半径长度。

-

rotation

-

number

-

是

-

0

-

椭圆的旋转角度，单位为弧度。

-

startAngle

-

number

-

是

-

0

-

椭圆绘制的起始点角度，以弧度表示。

-

endAngle

-

number

-

是

-

0

-

椭圆绘制的结束点角度，以弧度表示。

-

anticlockwise

-

number

-

否

-

0

-

是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)

-
- -- 示例 - - ``` - @Entry - @Component - struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private path2Db: Path2D = new Path2D() - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.path2Db.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true) - this.context.stroke(this.path2Db) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | + | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | + | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | + | radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 | + | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | + | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | + | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | + | anticlockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) | + +- 示例 + ``` + @Entry + @Component + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true) + this.context.stroke(this.path2Db) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193075154.png) + ![zh-cn_image_0000001238712471](figures/zh-cn_image_0000001238712471.png) -## rect +## rect -rect\(x: number, y: number, width: number, height: number\): void +rect(x: number, y: number, width: number, height: number): void 创建矩形路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

指定矩形的左上角x坐标值。

-

y

-

number

-

是

-

0

-

指定矩形的左上角y坐标值。

-

width

-

number

-

是

-

0

-

指定矩形的宽度。

-

height

-

number

-

是

-

0

-

指定矩形的高度。

-
- -- 示例 - - ``` - @Entry - @Component - struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private path2Db: Path2D = new Path2D() - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.path2Db.rect(20, 20, 100, 100);this.context.stroke(this.path2Db) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | + | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | + | width | number | 是 | 0 | 指定矩形的宽度。 | + | height | number | 是 | 0 | 指定矩形的高度。 | + +- 示例 + ``` + @Entry + @Component + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.rect(20, 20, 100, 100);this.context.stroke(this.path2Db) + }) } + .width('100%') + .height('100%') } - ``` - - ![](figures/zh-cn_image_0000001192755174.png) - + } + ``` + ![zh-cn_image_0000001193872544](figures/zh-cn_image_0000001193872544.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas.md index 89fdd09811c25897f18deaec5b70104c307b01e4..364dd19da44ffa6d1aa1aec15289450c23502a8d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas.md @@ -1,19 +1,17 @@ -# 画布组件 +# 画布组件 -- **[Canvas](ts-components-canvas-canvas.md)** +- **[Canvas](ts-components-canvas-canvas.md)** -- **[CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md)** +- **[CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md)** -- **[OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md)** +- **[OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md)** -- **[Lottie](ts-components-canvas-lottie.md)** +- **[Lottie](ts-components-canvas-lottie.md)** -- **[Path2D对象](ts-components-canvas-path2d.md)** +- **[Path2D对象](ts-components-canvas-path2d.md)** -- **[CanvasGradient对象](ts-components-canvas-canvasgradient.md)** - -- **[ImageBitmap对象](ts-components-canvas-imagebitmap.md)** - -- **[ImageData对象](ts-components-canvas-imagedata.md)** +- **[CanvasGradient对象](ts-components-canvas-canvasgradient.md)** +- **[ImageBitmap对象](ts-components-canvas-imagebitmap.md)** +- **[ImageData对象](ts-components-canvas-imagedata.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-container.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-container.md index a1494c928804600f68079f0c80f7c179731f1e13..5593bd74eb70c53c8d11d0a87d587ad42b4ec5fd 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-container.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-container.md @@ -1,51 +1,45 @@ -# 容器组件 +# 容器组件 -- **[AlphabetIndexer](ts-container-alphabet-indexer.md)** +- **[AlphabetIndexer](ts-container-alphabet-indexer.md)** -- **[Badge](ts-container-badge.md)** +- **[Badge](ts-container-badge.md)** -- **[Column](ts-container-column.md)** +- **[Column](ts-container-column.md)** -- **[ColumnSplit](ts-container-columnsplit.md)** +- **[ColumnSplit](ts-container-columnsplit.md)** -- **[Counter](ts-container-counter.md)** +- **[Counter](ts-container-counter.md)** -- **[Flex](ts-container-flex.md)** +- **[Flex](ts-container-flex.md)** -- **[GridContainer](ts-container-gridcontainer.md)** +- **[GridContainer](ts-container-gridcontainer.md)** -- **[Grid](ts-container-grid.md)** +- **[Grid](ts-container-grid.md)** -- **[GridItem](ts-container-griditem.md)** +- **[GridItem](ts-container-griditem.md)** -- **[List](ts-container-list.md)** +- **[List](ts-container-list.md)** -- **[ListItem](ts-container-listitem.md)** +- **[ListItem](ts-container-listitem.md)** -- **[Navigator](ts-container-navigator.md)** +- **[Navigator](ts-container-navigator.md)** -- **[Navigation](ts-container-navigation.md)** +- **[Navigation](ts-basic-components-navigation.md)** -- **[Panel](ts-container-panel.md)** +- **[Panel](ts-container-panel.md)** -- **[Row](ts-container-row.md)** +- **[Row](ts-container-row.md)** -- **[RowSplit](ts-container-rowsplit.md)** +- **[RowSplit](ts-container-rowsplit.md)** -- **[Scroll](ts-container-scroll.md)** +- **[Scroll](ts-container-scroll.md)** -- **[ScrollBar](ts-container-scrollbar.md)** +- **[ScrollBar](ts-basic-components-scrollbar.md)** -- **[Stack](ts-container-stack.md)** +- **[Stack](ts-container-stack.md)** -- **[Swiper](ts-container-swiper.md)** - -- **[Tabs](ts-container-tabs.md)** - -- **[TabContent](ts-container-tabcontent.md)** - -- **[Stepper](ts-container-stepper.md)** - -- **[StepperItem](ts-container-stepperitem.md)** +- **[Swiper](ts-container-swiper.md)** +- **[Tabs](ts-container-tabs.md)** +- **[TabContent](ts-container-tabcontent.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components.md b/zh-cn/application-dev/reference/arkui-ts/ts-components.md index 622a2b8009f46554adff392a8bf9e233a9a090ac..87d8ac0b7bf2cd82e0e3970515a961485953fcce 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components.md @@ -1,13 +1,11 @@ -# 组件 +# 组件 -- **[通用](ts-universal-components.md)** +- **[通用](ts-universal-components.md)** -- **[基础组件](ts-basic-components.md)** +- **[基础组件](ts-basic-components.md)** -- **[容器组件](ts-components-container.md)** - -- **[绘制组件](ts-drawing-components.md)** - -- **[画布组件](ts-components-canvas.md)** +- **[容器组件](ts-components-container.md)** +- **[绘制组件](ts-drawing-components.md)** +- **[画布组件](ts-components-canvas.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md index 678aa0dfc75a63414951dda70bddb5ee8669b10a..f30674d96e36278a50962ac3438687c8a5e45db8 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md @@ -1,239 +1,77 @@ -# AlphabetIndexer +# AlphabetIndexer + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 字母索引条。 -## 支持设备 - - - - - - - - - - - - -

手机

-

平板

-

智慧屏

-

智能穿戴

-

支持

-

支持

-

不支持

-

不支持

-
+## 支持设备 + +| 手机 | 平板 | 车机 | 智慧屏 | 智能穿戴 | 轻量级智能穿戴 | +| -------- | -------- | -------- | -------- | -------- | -------- | +| 支持 | 支持 | 支持 | 不支持 | 不支持 | 不支持 | + -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 -AlphabetIndexer\(value: \{arrayValue : Array, selected : number\}\) +## 接口 -- 参数 +AlphabetIndexer(value: {arrayValue : Array<string>, selected : number}) - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

arrayValue

-

Array<string>

-

是

-

-

-

字母索引字符串数组。

-

selected

-

number

-

是

-

-

-

选中项编号。

-
+- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | arrayValue | Array<string> | 是 | - | 字母索引字符串数组。 | + | selected | number | 是 | - | 选中项编号。 | -## 属性 +## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

描述

-

selectedColor

-

Color

-

选中文本文字颜色。

-

popupColor

-

Color

-

弹出提示文本字体颜色。

-

selectedBackgroundColor

-

Color

-

选中文本背景颜色。

-

popupBackground

-

Color

-

弹窗索引背景色。

-

usingPopup

-

boolean

-

是否使用弹出索引提示。

-

selectedFont

-

{

-

size?: number,

-

weight?: FontWeight,

-

family?: string,

-

style?: FontStyle

-

}

-

选中文本文字样式。

-

popupFont

-

{

-

size?: number,

-

weight?: FontWeight,

-

family?: string,

-

style?: FontStyle

-

}

-

弹出提示文本字体样式。

-

font

-

{

-

size?: number,

-

weight?: FontWeight,

-

family?: string,

-

style?: FontStyle

-

}

-

字母索引条默认文本字体样式。

-

itemSize

-

Length

-

字母索引条字母区域大小，字母区域为正方形，设置正方形边长。

-

alignStyle

-

IndexerAlign

-

字母索引条对齐样式，支持左侧对齐样式与右侧对齐样式，影响弹窗弹出位置。

-
+| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| selectedColor | Color | 选中文本文字颜色。 | +| popupColor | Color | 弹出提示文本字体颜色。 | +| selectedBackgroundColor | Color | 选中文本背景颜色。 | +| popupBackground | Color | 弹窗索引背景色。 | +| usingPopup | boolean | 是否使用弹出索引提示。 | +| selectedFont | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | 选中文本文字样式。 | +| popupFont | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | 弹出提示文本字体样式。 | +| font | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | 字母索引条默认文本字体样式。 | +| itemSize | Length | 字母索引条字母区域大小，字母区域为正方形，设置正方形边长。 | +| alignStyle | IndexerAlign | 字母索引条对齐样式，支持左侧对齐样式与右侧对齐样式，影响弹窗弹出位置。 | -- IndexerAlign枚举说明 +- IndexerAlign枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Left | 弹框显示在索引条右侧。 | + | Right | 弹框显示在索引条左侧。 | - - - - - - - - - - - -

名称

-

描述

-

Left

-

弹框显示在索引条右侧。

-

Right

-

弹框显示在索引条左侧。

-
+## 事件 -## 事件 +| 名称 | 功能描述 | +| -------- | -------- | +| onSelected(index: number) => void | 索引条选中回调。 | +| onRequestPopupData(callback: (index: number) => Array<string>)8+ | 选中字母索引后，请求索引提示窗口显示内容回调。
返回值：索引对应的字符串数组，此字符串数组在弹出窗口中竖排显示，字符串列表最多显示5个，超出部分可以滑动显示。 | +| onPopupSelected(callback: (index: number) => void)8+ | 字母索引提示窗口选中回调。 | - - - - - - - - - - - - - - -

名称

-

功能描述

-

onSelected(index: number) => void

-

字母索引条选中回调。

-

onRequestPopupData(callback: (index: number) => Array<string>)8+

-

选中字母索引后，请求索引提示窗口显示内容回调。

-

返回值：索引对应的字符串数组，此字符串数组在弹出窗口中竖排显示，字符串列表最多显示5个，超出部分可以滑动显示。

-

onPopupSelected(callback: (index: number) => void)8+

-

字母索引提示窗口选中回调。

-
-## 示例 +## 示例 ``` @Entry @Component -struct AlphabetIndexerComponent { +struct AlphabetIndexerSample { private value: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'] build() { @@ -255,5 +93,4 @@ struct AlphabetIndexerComponent { } ``` -![](figures/alphabetindexer.gif) - +![zh-cn_image_0000001174422922](figures/zh-cn_image_0000001174422922.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md index cd7d617398c7a8c2cbbf4f70eccbc984de03c553..3c2159a08da2df72870e4edb268de33916722e0b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md @@ -1,229 +1,62 @@ -# Badge +# Badge + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 新事件标记组件，在组件上提供事件信息展示能力。 -## 权限列表 + +## 权限列表 无 -## 子组件 -支持单个子组件。 +## 子组件 -## 接口 +支持单个子组件。 -Badge\(value: \{count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle\}\) -- 参数 +## 接口 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

count

-

number

-

是

-

-

-

设置提醒消息数。

-

position

-

BadgePosition

-

否

-

RightTop

-

设置提示点显示位置。

-

maxCount

-

number

-

否

-

99

-

最大消息数，超过最大消息时仅显示maxCount+。

-

style

-

BadgeStyle

-

否

-

-

-

Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

-
+Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle}) +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | count | number | 是 | - | 设置提醒消息数。 | + | position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | + | maxCount | number | 否 | 99 | 最大消息数，超过最大消息时仅显示maxCount+。 | + | style | BadgeStyle | 否 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | -Badge\(value: \{value: string, position?: BadgePosition, style?: BadgeStyle\}\) +Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle}) 根据字符串创建提醒组件。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

value

-

string

-

是

-

-

-

提示内容的文本字符串。

-

position

-

BadgePosition

-

否

-

RightTop

-

设置提示点显示位置。

-

style

-

BadgeStyle

-

否

-

-

-

Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

-
+- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | value | string | 是 | - | 提示内容的文本字符串。 | + | position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | + | style | BadgeStyle | 否 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | +- BadgeStyle对象说明 + | 名称 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | color | Color | 否 | Color.White | 文本颜色。 | + | fontSize | number \| string | 否 | 10 | 文本大小。 | + | badgeSize | number \| string | 是 | - | badge的大小。 | + | badgeColor | Color | 否 | Color.Red | badge的颜色。 | -- BadgeStyle对象说明 +- BadgePosition枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Right | 圆点显示在右侧纵向居中。 | + | RightTop | 圆点显示在右上角。 | + | Left | 圆点显示在左侧纵向居中。 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

必填

-

默认值

-

描述

-

color

-

Color

-

否

-

White

-

文本颜色。

-

fontSize

-

number | string

-

否

-

10

-

文本大小。

-

badgeSize

-

number | string

-

是

-

-

-

badge的大小。

-

badgeColor

-

Color

-

否

-

Red

-

badge的颜色。

-
- -- BadgePosition枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

Right

-

圆点显示在右侧纵向居中。

-

RightTop

-

圆点显示在右上角。

-

Left

-

圆点显示在左侧纵向居中。

-
- - -## 示例 +## 示例 ``` @Entry @@ -269,5 +102,4 @@ struct BadgeExample { } ``` -![](figures/badge.gif) - +![zh-cn_image_0000001219864147](figures/zh-cn_image_0000001219864147.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md index 9a87f135d85058031f94ef8f9d63159c161cfe5d..678b35609477b0de471e691af06dae5448919c7e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md @@ -1,114 +1,50 @@ -# Column +# Column + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 沿垂直方向布局的容器。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 可以包含子组件。 -## 接口 - -Column\(value:\{space?: Length\}\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

space

-

Length

-

否

-

0

-

纵向布局元素间距。

-
- - - -## 属性 - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

alignItems

-

HorizontalAlign

-

Center

-

设置子组件在水平方向上的对齐格式。

-

justifyContent8+

-

FlexAlign

-

Start

-

设置子组件在垂直方向上的对齐格式。

-
- -- HorizontalAlign枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

Start

-

按照语言方向起始端对齐。

-

Center

-

居中对齐，默认对齐方式。

-

End

-

按照语言方向末端对齐。

-
- - -## 示例 + +## 接口 + +Column(value:{space?: Length}) + + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | space | Length | 否 | 0 | 纵向布局元素间距。 | + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| alignItems | HorizontalAlign | HorizontalAlign.Center | 设置子组件在水平方向上的对齐格式。 | +| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | 设置子组件在垂直方向上的对齐格式。 | + +- HorizontalAlign枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Start | 按照语言方向起始端对齐。 | + | Center | 居中对齐，默认对齐方式。 | + | End | 按照语言方向末端对齐。 | + + + +## 示例 ``` @Entry @@ -149,5 +85,4 @@ struct ColumnExample { } ``` -![](figures/Column.png) - +![zh-cn_image_0000001219982721](figures/Column.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md index 9ff0cfe2b2afb89b944565bab6ce977a6108d354..184d4e6c6f0b5c70d60f8a46ea4a7cc16e065053 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md @@ -1,46 +1,38 @@ -# ColumnSplit +# ColumnSplit + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 可以包含子组件。 -## 接口 -ColumnSplit\(\) +## 接口 + +ColumnSplit() -## 属性 - - - - - - - - - - -

名称

-

参数类型

-

描述

-

resizeable

-

boolean

-

分割线是否可拖拽，默认为false。

-
+## 属性 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->与RowSplit相同，ColumnSplit的分割线最小能拖动到刚好包含子组件。 +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| resizeable | boolean | 分割线是否可拖拽，默认为false。 | -## 示例 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 与RowSplit相同，ColumnSplit的分割线最小能拖动到刚好包含子组件。 + + +## 示例 ``` @Entry @@ -63,5 +55,4 @@ struct ColumnSplitExample { } ``` -![](figures/ColumnSplit.gif) - +![zh-cn_image_0000001219982707](figures/zh-cn_image_0000001219982707.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md index 169baa667cd8a747b5fcccfd0ac6ce6827a47e4b..a858a46b8c3c913b729a30517437b9cef6e263b1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md @@ -1,46 +1,38 @@ -# Counter +# Counter + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 计数器组件，提供相应的增加或者减少的计数操作。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 可以包含子组件。 -## 接口 -Counter\(\) +## 接口 + +Counter() -## 事件 + +## 事件 不支持通用事件和手势， 仅支持如下事件： - - - - - - - - - - - -

名称

-

功能描述

-

onInc(event: () => void)

-

监听数值增加事件。

-

onDec(event: () => void)

-

监听数值减少事件。

-
- -## 示例 +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onInc(event: () => void) | 监听数值增加事件。 | +| onDec(event: () => void) | 监听数值减少事件。 | + + +## 示例 ``` @Entry @@ -64,5 +56,4 @@ struct CounterExample { } ``` -![](figures/Counter.gif) - +![zh-cn_image_0000001219982711](figures/zh-cn_image_0000001219982711.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md index 7aaf8e65d581ffd0b7db879893e391f73f5003d8..6e005f134adc353d1e4f1a7c3fba3df2ec144ce2 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md @@ -1,198 +1,64 @@ -# Flex +# Flex + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 弹性布局组件。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 可以包含子组件。 -## 接口 -Flex\(options?: \{ direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign \}\) +## 接口 + +Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign }) 标准Flex布局容器。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

direction

-

FlexDirection

-

否

-

Row

-

子组件在Flex容器上排列的方向，即主轴的方向。

-

wrap

-

FlexWrap

-

否

-

NoWrap

-

Flex容器是单行/列还是多行/列排列。

-

justifyContent

-

FlexAlign

-

否

-

Start

-

子组件在Flex容器主轴上的对齐格式。

-

alignItems

-

ItemAlign

-

否

-

Stretch

-

子组件在Flex容器交叉轴上的对齐格式。

-

alignContent

-

FlexAlign

-

否

-

Start

-

交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。

-
- -- FlexDirection枚举说明 - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Row

-

主轴与行方向一致作为布局模式。

-

RowReverse

-

与Row方向相反方向进行布局。

-

Column

-

主轴与列方向一致作为布局模式。

-

ColumnReverse

-

与Column相反方向进行布局。

-
- - -- FlexWrap枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

NoWrap

-

Flex容器的元素单行/列布局，子项允许超出容器。

-

Wrap

-

Flex容器的元素多行/列排布，子项允许超出容器。

-

WrapReverse

-

Flex容器的元素反向多行/列排布，子项允许超出容器。

-
- - -- FlexAlign枚举说明 - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Start

-

元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。

-

Center

-

元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。

-

End

-

元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。

-

SpaceBetween

-

Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。

-

SpaceAround

-

Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。

-

SpaceEvenly

-

Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

-
- - -## 示例 +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | direction | FlexDirection | 否 | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。 | + | wrap | FlexWrap | 否 | FlexWrap.NoWrap | Flex容器是单行/列还是多行/列排列。 | + | justifyContent | FlexAlign | 否 | FlexAlign.Start | 子组件在Flex容器主轴上的对齐格式。 | + | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign枚举说明) | 否 | ItemAlign.Stretch | 子组件在Flex容器交叉轴上的对齐格式。 | + | alignContent | FlexAlign | 否 | FlexAlign.Start | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 | + +- FlexDirection枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Row | 主轴与行方向一致作为布局模式。 | + | RowReverse | 与Row方向相反方向进行布局。 | + | Column | 主轴与列方向一致作为布局模式。 | + | ColumnReverse | 与Column相反方向进行布局。 | + +- FlexWrap枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | NoWrap | Flex容器的元素单行/列布局，子项允许超出容器。 | + | Wrap | Flex容器的元素多行/列排布，子项允许超出容器。 | + | WrapReverse | Flex容器的元素反向多行/列排布，子项允许超出容器。 | + +- FlexAlign枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Start | 元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。 | + | Center | 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 | + | End | 元素在主轴方向尾部对齐,  最后一个元素与行尾对齐，其他元素与后一个对齐。 | + | SpaceBetween | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。 | + | SpaceAround | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。 | + | SpaceEvenly | Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 | + + +## 示例 ``` // Example 01 @@ -255,7 +121,7 @@ struct FlexExample1 { } ``` -![](figures/Flex01.gif) +![zh-cn_image_0000001219744189](figures/zh-cn_image_0000001219744189.gif) ``` // Example 02 @@ -301,7 +167,7 @@ struct FlexExample2 { } ``` -![](figures/flex02.png) +![zh-cn_image_0000001174264366](figures/zh-cn_image_0000001174264366.png) ``` // Example 03 @@ -350,7 +216,7 @@ struct FlexExample3 { } ``` -![](figures/Flex03.gif) +![zh-cn_image_0000001174582854](figures/zh-cn_image_0000001174582854.gif) ``` // Example 04 @@ -399,9 +265,9 @@ struct FlexExample4 { } ``` -![](figures/Flex04.jpg) +![zh-cn_image_0000001174422904](figures/zh-cn_image_0000001174422904.jpg) -![](figures/Flex04-2.gif) +![zh-cn_image_0000001219662653](figures/zh-cn_image_0000001219662653.gif) ``` // Example 05 @@ -450,5 +316,4 @@ struct FlexExample5 { } ``` -![](figures/Flex05.gif) - +![zh-cn_image_0000001174422906](figures/zh-cn_image_0000001174422906.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md index 35d9a4fb0082b17e6ea924bace9353641db02297..111c5d38e148a819c89e86bf41553ae499c26d3f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md @@ -1,90 +1,50 @@ -# Grid +# Grid + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 网格容器，二维布局，将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以任意组合不同的网格，做出各种各样的布局。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 包含[GridItem](ts-container-griditem.md)子组件。 -## 接口说明 - -Grid\(\) - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

columnsTemplate

-

string

-

'1fr'

-

用于设置当前网格布局列的数量，不设置时默认1列 示例, '1fr 1fr 2fr' 分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份。

-

rowsTemplate

-

string

-

'1fr'

-

用于设置当前网格布局行的数量，不设置时默认1行 示例, '1fr 1fr 2fr'分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。

-

columnsGap

-

Length

-

0

-

用于设置列与列的间距。

-

rowsGap

-

Length

-

0

-

用于设置行与行的间距。

-
- -## 事件 - - - - - - - - - -

名称

-

功能描述

-

onScrollIndex(first: number) => void

-

当前列表显示的起始位置item发生变化时触发。

-
- -## 示例 + +## 接口说明 + +Grid() + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| columnsTemplate | string | '1fr' | 用于设置当前网格布局列的数量，不设置时默认1列 示例, '1fr 1fr 2fr' 分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份。 | +| rowsTemplate | string | '1fr' | 用于设置当前网格布局行的数量，不设置时默认1行 示例, '1fr 1fr 2fr'分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。 | +| columnsGap | Length | 0 | 用于设置列与列的间距。 | +| rowsGap | Length | 0 | 用于设置行与行的间距。 | +| editMode | boolean | flase | 是否进入编辑模式，进入编辑模式可以拖拽Gird组件内部[GridItem](ts-container-griditem.md)。 | +| maxCount | number | 1 | 表示可显示的最大行数。 | +| minCount | number | 1 | 表示可显示的最小行数。 | +| cellLength | number | 0 | 表示每行的固定高度。 | +| $multiSelectable^{8+}$ | boolean | false | 是否开启鼠标框选。
- false：关闭框选。
- true：开启框选。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | +| onScrollIndex(first: number) => void | 当前列表显示的起始位置item发生变化时触发。 | + + +## 示例 ``` @Entry @@ -145,5 +105,4 @@ struct GridExample { } ``` -![](figures/grid-3.gif) - +![zh-cn_image_0000001219744183](figures/zh-cn_image_0000001219744183.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md index 3d7993318646b8c38a5d36d5ae3c8a7981295592..b90566a04ba55389ccc14135cc5afd6face5f36a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md @@ -1,129 +1,55 @@ -# GridContainer +# GridContainer + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 纵向排布栅格布局容器，仅在栅格布局场景中使用。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 可以包含子组件。 -## 接口 - -GridContainer\(options?: \{ columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length\}\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

默认值

-

说明

-

columns

-

number

-

否

-

'auto'

-

设置当前布局总列数。

-

sizeType

-

SizeType

-

否

-

Auto

-

选用设备宽度类型。

-

gutter

-

Length

-

否

-

-

-

栅格布局列间距。

-

margin

-

Length

-

否

-

-

-

栅格布局两侧间距。

-
- -- SizeType枚举说明 - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

XS

-

最小宽度类型设备。

-

SM

-

小宽度类型设备。

-

MD

-

中等宽度类型设备。

-

LG

-

大宽度类型设备。

-

Auto

-

根据设备类型进行选择。

-
- - -## 属性 - -支持通用属性和Column组件的[属性方法](ts-container-column.md#section358284262918)。 - -## 事件 + +## 接口 + +GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length}) + +- 参数 + | 参数名 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | columns | number \| 'auto' | 否 | 'auto' | 设置当前布局总列数。 | + | sizeType | SizeType | 否 | SizeType.Auto | 选用设备宽度类型。 | + | gutter | Length | 否 | - | 栅格布局列间距。 | + | margin | Length | 否 | - | 栅格布局两侧间距。 | + +- SizeType枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | XS | 最小宽度类型设备。 | + | SM | 小宽度类型设备。 | + | MD | 中等宽度类型设备。 | + | LG | 大宽度类型设备。 | + | Auto | 根据设备类型进行选择。 | + + +## 属性 + +支持通用属性和Column组件的[属性方法](ts-container-column.md#属性)。 + + +## 事件 支持通用事件。 -## 示例 + +## 示例 ``` @Entry @@ -194,5 +120,4 @@ struct GridContainerExample { } ``` -![](figures/grid.gif) - +![zh-cn_image_0000001219744187](figures/zh-cn_image_0000001219744187.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md index cd18a91fe5db299bd205d91968a4ff6e32eb408e..98363660810da775de1869dbe402d36d3e674926 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md @@ -1,83 +1,47 @@ -# GridItem +# GridItem + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 网格容器中单项内容容器。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 可以包含子组件。 -## 接口 - -GridItem\(\) - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

rowStart

-

number

-

-

-

用于指定当前元素起始行号。

-

rowEnd

-

number

-

-

-

用于指定当前元素终点行号。

-

columnStart

-

number

-

-

-

用于指定当前元素起始列号。

-

columnEnd

-

number

-

-

-

用于指定当前元素终点列号。

-

forceRebuild

-

boolean

-

false

-

用于设置在触发组件build时是否重新创建此节点。

-
- -## 示例 + +## 接口 + +GridItem() + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| rowStart | number | - | 用于指定当前元素起始行号。 | +| rowEnd | number | - | 用于指定当前元素终点行号。 | +| columnStart | number | - | 用于指定当前元素起始列号。 | +| columnEnd | number | - | 用于指定当前元素终点列号。 | +| forceRebuild | boolean | false | 用于设置在触发组件build时是否重新创建此节点。 | +| selectable8+ | boolean | true | 当前GridItem元素是否可以被鼠标框选。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 外层Grid容器的鼠标框选开启时，GridItem的框选才生效。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | +| onSelect(callback: (isSelected: boolean) => any)8+ | GridItem元素被鼠标框选的状态改变时触发回调。
isSelected：进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false。 | + + +## 示例 ``` @Entry @@ -116,5 +80,4 @@ struct GridItemExample { } ``` -![](figures/griditem.gif) - +![zh-cn_image_0000001174582870](figures/zh-cn_image_0000001174582870.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md index c6519409a4b4778e9c32e1ff11ec0200cb35cbc5..e573f1595494f9187463fa5a7daff476d2b40581 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md @@ -1,257 +1,75 @@ -# List +# List ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。 -## 权限列表 +列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。 -无 -## 子组件 +## 权限列表 -包含[ListItem](ts-container-listitem.md)子组件。 +无 -## 接口 -List\(value:\{space?: number, initialIndex?: number\}\) +## 子组件 -- 参数 +包含[ListItem](ts-container-listitem.md)子组件。 - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

space

-

number

-

否

-

0

-

列表项间距。

-

initialIndex

-

number

-

否

-

0

-

设置当前List初次加载时视口起始位置显示的item，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效。

-
+## 接口 -## 属性 +List(value:{space?: number, initialIndex?: number}) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

listDirection

-

Axis

-

Vertical

-

设置List组件排列方向参照Axis枚举说明。

-

divider

-

{

-

strokeWidth: Length,

-

color?:Color,

-

startMargin?: Length,

-

endMargin?: Length

-

}

-

-

-

用于设置ListItem分割线样式，默认无分割线。

-

strokeWidth: 分割线的线宽。

-

color: 分割线的颜色。

-

startMargin： 分割线距离列表侧边起始端的距离。

-

endMargin: 分割线距离列表侧边结束端的距离。

-

editMode

-

boolean

-

false

-

声明当前List组件是否处于可编辑模式。

-

edgeEffect

-

EdgeEffect

-

Spring

-

滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。

-

chainAnimation

-

boolean

-

false

-

用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。

-
  • false：不启用链式联动。
  • true：启用链式联动。
-
+- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | space | number | 否 | 0 | 列表项间距。 | + | initialIndex | number | 否 | 0 | 设置当前List初次加载时视口起始位置显示的item，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效。 | -- EdgeEffect枚举说明 - - - - - - - - - - - -

名称

-

描述

-

Spring

-

弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。

-

None

-

滑动到边缘后无效果。

-
+## 属性 +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| listDirection | [Axis](ts-appendix-enums.md#axis枚举说明) | Vertical | 设置List组件排列方向参照Axis枚举说明。 | +| divider | {
strokeWidth: Length,
color?:Color,
startMargin?: Length,
endMargin?: Length
} | - | 用于设置ListItem分割线样式，默认无分割线。
strokeWidth: 分割线的线宽。
color: 分割线的颜色。
startMargin： 分割线距离列表侧边起始端的距离。
endMargin: 分割线距离列表侧边结束端的距离。 | +| editMode | boolean | false | 声明当前List组件是否处于可编辑模式。 | +| edgeEffect | EdgeEffect | EdgeEffect.Spring | 滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。 | +| chainAnimation | boolean | false | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。
- false：不启用链式联动。
- true：启用链式联动。 | +| $multiSelectable^{8+}$ | boolean | false | 是否开启鼠标框选。
- false：关闭框选。
- true：开启框选。 | -## 事件 +- EdgeEffect枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Spring | 弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。 | + | None | 滑动到边缘后无效果。 | - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

功能描述

-

onItemDelete(index: number) => boolean

-

列表项删除时触发。

-

onScrollIndex(firstIndex: number, lastIndex: number) => void

-

当前列表显示的起始位置和终止位置发生变化时触发。

-

onItemDragEnter(callback: (event: ItemDragInfo) => void)

-

绑定后，拖拽在可放置组件范围内移动时，触发回调。

-
  • itemIndex: 当前被拖拽的ListItem原本的索引。
  • insertIndex: 拖动当前ListItem插入List后的索引。
-
说明：

当监听了onDrop事件时，此事件才有效。

-
-

onItemDragMove(callback: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void)

-

-

绑定后，拖拽在可放置组件范围内移动时，触发回调。

-
  • itemIndex: 当前被拖拽的ListItem原本的索引。
  • insertIndex: 拖动当前ListItem插入List后的索引。
-
说明：

当监听了onDrop事件时，此事件才有效。

-
-

onItemDragLeave(callback: (event: ItemDragInfo, itemIndex: number) => void)

-

-

绑定后，拖拽离开组件范围内时，触发回调。

-
  • itemIndex: 当前被拖拽的ListItem原本的索引。
-
说明：

当监听了onDrop事件时，此事件才有效。

-
-

onItemDragStart(callback: (event: ItemDragInfo, itemIndex: number) => CustomBuilder)

-

-

绑定后，第一次拖拽ListItem时，触发回调。

-
  • itemIndex: 当前被拖拽的ListItem原本的索引。
  • 返回值：被拖拽ListItem的浮动UI布局。
-
说明：

当监听了onDrop事件时，此事件才有效。

-
-

onItemDrop(callback: (event: ItemDragInfo, itemIndex: number, insertIndex: number，isSuccess: boolean) => void)

-

-

绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发此回调。

-
  • itemIndex: 当前被拖拽的ListItem原本的索引。
  • insertIndex: 拖动当前ListItem插入List后的索引。
  • isSuccess: 拖拽释放时插入是否成功。
-
说明：

当监听了onDrop事件时，此事件才有效。

-
-
->![](../../public_sys-resources/icon-note.gif) **说明：** ->List使能可编辑模式需配合onItemDelete事件和ListItem的editable属性，即可编辑模式实现删除列表项功能，需满足以下条件： ->- editMode属性设置为true。 ->- 绑定onItemDelete事件，且事件回调返回true。 ->- ListItem的editable属性设置为true。 ->实现ListItem拖拽，需满足以下条件： ->- editMode属性设置为true。 ->- 绑定onItemDragStart事件，且事件回调中返回浮动UI布局。 +## 事件 -- ItemDragInfo对象说明 +| 名称 | 功能描述 | +| -------- | -------- | +| onItemDelete(index: number) => boolean | 列表项删除时触发。 | +| onScrollIndex(firstIndex: number, lastIndex: number) => void | 当前列表显示的起始位置和终止位置发生变化时触发。 | - - - - - - - - - - - - - - -

属性名称

-

属性类型

-

描述

-

x

-

number

-

拖拽点的横坐标。

-

y

-

number

-

拖拽点的纵坐标。

-
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> List使能可编辑模式需配合onItemDelete事件和ListItem的editable属性，即可编辑模式实现删除列表项功能，需满足以下条件： +> +> - editMode属性设置为true。 +> +> - 绑定onItemDelete事件，且事件回调返回true。 +> +> - ListItem的editable属性设置为true。 +> +> 实现ListItem拖拽，需满足以下条件： +> +> - editMode属性设置为true。 +> +> - 绑定onDragStart事件，且事件回调中返回浮动UI布局。 -## 示例 +## 示例 ``` @Entry @@ -299,123 +117,6 @@ struct ListExample { } ``` -![](figures/list.gif) - -``` -@Entry -@Component -struct DragListExample { - @State number1: string[] = ['0', '1', '2'] - @State number2: string[] = ['one', 'two', 'three'] - @State text: string = '' - @State bool1: boolean = false - @State bool2: boolean = false - - @Builder pixelMapBuilder() { - Text('-1') - .width('100%').height(100).fontSize(16) - .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) - } - - build() { - Column() { - List() { - ForEach(this.number1, (item) => { - ListItem() { - Text('' + item) - .width('100%').height(100).fontSize(16) - .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xF666FF) - } - }, item => item) - } - .editMode(true) - .width('90%').divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) - .onItemDelete((index: number) => { - console.info(this.Number1[index] + 'Delete') - this.Number1.splice(index, 1) - console.info(JSON.stringify(this.Number1)) - return true - }) - .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { - this.bool1 = true - this.text = this.number1[itemIndex] - console.log("List1 onItemDragStart, itemIndex:" + itemIndex + ", ItemDragInfo:"+`${JSON.stringify(event)}`) - return this.pixelMapBuilder - }) - .onItemDragEnter((event: ItemDragInfo) => { - console.log("List1 onItemDragEnter") - }) - .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { - console.log("List1 onItemDragMove, itemIndex:" + itemIndex + ", insertIndex:" + insertIndex) - }) - .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { - console.log("List1 onItemDragLeave, itemIndex:" + itemIndex) - }) - .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { - if (isSuccess) { - if (this.bool2) { - this.number2.splice(itemIndex, 1) - this.number1.splice(insertIndex, 0, this.text) - this.bool1 = false - this.bool2 = false - } else if (this.bool1) { - this.number1.splice(itemIndex, 1) - this.number1.splice(insertIndex, 0, this.text) - this.bool1 = false - this.bool2 = false - } - } - console.log("List1 onItemDrop, itemIndex:" + itemIndex + ", insertIndex:" + insertIndex + ", isSuccess:" + isSuccess) - }) - Divider().strokeWidth(5).color(0x2788D9).lineCap(LineCapStyle.Round).margin(20) - List() { - ForEach(this.Number2, (item) => { - ListItem() { - Text('' + item) - .width('100%').height(100).fontSize(16) - .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFF888) - } - }, item => item) - } - .edgeEffect(EdgeEffect.None) - .width('90%') - .editMode(true) - .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) - .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { - this.bool2 = true - this.text = this.number2[itemIndex] - console.log("List2 onItemDragStart, itemIndex:" + itemIndex) - return this.pixelMapBuilder - }) - .onItemDragEnter((event: ItemDragInfo) => { - console.log("List2 onItemDragEnter") - }) - .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { - console.log("List2 onItemDragMove, itemIndex:" + itemIndex + ", insertIndex:" + insertIndex) - }) - .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { - console.log("List2 onItemDragLeave, itemIndex:" + itemIndex) - }) - .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { - if (isSuccess) { - if (this.bool1) { - this.number1.splice(itemIndex, 1) - this.number2.splice(insertIndex, 0, this.text) - this.bool1 = false - this.bool2 = false - } else if (this.bool2) { - this.number2.splice(itemIndex, 1) - this.number2.splice(insertIndex, 0, this.text) - this.bool1 = false - this.bool2 = false - } - } - console.log("List2 onItemDrop, itemIndex:" + itemIndex + ", insertIndex:" + insertIndex + ", isSuccess:" + isSuccess) - }) - }.width('100%').height('100%').backgroundColor(0xE600000).padding({ top: 25 }) - } -} -``` - -![](figures/GIF-4.gif) +![zh-cn_image_0000001174264378](figures/zh-cn_image_0000001174264378.gif) +◤otherprops:internal:◢ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md index 729d29aee48fd99cb22c6abe97f964eb296972be..d5c1abcf9079bbc4f57b6275b966a5ae5924fa4c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md @@ -1,78 +1,50 @@ -# ListItem +# ListItem + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 用来展示列表具体item，宽度默认充满List组件，必须配合List来使用。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 可以包含单个子组件。 -## 接口 - -ListItem\(\) - -## 属性 - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

sticky

-

Sticky

-

None

-

设置ListItem吸顶效果，参见Sticky枚举描述。

-

editable

-

boolean

-

false

-

声明当前ListItem元素是否可编辑，进入编辑模式后可删除。

-
- -- Sticky枚举说明 - - - - - - - - - - - - -

名称

-

描述

-

None

-

无吸顶效果。

-

Normal

-

当前item吸顶，滑动消失。

-
- - -## 示例 + +## 接口 + +ListItem() + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| sticky | Sticky | Sticky.None | 设置ListItem吸顶效果，参见Sticky枚举描述。 | +| editable | boolean | false | 当前ListItem元素是否可编辑，进入编辑模式后可删除。 | +| selectable8+ | boolean | true | 当前ListItem元素是否可以被鼠标框选。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 外层List容器的鼠标框选开启时，ListItem的框选才生效。 | + +- Sticky枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | None | 无吸顶效果。 | + | Normal | 当前item吸顶。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | +| onSelect(callback: (isSelected: boolean) => any)8+ | ListItem元素被鼠标框选的状态改变时触发回调。
isSelected：进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false。 | + + +## 示例 ``` @Entry @@ -113,5 +85,4 @@ struct ListItemExample { } ``` -![](figures/ListItem.gif) - +![zh-cn_image_0000001219864159](figures/zh-cn_image_0000001219864159.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigation.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigation.md deleted file mode 100644 index d5fd5e8ca1dbf71323978fded1035c73b675a34f..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigation.md +++ /dev/null @@ -1,414 +0,0 @@ -# Navigation - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单。 - -## 权限列表 - -无 - -## 子组件 - -可以包含子组件。 - -## 接口 - -Navigation\(\) - -创建可以根据属性设置，自动展示导航栏、标题、工具栏的组件。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

title

-

string | CustomBuilder

-

-

-

页面标题。

-

subtitle

-

string

-

-

-

页面副标题。

-

menus

-

Array<NavigationMenuItem> | CustomBuilder

-

-

-

页面右上角菜单。

-

-

titleMode

-

NavigationTitleMode

-

NavigationTitleMode.Free

-

页面标题栏显示模式。

-

toolBar

-

{

-

items:[

-

Object

-

] }

-

| CustomBuilder

-

-

-

-

设置工具栏内容。

-

items: 工具栏所有项。

-

hideToolBar

-

boolean

-

false

-

设置隐藏/显示工具栏：

-

true: 隐藏工具栏。

-

false: 显示工具栏。

-

hideTitleBar

-

boolean

-

false

-

隐藏标题栏。

-

hideBackButton

-

boolean

-

false

-

隐藏返回键。

-
- -- NavigationMenuItem类型接口说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

必填

-

默认值

-

描述

-

value

-

string

-

是

-

-

-

菜单栏单个选项的显示文本。

-

icon

-

string

-

否

-

-

-

菜单栏单个选项的图标资源路径。

-

action

-

() => void

-

否

-

-

-

当前选项被选中的事件回调。

-
- - -- Object类型接口说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

必填

-

默认值

-

描述

-

value

-

string

-

是

-

-

-

工具栏单个选项的显示文本。

-

icon

-

string

-

否

-

-

-

工具栏单个选项的图标资源路径。

-

action

-

() => void

-

否

-

-

-

当前选项被选中的事件回调。

-
- -- NavigationTitleMode枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

Free

-

当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。

-

Mini

-

固定为小标题模式（图标+主副标题）。

-

Full

-

固定为大标题模式（主副标题）。

-
- - >![](../../public_sys-resources/icon-note.gif) **说明：** - >目前可滚动组件只支持List。 - - -## 事件 - - - - - - - - - -

名称

-

功能描述

-

onTitleModeChanged(callback: (titleMode: NavigationTitleMode) => void)

-

当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。

-
- -## 示例 - -``` -/ Example 01 -@Entry -@Component -struct NavigationExample { - private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] - @State hideBar: boolean = true - - @Builder NavigationTitle() { - Column() { - Text('title') - .width(80) - .height(60) - .fontColor(Color.Blue) - .fontSize(30) - } - .onClick(() => { - console.log("title") - }) - } - - @Builder NavigationMenus() { - Row() { - Image('images/add.png') - .width(25) - .height(25) - Image('comment/more.png') - .width(25) - .height(25) - .margin({ left: 30 }) - }.width(100) - } - - build() { - Column() { - Navigation() { - Search({ value: '', placeholder: "" }).width('85%').margin(26) - List({ space: 5, initialIndex: 0 }) { - ForEach(this.arr, (item) => { - ListItem() { - Text('' + item) - .width('90%') - .height(80) - .backgroundColor('#3366CC') - .borderRadius(15) - .fontSize(16) - .textAlign(TextAlign.Center) - }.editable(true) - }, item => item) - } - .listDirection(Axis.Vertical) - .height(300) - .margin({ top: 10, left: 18 }) - .width('100%') - - Button(this.hideBar ? "tool bar" : "hide bar") - .onClick(() => { - this.hideBar = !this.hideBar - }) - .margin({ left: 135, top: 60 }) - } - .title(this.NavigationTitle) - .subTitle('subtitle') - .menus(this.NavigationMenus) - .titleMode(NavigationTitleMode.Free) - .hideTitleBar(false) - .hideBackButton(false) - .onTitleModeChanged((titleModel: NavigationTitleMode) => { - console.log('titleMode') - }) - .toolBar({ items: [ - { value: 'app', icon: 'images/grid.svg', action: () => { - console.log("app") - } }, - { value: 'add', icon: 'images/add.svg', action: () => { - console.log("add") - } }, - { value: 'collect', icon: 'images/collect.svg', action: () => { - console.log("collect") - } }] }) - .hideToolBar(this.hideBar) - } - } -} -``` - -![](figures/66666.gif) - -``` -// Example 02 -@Entry -@Component -struct ToolbarBuilderExample { - @State currentIndex: number = 0 - @State Build: Array = [ - { - icon: $r('app.media.ic_public_add'), - icon_after: $r('app.media.ic_public_addcolor'), - text: 'add', - num: 0 - }, - { - icon: $r('app.media.ic_public_app'), - icon_after: $r('app.media.ic_public_appcolor'), - text: 'app', - num: 1 - }, - { - icon: $r('app.media.ic_public_collect'), - icon_after: $r('app.media.ic_public_collectcolor'), - text: 'collect', - num: 2 - } - ] - - @Builder NavigationToolbar() { - Row() { - ForEach(this.Build, item => { - Column() { - Image(this.currentIndex == item.num ? item.icon_after : item.icon) - .width(25) - .height(25) - Text(item.text) - .fontColor(this.currentIndex == item.num ? "#ff7500" : "#000000") - } - .onClick(() => { - this.currentIndex = item.num - }) - .margin({ left: 70 }) - }) - } - } - - build() { - Column() { - Navigation() { - Flex() { - } - } - .toolBar(this.NavigationToolbar) - } - } -} -``` - -![](figures/duande.gif) - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md index 9fe06e2c64b7ba93a752ffe6fd73009380f4bf76..b8afaa69fd71ca9e71ee62ddc6b4e7cfa9cf51b9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md @@ -1,125 +1,51 @@ -# Navigator +# Navigator + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 路由容器组件，提供路由跳转能力。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 可以包含子组件。 -## 接口 -Navigator\(value?: \{target: string, type?: NavigationType\}\) +## 接口 + +Navigator(value?: {target: string, type?: NavigationType}) 创建路由组件。 -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

target

-

string

-

是

-

-

-

指定跳转目标页面的路径。

-

type

-

NavigationType

-

否

-

Push

-

指定路由方式。

-
- -- NavigationType枚举说明 - - - - - - - - - - - - - - - - -

名称

-

描述

-

Push

-

跳转到应用内的指定页面。

-

Replace

-

用应用内的某个页面替换当前页面，并销毁被替换的页面。

-

Back

-

返回上一页面或指定的页面。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

默认值

-

描述

-

active

-

boolean

-

-

-

当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。

-

params

-

Object

-

undefined

-

跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。

-
- -## 示例 +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | target | string | 是 | - | 指定跳转目标页面的路径。 | + | type | NavigationType | 否 | NavigationType.Push | 指定路由方式。 | + +- NavigationType枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Push | 跳转到应用内的指定页面。 | + | Replace | 用应用内的某个页面替换当前页面，并销毁被替换的页面。 | + | Back | 返回上一页面或指定的页面。 | + + +## 属性 + +| 名称 | 参数 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| active | boolean | - | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。 | +| params | Object | undefined | 跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。 | + + +## 示例 ``` // Navigator Page @@ -184,5 +110,4 @@ struct BackExample { } ``` -![](figures/Navigator.gif) - +![zh-cn_image_0000001219864145](figures/zh-cn_image_0000001219864145.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md index db74389b5089b02a97eb081126d1868ff384d44f..e03e5df8b87546384cdd4ff190753669d7d34d74 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md @@ -1,191 +1,66 @@ -# Panel +# Panel + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 可滑动面板。提供一种轻量的内容展示的窗口，可方便的在不同尺寸中切换，属于弹出式组件。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 可以包含子组件。 -## 接口 - -Panel\(value:\{show：boolean\}\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

show

-

boolean

-

是

-

-

-

控制Panel显示或隐藏。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

type

-

PanelType

-

Foldable

-

设置可滑动面板的类型。

-

mode

-

PanelMode

-

-

-

设置可滑动面板的初始状态。

-

dragBar

-

boolean

-

true

-

设置是否存在dragbar，true表示存在，false表示不存在。

-

fullHeight

-

Length

-

-

-

指定PanelMode.Full状态下的高度。

-

halfHeight

-

Length

-

-

-

指定PanelMode.Half状态下的高度，默认为屏幕尺寸的一半。

-

miniHeight

-

Length

-

-

-

指定PanelMode.Mini状态下的高度。

-
- -- PanelType枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

Minibar

-

提供minibar和类全屏展示切换效果。

-

Foldable

-

内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。

-

Temporary

-

内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。

-
- - -- PanelMode枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

Mini

-

类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。

-

Half

-

类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。

-

Full

-

类全屏状态。

-
- - -## 事件 - - - - - - - - - -

名称

-

功能描述

-

onChange(callback: (width: number, height: number, mode: PanelMode) => void)

-

当可滑动面板发生状态变化时触发， 返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。

-
- -## 示例 + +## 接口 + +Panel(value:{show：boolean}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | show | boolean | 是 | - | 控制Panel显示或隐藏。 | + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| type | PanelType | PanelType.Foldable | 设置可滑动面板的类型。 | +| mode | PanelMode | - | 设置可滑动面板的初始状态。 | +| dragBar | boolean | true | 设置是否存在dragbar，true表示存在，false表示不存在。 | +| fullHeight | Length | - | 指定PanelMode.Full状态下的高度。 | +| halfHeight | Length | - | 指定PanelMode.Half状态下的高度，默认为屏幕尺寸的一半。 | +| miniHeight | Length | - | 指定PanelMode.Mini状态下的高度。 | + +- PanelType枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Minibar | 提供minibar和类全屏展示切换效果。 | + | Foldable | 内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。 | + | Temporary | 内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。 | + +- PanelMode枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Mini | 类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。 | + | Half | 类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。 | + | Full | 类全屏状态。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onChange(callback: (width: number, height: number, mode: PanelMode) => void) | 当可滑动面板发生状态变化时触发， 返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。 | + + +## 示例 ``` @Entry @@ -219,5 +94,4 @@ struct PanelExample { } ``` -![](figures/Panel.gif) - +![zh-cn_image_0000001174422896](figures/zh-cn_image_0000001174422896.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md index 60055fa646dc24981dba7fdb16dbd485f86b5ac9..3f9d172cf9ef2c7fcb3d29e66c4866bf9366c907 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md @@ -1,114 +1,48 @@ -# Row +# Row + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 沿水平方向布局容器。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 可以包含子组件。 -## 接口 - -Row\(value:\{space?: Length\}\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

space

-

Length

-

否

-

0

-

横向布局元素间距。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

alignItems

-

VerticalAlign

-

Center

-

在垂直方向上子组件的对齐格式。

-

justifyContent8+

-

FlexAlign

-

Start

-

设置子组件在水平方向上的对齐格式。

-
- -- VerticalAlign枚举说明 - - - - - - - - - - - - - - - - -

名称

-

描述

-

Top

-

顶部对齐。

-

Center

-

居中对齐，默认对齐方式。

-

Bottom

-

底部对齐。

-
- - -## 示例 + +## 接口 + +Row(value:{space?: Length}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | space | Length | 否 | 0 | 横向布局元素间距。 | + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| alignItems | VerticalAlign | VerticalAlign.Center | 在垂直方向上子组件的对齐格式。 | +| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | 设置子组件在水平方向上的对齐格式。 | + +- VerticalAlign枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Top | 顶部对齐。 | + | Center | 居中对齐，默认对齐方式。 | + | Bottom | 底部对齐。 | + + +## 示例 ``` @Entry @@ -150,5 +84,4 @@ struct RowExample { } ``` -![](figures/Row.png) - +![zh-cn_image_0000001174422908](figures/Row.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md index dbd9c1dcc29ad46c262e95b63af448b2b8e88a46..1a44c31b6a234317ce5fb39cebf7c93dcf5d70d3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md @@ -1,46 +1,38 @@ -# RowSplit +# RowSplit + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 将子组件横向布局，并在每个子组件之间插入一根纵向的分割线。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 可以包含子组件 -## 接口 -RowSplit\(\) +## 接口 + +RowSplit() -## 属性 - - - - - - - - - - -

名称

-

参数类型

-

描述

-

resizeable

-

boolean

-

分割线是否可拖拽，默认为false。

-
+## 属性 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->RowSplit的分割线最小能拖动到刚好包含子组件。 +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| resizeable | boolean | 分割线是否可拖拽，默认为false。 | -## 示例 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> RowSplit的分割线最小能拖动到刚好包含子组件。 + + +## 示例 ``` @Entry @@ -63,5 +55,4 @@ struct RowSplitExample { } ``` -![](figures/RowSplit.gif) - +![zh-cn_image_0000001219982729](figures/zh-cn_image_0000001219982729.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md index 3952105d3826941241229bf63f4e63e46115a455..adb120ff5ccb893a97acf6efd60ea37cab570fdf 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md @@ -1,333 +1,140 @@ -# Scroll +# Scroll + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 可滚动的容器组件，当子组件的布局尺寸超过父组件的视口时，内容可以滚动。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 支持单个子组件。 -## 接口 - -Scroll\(scroller?: Scroller\) - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

scrollable

-

ScrollDirection

-

Vertical

-

设置滚动方法。

-

scrollBar

-

BarState

-

Auto

-

设置滚动条状态。

-

scrollBarColor

-

Color

-

-

-

设置滚动条的颜色。

-

scrollBarWidth

-

Length

-

-

-

设置滚动条的宽度。

-
- -- ScrollDirection枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

Horizontal

-

仅支持水平方向滚动。

-

Vertical

-

仅支持竖直方向滚动。

-

None

-

不可滚动。

-
- - -## Scroller + +## 接口 + +Scroll(scroller?: Scroller) + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| scrollable | ScrollDirection | ScrollDirection.Vertical | 设置滚动方法。 | +| scrollBar | [BarState](ts-appendix-enums.md#barstate枚举说明) | ScrollDirection.Auto | 设置滚动条状态。 | +| scrollBarColor | Color | - | 设置滚动条的颜色。 | +| scrollBarWidth | Length | - | 设置滚动条的宽度。 | + +- ScrollDirection枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Horizontal | 仅支持水平方向滚动。 | + | Vertical | 仅支持竖直方向滚动。 | + | None | 不可滚动。 | + + +## Scroller 可滚动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滚动，目前支持绑定到List和Scroll组件上。 -### 创建对象 + +### 导入对象 ``` scroller: Scroller = new Scroller() ``` -### scroller.scrollTo -scrollTo\(value: \{ xOffset: number | string, yOffset: number | string, animation?: \{ duration: number, curve: Curve \} \}\): void +### scroller.scrollTo + +scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?: { duration: number, curve: Curve } }): void + 滑动到指定位置。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

xOffset

-

Length

-

是

-

-

-

水平滑动偏移。

-

yOffset

-

Length

-

是

-

-

-

竖直滑动偏移。

-

animation

-

{

-

duration: number,

-

curve: Curve | CubicBezier | SpringCurve

-

}

-

否

-

-

-

动画配置：

-
  • duration: 滚动时长设置。
  • curve: 滚动曲线设置。
-
- - -### scroller.scrollEdge - -scrollEdge\(value: Edge\): void + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | xOffset | Length | 是 | - | 水平滑动偏移。 | + | yOffset | Length | 是 | - | 竖直滑动偏移。 | + | animation | {
duration: number,
curve: [Curve](ts-animatorproperty.md) \|
CubicBezier \|
SpringCurve
} | 否 | | 动画配置：
- duration: 滚动时长设置。
- curve: 滚动曲线设置。 | + + +### scroller.scrollEdge + +scrollEdge(value: Edge): void + 滚动到容器边缘。 -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

value

-

Edge

-

是

-

-

-

滚动到的边缘位置。

-
- - -### scroller.scrollPage - -scrollPage\(value: \{ next: boolean \}\): void + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | value | Edge | 是 | - | 滚动到的边缘位置。 | + + +### scroller.scrollPage + +scrollPage(value: { next: boolean, direction?: Axis }): void 滚动到下一页或者上一页。 -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

next

-

boolean

-

是

-

-

-

是否向下翻页。true表示向下翻页，false表示向上翻页。

-
- - -### scroller.currentOffset - -scroller.currentOffset\(\): Object +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | next | boolean | 是 | - | 是否向下翻页。true表示向下翻页，false表示向上翻页。 | + + +### scroller.currentOffset + +scroller.currentOffset(): Object + 返回当前的滚动偏移量。 -- 返回值 - - - - - - - - -

类型

-

描述

-

{

-

xOffset: number,

-

yOffset: number

-

}

-

xOffset: 水平滑动偏移;

-

yOffset: 竖直滑动偏移。

-
+- 返回值 + | 类型 | 描述 | + | -------- | -------- | + | {
xOffset: number,
yOffset: number
} | xOffset: 水平滑动偏移;
yOffset: 竖直滑动偏移。 | + +### scroller.scrollToIndex -### scroller.scrollToIndex +scroller.scrollToIndex(value: number): void -scroller.scrollToIndex\(value: number\): void 滑动到指定Index。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->仅支持list组件。 - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

value

-

number

-

是

-

-

-

要滑动到的列表项在列表中的索引值。

-
- - -## 事件 - - - - - - - - - - - - - - - -

名称

-

功能描述

-

onScroll(xOffset: number, yOffset: number) => void

-

滚动事件回调, 返回滚动时水平、竖直方向偏移量。

-

onScrollEdge(side: Edge) => void

-

滚动到边缘事件回调。

-

onScrollEnd() => void

-

滚动停止事件回调。

-
- -## 示例 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 仅支持list组件。 + + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | value | number | 是 | - | 要滑动到的列表项在列表中的索引值。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onScroll(xOffset: number, yOffset: number) => void | 滚动事件回调, 返回滚动时水平、竖直方向偏移量。 | +| onScrollEdge(side: Edge) => void | 滚动到边缘事件回调。 | +| onScrollEnd() => void | 滚动停止事件回调。 | + + +## 示例 ``` @Entry @@ -380,5 +187,4 @@ struct ScrollExample { } ``` -![](figures/scroll.gif) - +![zh-cn_image_0000001174104386](figures/zh-cn_image_0000001174104386.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-scrollbar.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-scrollbar.md deleted file mode 100644 index 0345350af373d2213bb47116dd2d32e93d699127..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-scrollbar.md +++ /dev/null @@ -1,166 +0,0 @@ -# ScrollBar - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。 - -## 权限列表 - -无 - -## 子组件 - -可以包含单个子组件。 - -## 接口 - -ScrollBar\(value: ScrollBarOption\) - -- ScrollBarOption的参数描述 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

scroller

-

Scroller

-

是

-

-

-

可滚动组件的控制器。用于与可滚动组件进行绑定。

-

direction

-

ScrollBarDirection

-

否

-

ScrollBarDirection.Vertical

-

滚动条的方向，控制可滚动组件对应方向的滚动。

-

state

-

BarState

-

否

-

BarState.Auto

-

滚动条状态。

-
- - >![](../../public_sys-resources/icon-note.gif) **说明：** - >ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。 - >滚动条组件与可滚动组件通过Scroller进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。 - -- ScrollBarDirection枚举说明 - - - - - - - - - - - - -

名称

-

描述

-

Vertical

-

纵向滚动条。

-

Horizontal

-

横向滚动条。

-
- -- BarState枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

On

-

常驻显示。

-

Off

-

不显示。

-

Auto

-

按需显示(触摸时显示，无操作2s后消失)。

-
- - -## 示例 - -``` -@Entry -@Component -struct ScrollBarExample { - private scroller: Scroller = new Scroller() - private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] - - build() { - Column() { - Stack({ alignContent: Alignment.End }) { - Scroll(this.scroller) { - Flex({ direction: FlexDirection.Column }) { - ForEach(this.arr, (item) => { - Row() { - Text(item.toString()) - .width('90%') - .height(100) - .backgroundColor('#3366CC') - .borderRadius(15) - .fontSize(16) - .textAlign(TextAlign.Center) - .margin({ top: 5 }) - } - }, item => item) - }.margin({ left: 52 }) - } - .scrollBar(BarState.Off) - .scrollable(ScrollDirection.Vertical) - ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) { - Text() - .width(30) - .height(100) - .borderRadius(10) - .backgroundColor('#C0C0C0') - }.width(30).backgroundColor('#ededed') - } - } - } -} -``` - -![](figures/F.gif) - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md index 96f77458a5289f1118c45427f7a7454322a1bd95..16691f323bce9ecfc053bf025313c45ec141eeee 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md @@ -1,52 +1,33 @@ -# Stack +# Stack + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 可以包含子组件。 -## 接口 - -Stack\(value:\{alignContent?: Alignment\}\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

alignContent

-

Alignment

-

否

-

Center

-

设置子组件在容器内的对齐方式。

-
- - -## 示例 + +## 接口 + +Stack(value:{alignContent?: Alignment}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | alignContent | [Alignment](ts-appendix-enums.md#alignment枚举说明) | 否 | Center | 设置子组件在容器内的对齐方式。 | + + +## 示例 ``` @Entry @@ -61,5 +42,4 @@ struct StackExample { } ``` -![](figures/stack.jpg) - +![zh-cn_image_0000001219982699](figures/zh-cn_image_0000001219982699.jpg) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-stepper.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-stepper.md deleted file mode 100644 index 4a939c40a8b8d72e5b561dab4c3ea82289201c98..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-stepper.md +++ /dev/null @@ -1,161 +0,0 @@ -# Stepper - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -步骤导航器。 - - -## 权限列表 - -无 - -## 子组件 - -仅能包含子组件[StepperItem](ts-container-stepperitem.md)。 - -## 接口 - -Stepper\(value?: \{ index?: number \}\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

index

-

number

-

否

-

0

-

设置步骤导航器显示第几个StepperItem。

-
- - -## 属性 - -无 - -## 事件 - - - - - - - - - - - - - - - -

名称

-

描述

-

onFinish(callback: () => void)

-

步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调 。

-

onSkip(callback: () => void)

-

当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。

-

onChange(callback: (prevIndex?: number, index?: number) => void)

-

点击左边或者右边文本按钮进行步骤切换时触发该事件。

-
  • prevIndex：切换前的步骤页索引值。
  • index：切换后的步骤页（前一页或者下一页）索引值。
-
- -## 示例 - -``` -@Entry -@Component -struct StepperExample { - @State currentIndex: number = 0 - @State firstState: ItemState = ItemState.Normal - @State secondState: ItemState = ItemState.Normal - - build() { - Stepper({ - index: this.currentIndex - }) { - StepperItem() { - Text('Page One') - .fontSize(35) - .fontColor(Color.Blue) - .width(200) - .lineHeight(50) - .margin({top:250}) - } - .nextLabel('') - .position({x: '35%', y: 0}) - StepperItem() { - Text('Page Two') - .fontSize(35) - .fontColor(Color.Blue) - .width(200) - .lineHeight(50) - .margin({top:250}) - .onClick(()=>{ - this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip - }) - } - .nextLabel('Next') - .prevLabel('Previous') - .status(this.firstState) - .position({x: '35%', y: 0}) - StepperItem() { - Text('Page Three') - .fontSize(35) - .fontColor(Color.Blue) - .width(200) - .lineHeight(50) - .margin({top:250}) - .onClick(()=>{ - this.secondState = this.secondState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting - }) - } - .position({x: '35%', y: 0}) - .status(this.secondState) - StepperItem() { - Text('Page four') - .fontSize(35) - .fontColor(Color.Blue) - .width(200) - .lineHeight(50) - .margin({top:250}) - } - .position({x: '35%', y: 0}) - .nextLabel('Finish') - } - .onFinish(() => { - console.log('onFinish') - }) - .onSkip(() => { - console.log('onSkip') - }) - .onChange((prevIndex: number, index: number) => { - this.currentIndex = index - }) - .align(Alignment.Center) - } -} -``` - -![](figures/stepper.gif) - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-stepperitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-stepperitem.md deleted file mode 100644 index 62365d530a7837b4d9b53eedfd6163d2cadd3407..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-stepperitem.md +++ /dev/null @@ -1,98 +0,0 @@ -# StepperItem - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -步骤导航器元素。 - - -## 权限列表 - -无 - -## 子组件 - -支持单个子组件。 - -## 接口 - -StepperItem\(\) - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

默认值

-

参数描述

-

prevLabel

-

string

-

-

-

当步骤导航器大于一页，除第一页默认值都为"返回"。

-

nextLabel

-

string

-

-

-

步骤导航器大于一页时，最后一页默认值为"开始"，其余页默认值为"下一步"。

-

status

-

ItemState

-

ItemState.Normal

-

步骤导航器元素的状态。

-
- -- ItemState枚举说明 - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Normal

-

正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。

-

Disabled

-

不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。

-

Waiting

-

等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个StepperItem。

-

Skip

-

跳过状态，表示跳过当前步骤, 进入下一个StepperItem。

-
- - -## 示例 - -见[Stepper](ts-container-stepper.md)。 - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md index 70252b01a59497546355ffdee687a96d92079794..2be13a5a414c26120b9b4a82b13053b8a717516f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -1,196 +1,66 @@ -# Swiper +# Swiper + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 滑动容器，提供切换子组件显示的能力。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 可以包含子组件。 -## 接口 - -Swiper\(value:\{controller?: SwiperController\}\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

controller

-

SwiperController

-

否

-

null

-

给组件绑定一个控制器，用来控制组件翻页。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

index

-

number

-

0

-

设置当前在容器中显示的子组件的索引值。

-

autoPlay

-

boolean

-

false

-

子组件是否自动播放，自动播放状态下，导航点不可操作。

-

interval

-

number

-

3000

-

使用自动播放时播放的时间间隔，单位为毫秒。

-

indicator

-

boolean

-

true

-

是否启用导航点指示器。

-

loop

-

boolean

-

true

-

是否开启循环。

-

duration

-

number

-

400

-

子组件切换的动画时长，单位为毫秒。

-

vertical

-

boolean

-

false

-

是否为纵向滑动。

-

itemSpace

-

Length

-

0

-

设置子组件与子组件之间间隙。

-

cachedCount8+

-

number

-

1

-

设置预加载子组件个数。

-

disableSwipe8+

-

boolean

-

false

-

禁用组件滑动切换功能。

-
- -### SwiperController + +## 接口 + +Swiper(value:{controller?: SwiperController}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件翻页。 | + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| index | number | 0 | 设置当前在容器中显示的子组件的索引值。 | +| autoPlay | boolean | false | 子组件是否自动播放，自动播放状态下，导航点不可操作。 | +| interval | number | 3000 | 使用自动播放时播放的时间间隔，单位为毫秒。 | +| indicator | boolean | true | 是否启用导航点指示器。 | +| loop | boolean | true | 是否开启循环。 | +| duration | number | 400 | 子组件切换的动画时长，单位为毫秒。 | +| vertical | boolean | false | 是否为纵向滑动。 | +| itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 | +| $cachedCount^{8+}$ | number | 1 | 设置预加载子组件个数。 | +| $disableSwipe^{8+}$ | boolean | false | 禁用组件滑动切换功能。 | + + +### SwiperController Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。 - - - - - - - - - - - -

接口名称

-

功能描述

-

showNext():void;

-

翻至下一页。

-

showPrevious():void;

-

翻至上一页。

-
- -## 事件 - - - - - - - - - -

名称

-

功能描述

-

onChange( index: number) => void

-

当前显示的组件索引变化时触发该事件。

-
- -## 示例 +| 接口名称 | 功能描述 | +| -------- | -------- | +| showNext():void; | 翻至下一页。 | +| showPrevious():void; | 翻至上一页。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onChange( index: number) => void | 当前显示的组件索引变化时触发该事件。 | + + +## 示例 ``` class MyDataSource implements IDataSource { @@ -266,5 +136,4 @@ struct SwiperExample { } ``` -![](figures/swiper.gif) - +![zh-cn_image_0000001224621917](figures/zh-cn_image_0000001224621917.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md index 0fa7211f4834b0f01665bba7914a39dcedd1ecf0..4f8767512e4c0fac3474b56381f57bbfe4781276 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md @@ -1,60 +1,42 @@ -# TabContent +# TabContent + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 仅在Tabs中使用，对应一个切换页签的内容视图。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 支持单个子组件。 -## 接口 -TabContent\(\) +## 接口 + +TabContent() -## 属性 + +## 属性 不支持触摸热区设置。 - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

tabBar

-

string | {

-

icon?: string,

-

text?: string

-

}

-

| CustomBuilder8+

-

-

-

设置TabBar上显示内容。

-

CustomBuilder: 构造器，内部可以传入组件（API8版本以上适用）。

-
说明：

如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。

-
-
- ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。 ->- TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。 - -## 示例 +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| tabBar | string \| {
icon?: string,
text?: string
}
\| [CustomBuilder](../../ui/ts-types.md#custombuilder类型8+)8+ | - | 设置TabBar上显示内容。
CustomBuilder: 构造器，内部可以传入组件（API8版本以上适用）。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。 +> +> - TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。 + + +## 示例 ``` @Entry @@ -64,57 +46,15 @@ struct TabContentExample { @State selectedFontColor: string = 'rgba(10, 30, 255, 1)' @State currentIndex: number = 0 private controller: TabsController = new TabsController() - @Builder Tab1Builder() { - Column() { - Image(this.currentIndex === 0 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png') - .width(24) - .height(24) - .opacity(this.currentIndex === 0 ? 1 : 0.4) - .objectFit(ImageFit.Contain) - Text("Tab1") - .fontColor(this.currentIndex === 0 ? this.selectedFontColor : this.fontColor) - .fontSize(10) - .margin({top: 2}) - } - } - - @Builder Tab2Builder() { + @Builder TabBuilder(index: number) { Column() { - Image(this.currentIndex === 1 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png') - .width(24) - .height(24) - .opacity(this.currentIndex === 1 ? 1 : 0.4) + Image(this.currentIndex === index ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png') + .width(10) + .height(10) + .opacity(this.currentIndex === index ? 1 : 0.4) .objectFit(ImageFit.Contain) - Text("Tab2") - .fontColor(this.currentIndex === 1 ? this.selectedFontColor : this.fontColor) - .fontSize(10) - .margin({top: 2}) - } - } - - @Builder Tab3Builder() { - Column() { - Image(this.currentIndex === 3 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png') - .width(24) - .height(24) - .opacity(this.currentIndex === 3 ? 1 : 0.4) - .objectFit(ImageFit.Contain) - Text("Tab3") - .fontColor(this.currentIndex === 3 ? this.selectedFontColor : this.fontColor) - .fontSize(10) - .margin({top: 2}) - } - } - - @Builder Tab4Builder() { - Column() { - Image(this.currentIndex === 4 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png') - .width(24) - .height(24) - .opacity(this.currentIndex === 4 ? 1 : 0.4) - .objectFit(ImageFit.Contain) - Text("Tab4") - .fontColor(this.currentIndex === 4 ? this.selectedFontColor : this.fontColor) + Text(`Tab${(index > 2 ? (index - 1) : index) + 1}`) + .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) .fontSize(10) .margin({top: 2}) } @@ -133,36 +73,36 @@ struct TabContentExample { build() { Column() { - Tabs({ barPosition: BarPosition.End, index: 0, controller: this.controller }) { + Tabs({ barPosition: BarPosition.End, controller: this.controller }) { TabContent() { Flex({justifyContent: FlexAlign.Center})) { Text('Tab1').fontSize(32) } - }.tabBar(this.Tab1Builder) + }.tabBar(this.TabBuilder(0)) TabContent() { Flex({justifyContent: FlexAlign.Center})) { Text('Tab2').fontSize(32) } - }.tabBar(this.Tab2Builder) + }.tabBar(this.TabBuilder(1)) TabContent() { Flex({justifyContent: FlexAlign.Center})) { Text('Add').fontSize(32) } - }.tabBar(this.AddBuilder) + }.tabBar(this.AddBuilder()) TabContent() { Flex({justifyContent: FlexAlign.Center})) { Text('Tab3').fontSize(32) } - }.tabBar(this.Tab3Builder) + }.tabBar(this.TabBuilder(3)) TabContent() { Flex({justifyContent: FlexAlign.Center})) { Text('Tab4').fontSize(32) } - }.tabBar(this.Tab4Builder) + }.tabBar(this.TabBuilder(4)) } .vertical(false) .barWidth(300).barHeight(56) @@ -175,5 +115,4 @@ struct TabContentExample { } ``` -![](figures/zh-cn_image_0000001193075122.gif) - +![zh-cn_image_0000001186585726](figures/zh-cn_image_0000001186585726.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md index 04f8bc2d60857e1ecbf3d4e382c1df87d53f5aba..064bbd50acf35ad2f5d5b589e6ee3319b088c15d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md @@ -1,245 +1,84 @@ -# Tabs +# Tabs + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 一种可以通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。 -## 支持设备 - - - - - - - - - - - - - -

手机

-

平板

-

智慧屏

-

智能穿戴

-

支持

-

支持

-

不支持

-

不支持

-
- -## 权限列表 + +## 支持设备 + +| 手机 | 平板 | 智慧屏 | 智能穿戴 | 轻量级智能穿戴 | +| -------- | -------- | -------- | -------- | -------- | +| 支持 | 支持 | 不支持 | 不支持 | 不支持 | + + +## 权限列表 无 -## 子组件 + +## 子组件 包含子组件[TabContent](ts-container-tabcontent.md)。 -## 接口说明 - -Tabs\(value: \{barPosition?: BarPosition, index?: number, controller?: [TabsController](#section104288910399)\}\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

barPosition

-

BarPosition

-

否

-

Start

-

指定页签位置来创建Tabs容器组件。

-

index

-

number

-

否

-

0

-

指定初次初始页签索引。

-

controller

-

TabsController

-

否

- 		  

设置Tabs控制器。

-
- -- BarPosition枚举说明 - - - - - - - - - - - - -

名称

-

描述

-

Start

-

vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。

-

End

-

vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。

-
- - -### TabsController + +## 接口说明 + +Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsController](#tabscontroller)}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | barPosition | BarPosition | 否 | BarPosition.Start | 指定页签位置来创建Tabs容器组件。 | + | index | number | 否 | 0 | 指定初次初始页签索引。 | + | controller | [TabsController](#tabscontroller) | 否 | - | 设置Tabs控制器。 | + +- BarPosition枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Start | vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。 | + | End | vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。 | + + +### TabsController Tabs组件的控制器，用于控制Tabs组件进行页签切换。 - - - - - - - - -

接口名称

-

功能描述

-

changeIndex(value: number): void

-

控制Tabs切换到指定页签，index: 页签在Tabs里的索引值，索引值从0开始。

-
- -## 属性 +| 接口名称 | 功能描述 | +| -------- | -------- | +| changeIndex(value: number): void | 控制Tabs切换到指定页签，index: 页签在Tabs里的索引值，索引值从0开始。 | + + +## 属性 不支持触摸热区设置。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

vertical

-

boolean

-

是否为纵向Tab，默认为false。

-

是否为纵向Tab，默认为false。

-

scrollable

-

boolean

-

是否可以通过左右滑动进行页面切换，默认为true。

-

是否可以通过左右滑动进行页面切换，默认为true。

-

barMode

-

BarMode

-

TabBar布局模式。

-

TabBar布局模式。

-

barWidth

-

number

-

TabBar的宽度值，不设置时使用系统主题中的默认值。

-

TabBar的宽度值，不设置时使用系统主题中的默认值。

-

barHeight

-

number

-

TabBar的高度值，不设置时使用系统主题中的默认值。

-

TabBar的高度值，不设置时使用系统主题中的默认值。

-

animationDuration

-

number

-

200

-

TabContent滑动动画时长。

-
- -- BarMode枚举说明 - - - - - - - - - - - - -

名称

-

描述

-

Scrollable

-

TabBar使用实际布局宽度, 超过总长度后可滑动。

-

Fixed

-

所有TabBar平均分配宽度。

-
- - -## 事件 - - - - - - - - - -

名称

-

功能描述

-

onChange(callback: (index: number) => void)

-

Tab页签切换后触发的事件。

-
- -## 示例 +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| vertical | boolean | 是否为纵向Tab，默认为false。 | 是否为纵向Tab，默认为false。 | +| scrollable | boolean | 是否可以通过左右滑动进行页面切换，默认为true。 | 是否可以通过左右滑动进行页面切换，默认为true。 | +| barMode | BarMode | TabBar布局模式。 | TabBar布局模式。 | +| barWidth | number | TabBar的宽度值，不设置时使用系统主题中的默认值。 | TabBar的宽度值，不设置时使用系统主题中的默认值。 | +| barHeight | number | TabBar的高度值，不设置时使用系统主题中的默认值。 | TabBar的高度值，不设置时使用系统主题中的默认值**。** | +| animationDuration | number | 200 | TabContent滑动动画时长。 | + +- BarMode枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Scrollable | TabBar使用实际布局宽度, 超过总长度后可滑动。 | + | Fixed | 所有TabBar平均分配宽度。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onChange(callback: (index: number) => void) | Tab页签切换后触发的事件。 | + + +## 示例 ``` @Entry @@ -249,7 +88,7 @@ struct TabsExample { build() { Column() { - Tabs({ barPosition: BarPosition.Start, index: 1, controller: this.controller }) { + Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { TabContent() { Column().width('100%').height('100%').backgroundColor(Color.Pink) }.tabBar('pink') @@ -277,5 +116,4 @@ struct TabsExample { } ``` -![](figures/Tabs.gif) - +![zh-cn_image_0000001174264360](figures/zh-cn_image_0000001174264360.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md index ee2c7e7917dff2668d67d775cd85fa4e64358f35..c2e660b62c106a8337592bfc21de67bb9b6faa9d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md @@ -1,130 +1,47 @@ -# Circle +# Circle + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 圆形绘制组件。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 - -Circle\(options?: \{width: Length, height: Length\}\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

options

-

Object

-

否

-

-

-

见options参数说明。

-
- -- options参数说明 - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

width

-

Length

-

是

-

-

-

宽度。

-

height

-

Length

-

是

-

-

-

高度。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

默认值

-

必填

-

参数描述

-

width

-

Length

-

0

-

否

-

圆所在矩形的宽度。

-

height

-

Length

-

0

-

否

-

圆所在矩形的高度。

-
- -## 示例 + +## 接口 + +Circle(options?: {width: Length, height: Length}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | options | Object | 否 | - | 见options参数说明。 | + +- options参数说明 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | width | Length | 是 | - | 宽度。 | + | height | Length | 是 | - | 高度。 | + + +## 属性 + +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | Length | 0 | 否 | 圆所在矩形的宽度。 | +| height | Length | 0 | 否 | 圆所在矩形的高度。 | + + +## 示例 ``` @Entry @@ -141,5 +58,4 @@ struct CircleExample { } ``` -![](figures/circle.png) - +![zh-cn_image_0000001219744191](figures/zh-cn_image_0000001219744191.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md index 8439713d7d85793f7c6a07c885ff436d14755f60..322800fca201305e89e4c767c2fa142af3bb49a3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md @@ -1,130 +1,47 @@ -# Ellipse +# Ellipse + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 椭圆绘制组件。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 - -ellipse\(options?: \{width: Lenght, height: Length\}\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

options

-

Object

-

否

-

-

-

见options参数说明。

-
- -- options参数说明 - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

width

-

Length

-

是

-

-

-

宽度。

-

height

-

Length

-

是

-

-

-

高度。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

默认值

-

必填

-

参数描述

-

width

-

Length

-

0

-

否

-

椭圆所在矩形的宽度。

-

height

-

Length

-

0

-

否

-

椭圆所在矩形的高度。

-
- -## 示例 + +## 接口 + +ellipse(options?: {width: Length, height: Length}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | options | Object | 否 | - | 见options参数说明。 | + +- options参数说明 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | width | Length | 是 | - | 宽度。 | + | height | Length | 是 | - | 高度。 | + + +## 属性 + +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | Length | 0 | 否 | 椭圆所在矩形的宽度。 | +| height | Length | 0 | 否 | 椭圆所在矩形的高度。 | + + +## 示例 ``` @Entry @@ -141,5 +58,4 @@ struct EllipseExample { } ``` -![](figures/ellipse.png) - +![zh-cn_image_0000001174104394](figures/zh-cn_image_0000001174104394.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md index fb71f410877583fca0287a634e313c0d29a36781..dd0565e1a35a6a5bfe6795454661260316f4e26a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md @@ -1,152 +1,49 @@ -# Line +# Line + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 直线绘制组件。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 - -Line\(options?: \{width: Lenght, height: Length\}\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

options

-

Object

-

否

-

-

-

见options参数说明。

-
- -- options参数说明 - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

width

-

Length

-

是

-

-

-

宽度。

-

height

-

Length

-

是

-

-

-

高度。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

默认值

-

必填

-

参数描述

-

width

-

Length

-

0

-

否

-

直线所在矩形的宽度。

-

height

-

Length

-

0

-

否

-

直线所在矩形的高度。

-

startPoint

-

Point

-

[0, 0]

-

是

-

直线起点坐标(相对坐标)。

-

endPoint

-

Point

-

[0, 0]

-

是

-

直线终点坐标(相对坐标)。

-
- -## 示例 + +## 接口 + +Line(options?: {width: Length, height: Length}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | options | Object | 否 | - | 见options参数说明。 | + +- options参数说明 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | width | Length | 是 | - | 宽度。 | + | height | Length | 是 | - | 高度。 | + + +## 属性 + +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | Length | 0 | 否 | 直线所在矩形的宽度。 | +| height | Length | 0 | 否 | 直线所在矩形的高度。 | +| startPoint | Point | [0, 0] | 是 | 直线起点坐标(相对坐标)。 | +| endPoint | Point | [0, 0] | 是 | 直线终点坐标(相对坐标)。 | + + +## 示例 ``` @Entry @@ -161,5 +58,4 @@ struct LineExample { } ``` -![](figures/line.jpg) - +![zh-cn_image_0000001219982725](figures/zh-cn_image_0000001219982725.jpg) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md index e0e179a3ea2bc2d188b1e73d30e95d7d3215304a..2521f303fd32abf7eb675194b2e7271e351fe3e5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md @@ -1,84 +1,59 @@ -# Path +# Path + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 路径绘制组件。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

默认值

-

必填

-

参数描述

-

width

-

Length

-

0

-

否

-

路径所在矩形的宽度。

-

height

-

Length

-

0

-

否

-

路径所在矩形的高度。

-

commands

-

string

-

''

-

是

-

路径绘制的命令字符串。

-
+ +## 属性 + +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | Length | 0 | 否 | 路径所在矩形的宽度。 | +| height | Length | 0 | 否 | 路径所在矩形的高度。 | +| commands | string | '' | 是 | 路径绘制的命令字符串。 | + 支持的绘制命令如下： -- M = moveto -- L = lineto -- H = horizontal lineto -- V = vertical lineto -- C = curveto -- S = smooth curveto -- Q = quadratic Belzier curve -- T = smooth quadratic Belzier curveto -- A = elliptical Arc -- Z = closepath -如 commands\('M0 20 L50 50 L50 100 Z'\)定义了一条路径，开始于位置（0，20），到达位置（50，50）后再到（50，100），最后在（0，20）处关闭路径。 +- M = moveto + +- L = lineto + +- H = horizontal lineto + +- V = vertical lineto + +- C = curveto -## 示例 +- S = smooth curveto + +- Q = quadratic Belzier curve + +- T = smooth quadratic Belzier curveto + +- A = elliptical Arc + +- Z = closepath + + +如 commands('M0 20 L50 50 L50 100 Z')定义了一条路径，开始于位置（0，20），到达位置（50，50）后再到（50，100），最后在（0，20）处关闭路径。 + + +## 示例 ``` @Entry @@ -111,5 +86,4 @@ struct PathExample { } ``` -![](figures/path.png) - +![zh-cn_image_0000001219744193](figures/zh-cn_image_0000001219744193.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md index 48ea576c3ea4ac6cb18b8c3ec29b4757b2fd1419..fc5a45c6886e66b0b4c49e4819f467cc593672df 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md @@ -1,141 +1,48 @@ -# Polygon +# Polygon + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 多边形绘制组件。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 - -Polygon\(value:\{options?: \{width: Lenght, height: Length\}\}\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

options

-

Object

-

否

-

-

-

见options参数说明。

-
- -- options参数说明 - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

width

-

Length

-

是

-

-

-

宽度。

-

height

-

Length

-

是

-

-

-

高度。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

默认值

-

必填

-

参数描述

-

width

-

Length

-

0

-

否

-

多边形所在矩形的宽度。

-

height

-

Length

-

0

-

否

-

多边形所在矩形的高度。

-

points

-

Array<Point>

-

-

-

是

-

多边形的顶点坐标列表。

-
- -## 示例 + +## 接口 + +Polygon(value:{options?: {width: Length, height: Length}}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | options | Object | 否 | - | 见见options参数说明。 | + +- options参数说明 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | width | Length | 是 | - | 宽度。 | + | height | Length | 是 | - | 高度。 | + + +## 属性 + +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | Length | 0 | 否 | 多边形所在矩形的宽度。 | +| height | Length | 0 | 否 | 多边形所在矩形的高度。 | +| points | Array<Point> | - | 是 | 多边形的顶点坐标列表。 | + + +## 示例 ``` @Entry @@ -156,5 +63,4 @@ struct PolygonExample { } ``` -![](figures/polygon.gif) - +![zh-cn_image_0000001174582856](figures/zh-cn_image_0000001174582856.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md index 6232b9552b101c0fa53ddd8adec3d163d887167c..cb6add47d5a1c90442db199b8e172954905237c5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md @@ -1,141 +1,48 @@ -# Polyline +# Polyline + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 折线绘制组件。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 - -Polyline\(options?: \{width: Lenght, height: Length\}\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

options

-

Object

-

否

-

-

-

见options参数说明。

-
- -- options参数说明 - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

width

-

Length

-

是

-

-

-

宽度。

-

height

-

Length

-

是

-

-

-

高度。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

默认值

-

必填

-

参数描述

-

width

-

Length

-

0

-

否

-

折线所在矩形的宽度。

-

height

-

Length

-

0

-

否

-

折线所在矩形的高度。

-

points

-

Array<Point>

-

-

-

是

-

折线经过坐标点列表。

-
- -## 示例 + +## 接口 + +Polyline(options?: {width: Length, height: Length}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | options | Object | 否 | - | 见options参数说明。 | + +- options参数说明 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | width | Length | 是 | - | 宽度。 | + | height | Length | 是 | - | 高度。 | + + +## 属性 + +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | Length | 0 | 否 | 折线所在矩形的宽度。 | +| height | Length | 0 | 否 | 折线所在矩形的高度。 | +| points | Array<Point> | - | 是 | 折线经过坐标点列表。 | + + +## 示例 ``` @Entry @@ -154,5 +61,4 @@ struct PolylineExample { } ``` -![](figures/polyline.gif) - +![zh-cn_image_0000001219744185](figures/zh-cn_image_0000001219744185.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md index 2fe97ada0aa9149ea253e642d9a7983f0c841600..cc4402002bd13095d3d21b130daeba3b53fb2f39 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md @@ -1,196 +1,53 @@ -# Rect +# Rect + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 矩形绘制组件。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 无 -## 接口 - -Rect\(value:\{options?: \{width: Length,height: Length,radius?: Length | Array\} | \{width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length\}\}\) - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

options

-

Object

-

否

-

-

-

见options参数说明。

-
- -- options参数说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

width

-

Length

-

是

-

-

-

宽度。

-

height

-

Length

-

是

-

-

-

高度。

-

radius

-

Length | Array<Length>

-

否

-

0

-

圆角半径，支持分别设置四个角的圆角度数。

-

radiusWidth

-

Length

-

否

-

0

-

圆角宽度。

-

radiusHeight

-

Length

-

否

-

0

-

圆角高度。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

默认值

-

必填

-

参数描述

-

width

-

Length

-

0

-

否

-

宽度。

-

height

-

Length

-

0

-

否

-

高度。

-

radiusWidth

-

Length

-

0

-

否

-

圆角的宽度，仅设置宽时宽高一致。

-

radiusHeight

-

Length

-

0

-

否

-

圆角的高度，仅设置高时宽高一致。

-

radius

-

Length | Array<Length>

-

0

-

否

-

圆角大小。

-
- -## 示例 + +## 接口 + +Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array<Length>} | {width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length}}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | options | Object | 否 | - | 见见options参数说明。 | + +- options参数说明 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | width | Length | 是 | - | 宽度。 | + | height | Length | 是 | - | 高度。 | + | radius | Length \| Array<Length> | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 | + | radiusWidth | Length | 否 | 0 | 圆角宽度。 | + | radiusHeight | Length | 否 | 0 | 圆角高度。 | + + +## 属性 + +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | Length | 0 | 否 | 宽度。 | +| height | Length | 0 | 否 | 高度。 | +| radiusWidth | Length | 0 | 否 | 圆角的宽度，仅设置宽时宽高一致。 | +| radiusHeight | Length | 0 | 否 | 圆角的高度，仅设置高时宽高一致。 | +| radius | Length \| Array<Length> | 0 | 否 | 圆角大小。 | + + +## 示例 ``` @Entry @@ -214,5 +71,4 @@ struct RectExample { } ``` -![](figures/rect.png) - +![zh-cn_image_0000001174264386](figures/zh-cn_image_0000001174264386.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md index a6f804c33909e5bbffaa74d7e7ee41fe222016cf..7c3e80fe8db461f185e254d9e7b22ab284aa7697 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md @@ -1,226 +1,63 @@ -# Shape +# Shape + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。 + 1、绘制组件使用Shape作为父组件，实现类似SVG的效果。 + 2、绘制组件单独使用，用于在页面上绘制指定的图形。 -## 权限列表 + +## 权限列表 无 -## 子组件 -可以包含子组件。 +## 子组件 -## 接口 +可以包含子组件。 -Shape\(value:\{target?: PixelMap\}\) -- 参数 +## 接口 - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

target

-

PixelMap

-

否

-

null

-

绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。

-
+Shape(value:{target?: PixelMap}) +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | target | PixelMap | 否 | null | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 | -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

默认值

-

必填

-

参数描述

-

viewPort

-

{

-

x: Length,

-

y: Length,

-

width: Length,

-

height: Length

-

}

-

-

-

是

-

形状的视口。

-

fill

-

Color

-

Black

-

否

-

填充颜色。

-

stroke

-

Color

-

-

-

否

-

边框颜色。

-

strokeDashArray

-

Array<Length>

-

[]

-

否

-

设置边框的间隙。

-

strokeDashOffset

-

Length

-

0

-

否

-

边框绘制起点的偏移量。

-

strokeLineCap

-

LineCapStyle

-

Butt

-

否

-

路径端点绘制样式。

-

strokeLineJoin

-

LineJoinStyle

-

Miter

-

否

-

边框拐角绘制样式。

-

strokeMiterLimit

-

number

-

4

-

否

-

锐角绘制成斜角的极限值。

-

strokeOpacity

-

number

-

1

-

否

-

设置边框的不透明度。

-

strokeWidth

-

Length

-

1

-

否

-

设置边框的宽度。

-

antiAlias

-

boolean

-

true

-

否

-

是否开启抗锯齿。

-
+## 属性 -- LineJoinStyle枚举说明 +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| viewPort | {
x: Length,
y: Length,
width: Length,
height: Length
} | - | 是 | 形状的视口。 | +| fill | Color | Black | 否 | 填充颜色。 | +| stroke | Color | - | 否 | 边框颜色。 | +| strokeDashArray | Array<Length> | [] | 否 | 设置边框的间隙。 | +| strokeDashOffset | Length | 0 | 否 | 边框绘制起点的偏移量。 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#LineCapStyle枚举说明) | LineCapStyle.Butt | 否 | 路径端点绘制样式。 | +| strokeLineJoin | LineJoinStyle | LineJoinStyle.Miter | 否 | 边框拐角绘制样式。 | +| strokeMiterLimit | number | 4 | 否 | 锐角绘制成斜角的极限值。 | +| strokeOpacity | number | 1 | 否 | 设置边框的不透明度。 | +| strokeWidth | Length | 1 | 否 | 设置边框的宽度。 | +| antiAlias | boolean | true | 否 | 是否开启抗锯齿。 | - - - - - - - - - - - - - - -

名称

-

描述

-

Bevel

-

使用斜角连接路径段。

-

Miter

-

使用尖角连接路径段。

-

Round

-

使用圆角连接路径段。

-
+- LineJoinStyle枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Bevel | 使用斜角连接路径段。 | + | Miter | 使用尖角连接路径段。 | + | Round | 使用圆角连接路径段。 | -## 示例 +## 示例 ``` @Entry @@ -284,5 +121,4 @@ struct ShapeExample { } ``` -![](figures/2-01.png) - +![zh-cn_image_0000001184628104](figures/zh-cn_image_0000001184628104.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components.md index cc08580c60e5dbdaed218799a65599ccf53d4197..2fc7425ba0cad7ffd1b008419d805914e39d6e75 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components.md @@ -1,19 +1,19 @@ -# 绘制组件 +# 绘制组件 -- **[Circle](ts-drawing-components-circle.md)** -- **[Ellipse](ts-drawing-components-ellipse.md)** -- **[Line](ts-drawing-components-line.md)** +- **[Circle](ts-drawing-components-circle.md)** -- **[Polyline](ts-drawing-components-polyline.md)** +- **[Ellipse](ts-drawing-components-ellipse.md)** -- **[Polygon](ts-drawing-components-polygon.md)** +- **[Line](ts-drawing-components-line.md)** -- **[Path](ts-drawing-components-path.md)** +- **[Polyline](ts-drawing-components-polyline.md)** -- **[Rect](ts-drawing-components-rect.md)** +- **[Polygon](ts-drawing-components-polygon.md)** -- **[Shape](ts-drawing-components-shape.md)** +- **[Path](ts-drawing-components-path.md)** +- **[Rect](ts-drawing-components-rect.md)** +- **[Shape](ts-drawing-components-shape.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md index a8c5b137585ea0c52a91b935f288b7accdd60a10..3bf23aac8c9e01466509527e29c11f2f5ee64e0b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md @@ -1,113 +1,34 @@ -# 显式动画 +# 显式动画 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - - - - - - - -

接口名称

-

功能描述

-

animateTo(value: AnimationOption, event: ()=> void) : void

-

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。

-

event指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。

-
-## AnimationOption对象说明 +| 接口名称 | 功能描述 | +| -------- | -------- | -------- | +| animateTo(value: [AnimationOption](#animationoption对象说明), event: ()=> void) : void | 提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。
event指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。 | -- 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性名称

-

属性类型

-

默认值

-

描述

-

duration

-

number

-

1000

-

动画持续时间，单位为毫秒。

-

tempo

-

number

-

1.0

-

动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。

-

curve

-

Curve | Curves

-

Linear

-

动画曲线。

-

delay

-

number

-

0

-

单位为ms(毫秒)，默认不延时播放。

-

iterations

-

number

-

1

-

默认播放一次，设置为-1时表示无限次播放。

-

playMode

-

PlayMode

-

Normal

-

设置动画播放模式，默认播放完成后重头开始播放。

-
+## AnimationOption对象说明 +- 属性 + | 属性名称 | 属性类型 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | + | duration | number | 1000 | 动画持续时间，单位为毫秒。 | + | tempo | number | 1.0 | 动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。 | + | curve | Curve \| Curves | Linear | 动画曲线。 | + | delay | number | 0 | 单位为ms(毫秒)，默认不延时播放。 | + | iterations | number | 1 | 默认播放一次，设置为-1时表示无限次播放。 | + | playMode | PlayMode | Normal | 设置动画播放模式，默认播放完成后重头开始播放。 | -- 接口 - - - - - - - - -

名称

-

功能描述

-

onFinish() => void

-

动效播放完成回调。

-
+- 接口 + | 名称 | 功能描述 | + | -------- | -------- | + | onFinish() => void | 动效播放完成回调。 | -## 示例 +## 示例 ``` @Entry @@ -162,5 +83,4 @@ struct AnimateToExample { } ``` -![](figures/AnimateTo.gif) - +![zh-cn_image_0000001174104398](figures/zh-cn_image_0000001174104398.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-gesture-processing.md b/zh-cn/application-dev/reference/arkui-ts/ts-gesture-processing.md index 0125a056be402199673da324e3c26ad5e10a94fe..ce04ce5feabe9b187ac3a6e9f79365c734d569dd 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-gesture-processing.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-gesture-processing.md @@ -1,9 +1,7 @@ -# 手势处理 +# 手势处理 -- **[绑定手势方法](ts-gesture-settings.md)** - -- **[基础手势](ts-basic-gestures.md)** - -- **[组合手势](ts-combined-gestures.md)** +- **[组合手势](ts-combined-gestures.md)** +- **[绑定手势方法](ts-gesture-settings.md)** +- **[基础手势](ts-basic-gestures.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md b/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md index 7433a1c4e5f9b7e278311aeceaa6e7cd65b71786..f11e9af5376a354ad808a664c033b3fb8be974e3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md @@ -1,186 +1,62 @@ -# 绑定手势方法 +# 绑定手势方法 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 绑定手势识别 + +## 绑定手势识别 + 通过如下属性给组件绑定手势识别，手势识别成功后可以通过事件回调通知组件。 - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

gesture

-

gesture: GestureType,

-

mask?: GestureMask

-

gesture: -，

-

mask: GestureMask.Normal

-

绑定手势识别。

-

gesture: 绑定的手势类型， mask: 事件响应设置。

-

priorityGesture

-

gesture: GestureType,

-

mask?: GestureMask

-

gesture: -，

-

mask: GestureMask.Normal

-

绑定优先识别手势。

-

gesture: 绑定的手势类型， mask: 事件响应设置。

-
说明：
  • 默认情况下，子组件优先于父组件识别手势，当父组件配置priorityGesture时，父组件优先于子组件进行识别。
-
-

parallelGesture

-

gesture: GestureType,

-

mask?: GestureMask

-

gesture: -，

-

mask: GestureMask.Normal

-

绑定可与子组件手势同时触发的手势。

-

gesture: 绑定的手势类型， mask: 事件响应设置。

-
说明：
  • 手势事件为非冒泡事件。父组件设置parallelGesture时，父子组件相同的手势事件都可以触发，实现类似冒泡效果。
-
-
- -- GestureMask枚举说明 - - - - - - - - - - - - -

名称

-

描述

-

Normal

-

不屏蔽子组件的手势，按照默认手势识别顺序进行识别。

-

IgnoreInternal

-

屏蔽子组件的手势，仅当前容器的手势进行识别。

-
说明：

子组件上系统内置的手势不会被屏蔽，如子组件为List组件时，内置的滑动手势仍然会触发。

-
-
- - -- 系统提供如下Gesture类型 - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

TapGesture

-

点击手势，支持单次点击、多次点击识别。

-

LongPressGesture

-

长按手势。

-

PanGesture

-

平移手势。

-

PinchGesture

-

捏合手势。

-

RotationGesture

-

旋转手势。

-

GestureGroup

-

手势识别组，多种手势组合为复合手势，支持连续识别、并行识别和互斥识别。

-
- - -## 响应手势事件 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| gesture | gesture: GestureType,
mask?: GestureMask | gesture: -，
mask: GestureMask.Normal | 绑定手势识别。
gesture: 绑定的手势类型， mask: 事件响应设置。 | +| priorityGesture | gesture: GestureType,
mask?: GestureMask | gesture: -，
mask: GestureMask.Normal | 绑定优先识别手势。
gesture: 绑定的手势类型， mask: 事件响应设置。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 默认情况下，子组件优先于父组件识别手势，当父组件配置priorityGesture时，父组件优先于子组件进行识别。 | +| parallelGesture | gesture: GestureType,
mask?: GestureMask | gesture: -，
mask: GestureMask.Normal | 绑定可与子组件手势同时触发的手势。
gesture: 绑定的手势类型， mask: 事件响应设置。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 手势事件为非冒泡事件。父组件设置parallelGesture时，父子组件相同的手势事件都可以触发，实现类似冒泡效果。 | + + +- GestureMask枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Normal | 不屏蔽子组件的手势，按照默认手势识别顺序进行识别。 | + | IgnoreInternal | 屏蔽子组件的手势，仅当前容器的手势进行识别。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 子组件上系统内置的手势不会被屏蔽，如子组件为List组件时，内置的滑动手势仍然会触发。 | + + +- GestureType + | 名称 | 描述 | + | -------- | -------- | + | TapGesture | 点击手势，支持单次点击、多次点击识别。 | + | LongPressGesture | 长按手势。 | + | PanGesture | 平移手势。 | + | PinchGesture | 捏合手势。 | + | RotationGesture | 旋转手势。 | + | GestureGroup | 手势识别组，多种手势组合为复合手势，支持连续识别、并行识别和互斥识别。 | + + +## 响应手势事件 组件通过gesture方法绑定手势对象，可以通过手势对象提供的事件相应响应手势操作。如通过TapGesture对象的onAction事件响应点击事件。具体事件定义见各个手势对象章节。 -- TapGesture事件说明 - - - - - - - - - -

名称

-

功能描述

-

onAction((event?: GestureEvent) => void)

-

Tap手势识别成功回调。

-
- - -- GestureEvent对象说明 - - - - - - - - - - - - - - - - -

属性名称

-

属性类型

-

描述

-

timestamp

-

number

-

事件时间戳。

-

target8+

-

EventTarget

-

触发手势事件的元素对象。

-
- - -## 示例 +- TapGesture事件说明 + | 名称 | 功能描述 | + | -------- | -------- | -------- | + | onAction((event?:GestureEvent) => void) | Tap手势识别成功回调。 | + +- GestureEvent对象说明 + | 属性名称 | 属性类型 | 描述 | + | -------- | -------- | -------- | + | timestamp | number | 事件时间戳。 | + | target8+ | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象。 | + + +## 示例 ``` @Entry @@ -202,9 +78,9 @@ struct GestureSettingsExample { .priorityGesture( TapGesture() .onAction((event: GestureEvent) => { - this.value = 'priorityGesture onAction' + '\ncomponent globalPos：（' - + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + '）\nwidth:' - + event.target.area.width + '\nheight：' + event.target.area.height + this.value = 'priorityGesture onAction' + '\ncomponent globalPos:(' + + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\nwidth:' + + event.target.area.width + '\nheight:' + event.target.area.height }), GestureMask.IgnoreInternal ) }.padding(60) @@ -212,5 +88,4 @@ struct GestureSettingsExample { } ``` -![](figures/zh-cn_image_0000001237475107.gif) - +![zh-cn_image_0000001210195016](figures/zh-cn_image_0000001210195016.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-global-ui-methods.md b/zh-cn/application-dev/reference/arkui-ts/ts-global-ui-methods.md index af6873512f82bbc30fdcaa02e27ef0dcf9197036..9cbebba1b2482ea3f97dba93eaffe11cf7b74ca2 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-global-ui-methods.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-global-ui-methods.md @@ -1,13 +1,7 @@ -# 全局UI方法 +# 全局UI方法 -- **[警告弹窗](ts-methods-alert-dialog-box.md)** - -- **[自定义弹窗](ts-methods-custom-dialog-box.md)** - -- **[图片缓存](ts-methods-image-cache.md)** - -- **[媒体查询](ts-methods-media-query.md)** - -- **[列表选择弹窗](ts-methods-custom-actionsheet.md)** +- **[图片缓存](ts-methods-image-cache.md)** +- **[媒体查询](ts-methods-media-query.md)** +- **[弹窗](ts-methods-popup-window.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md b/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md index 574b5f210e18e4b5f9ae0e0be569d31333a474b1..881e7babeba67f09198c8100354d6c52d945d5af 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md @@ -1,232 +1,97 @@ -# 插值计算 +# 插值计算 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 导入模块 + +## 导入模块 ``` import curves from '@ohos.curves' ``` -## 权限 + +## 权限 无 -## curves.init -init\(curve?: Curve\): Object +## curves.init + +init(curve?: Curve): Object + 插值曲线的初始化函数，可以根据入参创建一个插值曲线对象。 -- 参数 - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

默认值

-

说明

-

curve

-

Curve

-

否

-

Linear

-

曲线对象。

-
- -- 返回值 - - 曲线对象Object。 - - -## curves.steps - -steps\(count: number, end: boolean\): Object + +- 参数 + | 参数名 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | curve | Curve | 否 | Linear | 曲线对象。 | + +- 返回值 + 曲线对象Object。 + + +## curves.steps + +steps(count: number, end: boolean): Object + 构造阶梯曲线对象。 -- 参数： - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

默认值

-

说明

-

count

-

number

-

是

-

-

-

阶梯的数量，需要为正整数。

-

end

-

boolean

-

否

-

true

-

在每个间隔的起点或是终点发生阶跃变化 ，默认值为true，即在终点发生阶跃变化。

-
- -- 返回值 - - 曲线对象Object。 - - -## curves.cubicBezier - -cubicBezier\(x1: number, y1: number, x2: number, y2: number\): Object + +- 参数： + | 参数名 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | count | number | 是 | - | 阶梯的数量，需要为正整数。 | + | end | boolean | 否 | true | 在每个间隔的起点或是终点发生阶跃变化 ，默认值为true，即在终点发生阶跃变化。 | + +- 返回值 + 曲线对象Object。 + + +## curves.cubicBezier + +cubicBezier(x1: number, y1: number, x2: number, y2: number): Object + 构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

x1

-

number

-

是

-

确定贝塞尔曲线第一点横坐标。

-

y1

-

number

-

是

-

确定贝塞尔曲线第一点纵坐标。

-

x2

-

number

-

是

-

确定贝塞尔曲线第二点横坐标。

-

y2

-

number

-

是

-

确定贝塞尔曲线第二点纵坐标。

-
- -- 返回值 - - 曲线对象Object。 - - -## curves.spring - -spring\(velocity: number, mass: number, stiffness: number, damping: number\): Object + +- 参数 + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。 | + | y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。 | + | x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。 | + | y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。 | + +- 返回值 + 曲线对象Object。 + + +## curves.spring + +spring(velocity: number, mass: number, stiffness: number, damping: number): Object + 构造弹簧曲线对象。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

velocity

-

number

-

是

-

初始速度。

-

mass

-

number

-

是

-

质量。

-

stiffness

-

number

-

是

-

刚度。

-

damping

-

number

-

是

-

阻尼。

-
- -- 返回值 - - 曲线对象Object。 - - -## 示例 + +- 参数 + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | velocity | number | 是 | 初始速度。 | + | mass | number | 是 | 质量。 | + | stiffness | number | 是 | 刚度。 | + | damping | number | 是 | 阻尼。 | + +- 返回值 + 曲线对象Object。 + + +## 示例 ``` import Curves from '@ohos.curves' @@ -236,34 +101,22 @@ let curve3 = Curves.spring(100, 1, 228, 30) // 创建一个弹簧插值曲线 let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞尔曲线 ``` + 曲线对象只能通过上面的接口创建。 +| 接口名称 | 功能描述 | +| -------- | -------- | +| interpolate(time: number): number | 插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值。
time: 当前的归一化时间参数，有效值范围0到1。
返回归一化time时间点对应的曲线插值。 | + - - - - - - - - -

接口名称

-

功能描述

-

interpolate(time: number): number

-

插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值。

-

time: 当前的归一化时间参数，有效值范围0到1。

-

返回归一化time时间点对应的曲线插值。

-
- -- 示例 - - ``` - import Curves from '@ohos.curves' - let curve = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 - let value: number = curve.interpolate(0.5) // 计算得到时间到一半时的插值 - ``` - - -## 整体示例 +- 示例 + ``` + import Curves from '@ohos.curves' + let curve = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 + let value: number = curve.interpolate(0.5) // 计算得到时间到一半时的插值 + ``` + + +## 整体示例 ``` import Curves from '@ohos.curves' @@ -290,5 +143,4 @@ struct ImageComponent { } ``` -![](figures/5.gif) - +![zh-cn_image_0000001174104410](figures/zh-cn_image_0000001174104410.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md b/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md index 0e22e0f7fc73f6bc3ac331f6961497ba89175f39..fa9ecb8c49bc37ad43f20fabc6f14b77718768a6 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md @@ -1,834 +1,366 @@ -# 矩阵变换 +# 矩阵变换 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 导入模块 + +## 导入模块 ``` -import Matrix4 from '@ohos.matrix4' +import matrix4 from '@ohos.matrix4' ``` -## 权限列表 + +## 权限列表 无 -## matrix4.init -init\(array: Array\): Object +## matrix4.init + +init(array: Array<number>): Object + Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵，矩阵为列优先。 -- 参数 - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

默认值

-

说明

-

array

-

Array<number>

-

是

-

[1, 0, 0, 0,

-

0, 1, 0, 0,

-

0, 0, 1, 0,

-

0, 0, 0, 1]

-

参数为长度为16（4*4）的number数组, 详情见参数描述。

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

Object

-

根据入参创建的四阶矩阵对象。

-
- -- 参数描述 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

m00

-

number

-

是

-

x轴缩放值，单位矩阵默认为1。

-

m01

-

number

-

是

-

第2个值，xyz轴旋转会影响这个值。

-

m02

-

number

-

是

-

第3个值，xyz轴旋转会影响这个值。

-

m03

-

number

-

是

-

无实际意义。

-

m10

-

number

-

是

-

第5个值，xyz轴旋转会影响这个值。

-

m11

-

number

-

是

-

y轴缩放值，单位矩阵默认为1。

-

m12

-

number

-

是

-

第7个值，xyz轴旋转会影响这个值。

-

m13

-

number

-

是

-

无实际意义。

-

m20

-

number

-

是

-

第9个值，xyz轴旋转会影响这个值。

-

m21

-

number

-

是

-

第10个值，xyz轴旋转会影响这个值。

-

m22

-

number

-

是

-

z轴缩放值，单位矩阵默认为1。

-

m23

-

number

-

是

-

无实际意义。

-

m30

-

number

-

是

-

x轴平移值，单位px，单位矩阵默认为0。

-

m31

-

number

-

是

-

y轴平移值，单位px，单位矩阵默认为0。

-

m32

-

number

-

是

-

z轴平移值，单位px，单位矩阵默认为0。

-

m33

-

number

-

是

-

齐次坐标下生效，产生透视投影效果。

-
- -- 示例 - - ``` - // 创建一个四阶矩阵 - let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0, - 0.0, 1.0, 0.0, 0.0, - 0.0, 0.0, 1.0, 0.0, - 0.0, 0.0, 0.0, 1.0]) - ``` - - -## matrix4.identity - -identity\(\): Object + +- 参数 + | 参数名 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | array | Array<number> | 是 | [1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1] | 参数为长度为16（4\*4）的number数组, 详情见参数描述。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | Object | 根据入参创建的四阶矩阵对象。 | + +- 参数描述 + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | m00 | number | 是 | x轴缩放值，单位矩阵默认为1。 | + | m01 | number | 是 | 第2个值，xyz轴旋转会影响这个值。 | + | m02 | number | 是 | 第3个值，xyz轴旋转会影响这个值。 | + | m03 | number | 是 | 无实际意义。 | + | m10 | number | 是 | 第5个值，xyz轴旋转会影响这个值。 | + | m11 | number | 是 | y轴缩放值，单位矩阵默认为1。 | + | m12 | number | 是 | 第7个值，xyz轴旋转会影响这个值。 | + | m13 | number | 是 | 无实际意义。 | + | m20 | number | 是 | 第9个值，xyz轴旋转会影响这个值。 | + | m21 | number | 是 | 第10个值，xyz轴旋转会影响这个值。 | + | m22 | number | 是 | z轴缩放值，单位矩阵默认为1。 | + | m23 | number | 是 | 无实际意义。 | + | m30 | number | 是 | x轴平移值，单位px，单位矩阵默认为0。 | + | m31 | number | 是 | y轴平移值，单位px，单位矩阵默认为0。 | + | m32 | number | 是 | z轴平移值，单位px，单位矩阵默认为0。 | + | m33 | number | 是 | 齐次坐标下生效，产生透视投影效果。 | + +- 示例 + ``` + import Matrix4 from '@ohos.matrix4' + // 创建一个四阶矩阵 + let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0, + 0.0, 1.0, 0.0, 0.0, + 0.0, 0.0, 1.0, 0.0, + 0.0, 0.0, 0.0, 1.0]) + ``` + + +## matrix4.identity + +identity(): Object + Matrix的初始化函数，可以返回一个单位矩阵对象。 -- 返回值 - - - - - - - - -

类型

-

说明

-

Object

-

单位矩阵对象。

-
+- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | Object | 单位矩阵对象。 | -- 示例 +- 示例 + ``` + // matrix1 和 matrix2 效果一致 + import Matrix4 from '@ohos.matrix4' + let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0, + 0.0, 1.0, 0.0, 0.0, + 0.0, 0.0, 1.0, 0.0, + 0.0, 0.0, 0.0, 1.0]) + let matrix2 = Matrix4.identity() + ``` - ``` - // matrix1 和 matrix2 效果一致 - let matrix1 = Matrix4.init([1.0, 0.0, 0.0, 0.0, - 0.0, 1.0, 0.0, 0.0, - 0.0, 0.0, 1.0, 0.0, - 0.0, 0.0, 0.0, 1.0]) - let matrix2 = Matrix4.identity() - ``` +## matrix4.copy -## matrix4.copy +copy(): Object -copy\(\): Object Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。 -- 返回值 - - - - - - - - - -

类型

-

说明

-

Object

-

当前矩阵的拷贝对象。

-
- -- 示例 - - ``` - @Entry - @Component - struct Test { - private matrix1 = Matrix4.identity().translate({x:100}) - private matrix2 = this.matrix1.copy().scale({x:2}) - build() { - Column() { - Image($r("app.media.bg1")) - .width("40%") - .height(100) - .transform(this.matrix1) - Image($r("app.media.bg2")) - .width("40%") - .height(100) - .margin({top:50}) - .transform(this.matrix2) - } + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | Object | 当前矩阵的拷贝对象。 | + +- 示例 + ``` + import Matrix4 from '@ohos.matrix4' + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().translate({x:100}) + private matrix2 = this.matrix1.copy().scale({x:2}) + build() { + Column() { + Image($r("app.media.bg1")) + .width("40%") + .height(100) + .transform(this.matrix1) + Image($r("app.media.bg2")) + .width("40%") + .height(100) + .margin({top:50}) + .transform(this.matrix2) } } - ``` - -![](figures/s1.png) + } + ``` + ![zh-cn_image_0000001219744181](figures/zh-cn_image_0000001219744181.png) -## Matrix4 -### combine +## Matrix4 + + +### combine + +combine(matrix: Matrix4): Object -combine\(matrix: Matrix4\): Object Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个新的矩阵对象。 -- 参数 - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

默认值

-

说明

-

matrix

-

Matrix4

-

是

-

-

-

待叠加的矩阵对象。

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

Object

-

矩阵叠加后的对象。

-
- -- 示例 - - ``` - @Entry - @Component - struct Test { - private matrix1 = Matrix4.identity().translate({x:200}).copy() - private matrix2 = Matrix4.identity().scale({x:2}).copy() - build() { - Column() { - // 先平移x轴100px，再缩放两倍x轴 - Image($r("app.media.bg1")).transform(this.matrix1.combine(this.matrix2)) - .width("40%") - .height(100) - .margin({top:50}) - } + +- 参数 + | 参数名 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | matrix | Matrix4 | 是 | - | 待叠加的矩阵对象。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | Object | 矩阵叠加后的对象。 | + +- 示例 + ``` + import Matrix4 from '@ohos.matrix4' + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().translate({x:200}).copy() + private matrix2 = Matrix4.identity().scale({x:2}).copy() + build() { + Column() { + // 先平移x轴100px，再缩放两倍x轴 + Image($r("app.media.bg1")).transform(this.matrix1.combine(this.matrix2)) + .width("40%") + .height(100) + .margin({top:50}) } } - ``` - -![](figures/q1.png) + } + ``` + + ![zh-cn_image_0000001174582846](figures/zh-cn_image_0000001174582846.png) + +### invert -### invert +invert(): Object -invert\(\): Object Matrix的逆函数，可以返回一个当前矩阵对象的逆矩阵，即效果正好相反。 -- 返回值 - - - - - - - - -

类型

-

说明

-

Object

-

当前矩阵的逆矩阵对象。

-
+- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | Object | 当前矩阵的逆矩阵对象。 | -- 示例 +- 示例 + ``` + import Matrix4 from '@ohos.matrix4' + // matrix1(宽放大2倍) 和 matrix2(宽缩小2倍) 效果相反 + let matrix1 = Matrix4.identity().scale({x:2}) + let matrix2 = matrix1.invert() + ``` - ``` - // matrix1(宽放大2倍) 和 matrix2(宽缩小2倍) 效果相反 - let matrix1 = Matrix4.identity().scale({x:2}) - let matrix2 = matrix1.invert() - ``` +### translate -### translate +translate({x?: number, y?: number, z?: number}): Object -translate\(\{x?: number, y?: number, z?: number\}\): Object Matrix的平移函数，可以为当前矩阵增加x轴/Y轴/Z轴平移效果。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

默认值

-

说明

-

x

-

number

-

否

-

0

-

x轴的平移距离，单位px。

-

y

-

number

-

否

-

0

-

y轴的平移距离，单位px。

-

z

-

number

-

否

-

0

-

z轴的平移距离，单位px。

-
- - -- 返回值 - - - - - - - - - -

类型

-

说明

-

Object

-

增加好平移效果后的矩阵对象。

-
- -- 示例 - - ``` - @Entry - @Component - struct Test { - private matrix1 = Matrix4.identity().translate({x:100, y:200, z:30}) - build() { - Column() { - Image($r("app.media.bg1")).transform(this.matrix1) - .width("40%") - .height(100) - } + +- 参数 + | 参数名 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 否 | 0 | x轴的平移距离，单位px。 | + | y | number | 否 | 0 | y轴的平移距离，单位px。 | + | z | number | 否 | 0 | z轴的平移距离，单位px。 | + + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | Object | 增加好平移效果后的矩阵对象。 | + +- 示例 + ``` + import Matrix4 from '@ohos.matrix4' + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().translate({x:100, y:200, z:30}) + build() { + Column() { + Image($r("app.media.bg1")).transform(this.matrix1) + .width("40%") + .height(100) } } - ``` - -![](figures/s3.png) + } + ``` + + ![zh-cn_image_0000001219662645](figures/zh-cn_image_0000001219662645.png) + +### scale -### scale +scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Object -scale\(\{x?: number, y?: number, z?: number, centerX?: number, centerY?: number\}\): Object Matrix的缩放函数，可以为当前矩阵增加x轴/Y轴/Z轴缩放效果。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

默认值

-

说明

-

x

-

number

-

否

-

1

-

x轴的缩放倍数。

-

y

-

number

-

否

-

1

-

y轴的缩放倍数。

-

z

-

number

-

否

-

1

-

z轴的缩放倍数。

-

centerX

-

number

-

否

-

0

-

变换中心点x轴坐标。

-

centerY

-

number

-

否

-

0

-

变换中心点y轴坐标。

-
- - -- 返回值 - - - - - - - - - -

类型

-

说明

-

Object

-

增加好缩放效果后的矩阵对象。

-
- -- 示例 - - ``` - @Entry - @Component - struct Test { - private matrix1 = Matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50}) - build() { - Column() { - Image($r("app.media.bg1")).transform(this.matrix1) - .width("40%") - .height(100) - } + +- 参数 + | 参数名 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 否 | 1 | x轴的缩放倍数。 | + | y | number | 否 | 1 | y轴的缩放倍数。 | + | z | number | 否 | 1 | z轴的缩放倍数。 | + | centerX | number | 否 | 0 | 变换中心点x轴坐标。 | + | centerY | number | 否 | 0 | 变换中心点y轴坐标。 | + + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | Object | 增加好缩放效果后的矩阵对象。 | + +- 示例 + ``` + import Matrix4 from '@ohos.matrix4' + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50}) + build() { + Column() { + Image($r("app.media.bg1")).transform(this.matrix1) + .width("40%") + .height(100) } } - ``` - -![](figures/s4-(1).png) + } + ``` + + ![zh-cn_image_0000001219864131](figures/zh-cn_image_0000001219864131.png) + +### rotate -### rotate +rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Object -rotate\(\{x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length\}\): Object Matrix的旋转函数，可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

默认值

-

说明

-

x

-

number

-

否

-

1

-

旋转轴向量x坐标。

-

y

-

number

-

否

-

1

-

旋转轴向量y坐标。

-

z

-

number

-

否

-

1

-

旋转轴向量z坐标。

-

angle

-

number

-

否

-

0

-

旋转角度。

-

centerX

-

number

-

否

-

0

-

变换中心点x轴坐标。

-

centerY

-

number

-

否

-

0

-

变换中心点y轴坐标。

-
- - -- 返回值 - - - - - - - - - -

类型

-

说明

-

Object

-

增加好旋转效果后的矩阵对象。

-
- -- 示例 - - ``` - @Entry - @Component - struct Test { - private matrix1 = Matrix4.identity().rotate({x:1, y:1, z:2, angle:30}) - build() { - Column() { - Image($r("app.media.bg1")).transform(this.matrix1) - .width("40%") - .height(100) - }.width("100%").margin({top:50}) - } + +- 参数 + | 参数名 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 否 | 1 | 旋转轴向量x坐标。 | + | y | number | 否 | 1 | 旋转轴向量y坐标。 | + | z | number | 否 | 1 | 旋转轴向量z坐标。 | + | angle | number | 否 | 0 | 旋转角度。 | + | centerX | number | 否 | 0 | 变换中心点x轴坐标。 | + | centerY | number | 否 | 0 | 变换中心点y轴坐标。 | + + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | Object | 增加好旋转效果后的矩阵对象。 | + +- 示例 + ``` + import Matrix4 from '@ohos.matrix4' + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().rotate({x:1, y:1, z:2, angle:30}) + build() { + Column() { + Image($r("app.media.bg1")).transform(this.matrix1) + .width("40%") + .height(100) + }.width("100%").margin({top:50}) } - ``` - -![](figures/1.png) + } + ``` + + ![zh-cn_image_0000001174422898](figures/zh-cn_image_0000001174422898.png) -### transformPoint +### transformPoint + +transformPoint(point: Point): Point -transformPoint\(point: Point\): Point Matrix的坐标点转换函数，可以将当前的变换效果作用到一个坐标点上。 -- 参数 - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

默认值

-

说明

-

point

-

Point

-

是

-

-

-

需要转换的坐标点。

-
- - -- 返回值 - - - - - - - - - -

类型

-

说明

-

Point

-

返回矩阵变换后的Point对象。

-
- -- 示例 - - ``` - import prompt from '@system.prompt' - - @Entry - @Component - struct Test { - private matrix1 = Matrix4.identity().transformPoint([100, 10]) - build() { - Column() { - Button("get Point") - .onClick(() => { - prompt.showToast({message:JSON.stringify(this.matrix1),duration:2000}) - }).backgroundColor(0x2788D9) - }.width("100%").padding(50) - } + +- 参数 + | 参数名 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | point | Point | 是 | - | 需要转换的坐标点。 | + + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | Point | 返回矩阵变换后的Point对象。 | + +- 示例 + ``` + import Matrix4 from '@ohos.matrix4' + import prompt from '@system.prompt' + + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().transformPoint([100, 10]) + build() { + Column() { + Button("get Point") + .onClick(() => { + prompt.showToast({message:JSON.stringify(this.matrix1),duration:2000}) + }).backgroundColor(0x2788D9) + }.width("100%").padding(50) } - ``` - -![](figures/222.gif) + } + ``` + ![zh-cn_image_0000001219864133](figures/zh-cn_image_0000001219864133.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md b/zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md new file mode 100644 index 0000000000000000000000000000000000000000..474796aa37f11b1847ae9cb75d9cc431e563ed64 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md @@ -0,0 +1,172 @@ +# Video + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +视频播放组件。 + + +## 子组件 + +不支持子组件。 + + +## 接口 + +Video(value: VideoOption) + +- VideoOption类型接口说明 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | src | string | 否 | - | 视频播放源的路径。 | + | currentProgressRate | number \| PlaybackSpeed8+ | 否 | 1.0 \| PlaybackSpeed.Speed_Forward_1_00_X | 视频播放倍速。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> number取值仅支持：0.75，1.0，1.25，1.75，2.0。
> 
>  | + | previewUri | string \| PixelMap8+ \| [Resource](../../ui/ts-types.md#resource类型) | 否 | - | 预览图片的路径。 | + | controller | [VideoController](#videocontroller) | 否 | - | 控制器。 | + + +- PlaybackSpeed类型接口说明8+ + | 名称 | 描述 | + | -------- | -------- | + | Speed_Forward_0_75_X | 0.75倍速播放。 | + | Speed_Forward_1_00_X | 1倍速播放。 | + | Speed_Forward_1_25_X | 1.25倍速播放。 | + | Speed_Forward_1_75_X | 1.75倍速播放。 | + | Speed_Forward_2_00_X | 2倍速播放。 | + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| muted | boolean | false | 是否静音。 | +| autoPlay | boolean | false | 是否自动播放。 | +| controls | boolean | true | 控制视频播放的控制栏是否显示。 | +| objectFit | [ImageFit](ts-basic-components-image.md) | Cover | 设置视频显示模式。 | +| loop | boolean | false | 是否单个视频循环播放。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | -------- | +| onStart() => void | 播放时触发该事件。 | +| onPause() => void | 暂停时触发该事件。 | +| onFinish() => void | 播放结束时触发该事件。 | +| onError() => void | 播放失败时触发该事件。 | +| onPrepared(event?: { duration: number }) => void | 视频准备完成时触发该事件，通过duration可以获取视频时长，单位为秒(s)。 | +| onSeeking(event?: { time: number }) => void | 操作进度条过程时上报时间信息，单位为s。 | +| onSeeked(event?: { time: number }) => void | 操作进度条完成后，上报播放时间信息，单位为s。 | +| onUpdate(event?: { time: number }) => void | 播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。 | + + +### VideoController + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 一个VideoController对象可以控制一个或多个video。 + +| 接口名称 | 描述 | +| -------- | -------- | +| start() : void | 开始播放。 | +| pause() : void | 暂停播放。 | +| stop() : void | 停止播放。 | +| setCurrentTime(value: number) | 指定视频播放的进度位置。 | +| setCurrentTime(value: number, seekMode: SeekMode | 指定视频播放的进度位置，并指定跳转模式。 | + +- SeekMode类型接口说明8+ + | 名称 | 描述 | + | -------- | -------- | + | PreviousKeyframe | 跳转到前一个最近的关键帧。 | + | NextKeyframe | 跳转到后一个最近的关键帧。 | + | ClosestKeyframe | 跳转到最近的关键帧。 | + | Accurate | 精准跳转，不论是否为关键帧。 | + + +## 示例 + +``` +@Entry +@Component +struct VideoCreateComponent { + @State srcs: string = "/resources/video/video1.mp4"; + @State previewUris: string = "/resources/image/media.JPG"; + @State currentProgressRates: number = 1; + @State autoPlays: boolean = false; + @State controlsss: boolean = true; + myVideoController: VideoController = new VideoController(); + @State startStaus: boolean = true; + build() { + Column() { + Video({ + src: this.srcs, + previewUri: this.previewUris, + currentProgressRate: this.currentProgressRates, + controller: this.myVideoController + }).width(700).height(500) + .autoPlay(this.autoPlays) + .controls(this.controlsss) + .onStart(() => { + console.error('onStart'); + }) + .onPause(() => { + console.error('onPause'); + }) + .onFinish(() => { + console.error('onFinish'); + }) + .onError(() => { + console.error('onFinish'); + }) + .onPrepared((e) => { + console.error('onPrepared is ' + e.duration); + }) + .onSeeking((e) => { + console.error('onSeeking is ' + e.time); + }) + .onSeeked((e) => { + console.error('onSeekedis ' + e.time); + }) + .onUpdate((e) => { + console.error('onUpdateis ' + e.time); + }) + Row() { + Button("src").onClick(() => { + if (this.srcs == "/resources/video/video1.mp4") { + this.srcs = "/resources/video/video2.mp4"; + } else { + this.srcs = "/resources/video/video1.mp4"; + } + }); + Button("previewUri").onClick(() => { + if (this.previewUris == "/resources/image/media.JPG") { + this.previewUris = "/resources/image/sinlin.png"; + } else { + this.previewUris = "/resources/image/media.JPG"; + } + }); + Button("controlsss").onClick(() => { + this.controlsss = !this.controlsss; + }); + } + + Row() { + Button("start").onClick(() => { + this.myVideoController.start(); + }); + Button("pause").onClick(() => { + this.myVideoController.pause(); + }); + Button("stop").onClick(() => { + this.myVideoController.stop(); + }); + } + + Row() { + Button("setCurrentTime").onClick(() => { + this.myVideoController.setCurrentTime(9, SeekMode.Accurate); + }); + } + } + } +} +``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md b/zh-cn/application-dev/reference/arkui-ts/ts-media-components-web.md similarity index 78% rename from zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md rename to zh-cn/application-dev/reference/arkui-ts/ts-media-components-web.md index 0af11727a4e6ddfb890195b6248cbbe5e0b841f3..23b96fbb9dda24135fbe2f3a2db8258f71ec2603 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-media-components-web.md @@ -1,129 +1,129 @@ -# Web - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -提供具有网页显示能力的 Web 组件。 - -## 权限列表 - -ohos.permission.INTERNET - -ohos.permission.READ_USER_STORAGE - -## 子组件 - -无 - -## 接口 - -- Web\(options: {src: string, controller?: WebController}\) - - 表1 options 参数说明 - - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ---------- | ---------------------------------------- | ---- | ---- | ------- | - | src | string | 是 | - | 网页资源地址。 | - | controller | WebController | 否 | - | 控制器。 | - - -> ![](../../public_sys-resources/icon-note.gif) **说明：** -> -> - 一个页面只支持一个 Web 组件，全屏显示，页面中的其他组件会被 Web 组件遮挡； -> - 不支持转场动画； -> - 只支持加载 rawfile 目录下的 html 文件，不支持远程资源。 - -## 属性 - -| 名称 | 参数类型 | 默认值 | 描述 | -| ---------------- | ------- | ----- | ---------------------------------------- | -| javaScriptAccess | boolean | false | 是否允许执行 JavaScript 脚本，当设置为 false 时，不允许执行。 | -| fileAccess | boolean | false | 启用或禁用 Web 中可通过 file 方式访问应用中的本地文件，当设置为 false 时，禁用。 | - -> ![](../../public_sys-resources/icon-note.gif) **说明：** -> -> 不支持通用属性。 - -## 事件 - -不支持通用事件。 - -| 名称 | 功能描述 | -| ---------------------------------------- | ---------------------------------------- | -| onPageEnd(callback: (event?: { url: string }) => void) |

网页加载结束时触发该回调。
url：Web 引擎返回的 URL。

| - -## WebController - -Web 组件的控制器。 - -### 创建对象 - -``` -webController: WebController = new WebController() -``` - -### runJavaScript - -runJavaScript(script: string): void - -执行 JavaScript 脚本。 - -- 参数 - - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ------ | ------ | ---- | ---- | -------------- | - | script | string | 是 | - | JavaScript 脚本。 | - -### loadUrl - -loadUrl(url: string): void - -加载 URL。 - -- 参数 - - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ---- | ------ | ---- | ---- | ---------- | - | url | string | 是 | - | 需要加载的 URL。 | - - -## 示例 - -``` -// webComponent.ets -@Entry -@Component -struct WebComponent { - @State javaScriptAccess: boolean = true; - @State fileAccess: boolean = true; - controller: WebController = new WebController(); - build() { - Column() { - Web(src: $rawfile('index.html'), controller: this.controller) - .javaScriptAccess(javaScriptAccess) - .fileAccess(fileAccess) - .onPageEnd(e => { - // test() 在 index.html 中已定义 - this.controller.runJavaScript('test()'); - console.log("url: ", e.url); - }) - } - } -} - -// index.html - - - - - Hello world! - - - -``` - +# Web + +>![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +>该组件从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +提供具有网页显示能力的 Web 组件。 + +## 权限列表 + +ohos.permission.INTERNET + +ohos.permission.READ_USER_STORAGE + +## 子组件 + +无 + +## 接口 + +- Web\(options: {src: string, controller?: WebController}\) + + 表1 options 参数说明 + + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | ---------- | ------------------------------- | ---- | ------ | -------------- | + | src | string | 是 | - | 网页资源地址。 | + | controller | [WebController](#WebController) | 否 | - | 控制器。 | + + +> ![icon-note.gif](public_sys-resources/icon-note.gif)**说明：** +> +> - 一个页面只支持一个 Web 组件，全屏显示，页面中的其他组件会被 Web 组件遮挡； +> - 不支持转场动画； +> - 只支持加载 rawfile 目录下的 html 文件，不支持远程资源。 + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| ---------------- | ------- | ----- | ---------------------------------------- | +| javaScriptAccess | boolean | false | 是否允许执行 JavaScript 脚本，当设置为 false 时，不允许执行。 | +| fileAccess | boolean | false | 启用或禁用 Web 中可通过 file 方式访问应用中的本地文件，当设置为 false 时，禁用。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> +> 不支持通用属性。 + +## 事件 + +不支持通用事件。 + +| 名称 | 功能描述 | +| ---------------------------------------- | ---------------------------------------- | +| onPageEnd(callback: (event?: { url: string }) => void) |

网页加载结束时触发该回调。
url：Web 引擎返回的 URL。

| + +## WebController + +Web 组件的控制器。 + +### 创建对象 + +``` +webController: WebController = new WebController() +``` + +### runJavaScript + +runJavaScript(script: string): void + +执行 JavaScript 脚本。 + +- 参数 + + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | ------ | ------ | ---- | ---- | -------------- | + | script | string | 是 | - | JavaScript 脚本。 | + +### loadUrl + +loadUrl(url: string): void + +加载 URL。 + +- 参数 + + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | ---- | ------ | ---- | ---- | ---------- | + | url | string | 是 | - | 需要加载的 URL。 | + + +## 示例 + +``` +// webComponent.ets +@Entry +@Component +struct WebComponent { + @State javaScriptAccess: boolean = true; + @State fileAccess: boolean = true; + controller: WebController = new WebController(); + build() { + Column() { + Web(src: $rawfile('index.html'), controller: this.controller) + .javaScriptAccess(javaScriptAccess) + .fileAccess(fileAccess) + .onPageEnd(e => { + // test() 在 index.html 中已定义 + this.controller.runJavaScript('test()'); + console.log("url: ", e.url); + }) + } + } +} + +// index.html + + + + + Hello world! + + + +``` + ![](figures/Web.png) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-media-components.md b/zh-cn/application-dev/reference/arkui-ts/ts-media-components.md new file mode 100644 index 0000000000000000000000000000000000000000..cc86617a935fd1c5c43fbc159052d6b8f86c2ff9 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-media-components.md @@ -0,0 +1,5 @@ +# 媒体组件 + +- **[Video](ts-media-components-video.md)** + +- **[Web](ts-media-components-web.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md new file mode 100644 index 0000000000000000000000000000000000000000..07d48cb35b8d26ed9ed9cb3d16659799e8e25506 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md @@ -0,0 +1,92 @@ +# 列表选择弹窗 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +列表弹窗。 + + +## 权限 + +无 + + +## ActionSheet.show + +show(options: { paramObject1}) + +定义列表弹窗并弹出。 + +- paramObject1参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | title | string \| [Resource](../../ui/ts-types.md#resource类型) | 否 | 无标题 | 弹窗标题。 | + | message | string \| [Resource](../../ui/ts-types.md#resource类型) | 是 | - | 弹窗内容。 | + | autoCancel | boolean | 否 | true | 点击遮障层时，是否关闭弹窗。 | + | confirm | {
value: string \| [Resource](../../ui/ts-types.md#resource类型),
action: () => void
} | 否 | - | 确认按钮的文本内容和点击回调。
value：按钮文本内容。
action: 按钮选中时的回调。 | + | cancel | () => void | 否 | - | 点击遮障层关闭dialog时的回调。 | + | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 | + | offset | {
dx: Length,
dy: Length
} | 否 | {
dx: 0,
dy: 0
} | 弹窗相对alignment所在位置的偏移量。 | + | sheets | Array { + ActionSheet.show({ + title: 'ActionSheet title', + message: 'message', + confirm: { + value: 'Confirm button', + action: () => { + console.log('Get Alert Dialog handled') + } + }, + sheets: [ + { + title: 'apples', + action: () => { + console.error('apples') + } + }, + { + title: 'bananas', + action: () => { + console.error('bananas') + } + }, + { + title: 'pears', + action: () => { + console.error('pears') + } + } + ] + }) + }) + }.width('100%') + .height('100%') + } +} +``` + + +![zh-cn_image_0000001241668363](figures/zh-cn_image_0000001241668363.gif) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md index 661ab762001cd3cddadccb50d312ad00778348f3..8614350db5a9ebf9e4ea8b93b884476d0117a3e3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md @@ -1,280 +1,45 @@ -# 警告弹窗 +# 警告弹窗 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -显示警告弹窗组件，可设置文本内容与响应回调。 - -## 属性 - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

参数描述

-

show

-

options: { paramObject1| paramObject2}

-

-

-

定义并显示AlertDialog组件。

-
+显示警告弹窗组件，可设置文本内容与响应回调。 -- paramObject1参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

title

-

string | Resource

-

否

-

-

-

弹窗标题。

-

message

-

string | Resource

-

是

-

-

-

弹窗内容。

-

autoCancel

-

boolean

-

否

-

true

-

点击遮障层时，是否关闭弹窗。

-

confirm

-

{

-

value: string | Resource,

-

fontColor?: Color | number | string | Resource,

-

backgroundColor?: Color | number | string | Resource,

-

action: () => void

-

}

-

否

-

-

-

确认按钮的文本内容、文本色、按钮背景色和点击回调。

-

cancel

-

() => void

-

否

-

-

-

点击遮障层关闭dialog时的回调。

-

alignment

-

DialogAlignment

-

否

-

DialogAlignment.Default

-

弹窗在竖直方向上的对齐方式。

-

offset

-

{

-

dx: Length | Resource,

-

dy: Length | Resource

-

}

-

否

-

-

-

弹窗相对alignment所在位置的偏移量。

-

gridCount

-

number

-

否

-

-

-

弹窗容器宽度所占用栅格数。

-
+## 属性 +| 名称 | 参数类型 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | +| show | options: { paramObject1\| paramObject2} | - | 定义并显示AlertDialog组件。 | -- paramObject2参数 +- paramObject1参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | title | string \| [Resource](../../ui/ts-types.md#resource类型) | 否 | - | 弹窗标题。 | + | message | string \| [Resource](../../ui/ts-types.md#resource类型) | 是 | - | 弹窗内容。 | + | autoCancel | boolean | 否 | true | 点击遮障层时，是否关闭弹窗。 | + | confirm | {
value: string \| [Resource](../../ui/ts-types.md#resource类型),
fontColor?: Color \| number \| string \| [Resource](../../ui/ts-types.md#resource类型),
backgroundColor?: Color \| number \| string \| [Resource](../../ui/ts-types.md#resource类型),
action: () => void
} | 否 | - | 确认按钮的文本内容、文本色、按钮背景色和点击回调。 | + | cancel | () => void | 否 | - | 点击遮障层关闭dialog时的回调。 | + | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 | + | offset | {
dx: Length \| [Resource](../../ui/ts-types.md#resource类型),
dy: Length  \| [Resource](../../ui/ts-types.md#resource类型)
} | 否 | - | 弹窗相对alignment所在位置的偏移量。 | + | gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

title

-

string | Resource

-

否

-

-

-

弹窗标题。

-

message

-

string | Resource

-

是

-

-

-

弹窗内容。

-

autoCancel

-

boolean

-

否

-

true

-

点击遮障层时，是否关闭弹窗。

-

primaryButton

-

{

-

value: string | Resource,

-

fontColor?: Color | number | string | Resource,

-

backgroundColor?: Color | number | string | Resource,

-

action: () => void;

-

}

-

否

-

-

-

按钮的文本内容、文本色、按钮背景色和点击回调。

-

secondaryButton

-

-

{

-

value: string | Resource,

-

fontColor?: Color | number | string | Resource,

-

backgroundColor?: Color | number | string | Resource,

-

action: () => void;

-

}

-

否

-

-

-

按钮的文本内容、文本色、按钮背景色和点击回调。

-

cancel

-

() => void

-

否

-

-

-

点击遮障层关闭dialog时的回调。

-

alignment

-

DialogAlignment

-

否

-

DialogAlignment.Default

-

弹窗在竖直方向上的对齐方式。

-

offset

-

{

-

dx: Length | Resource,

-

dy: Length | Resource

-

}

-

否

-

-

-

弹窗相对alignment所在位置的偏移量。

-

gridCount

-

number

-

否

-

-

-

弹窗容器宽度所占用栅格数。

-
+- paramObject2参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | title | string \|& [Resource](../../ui/ts-types.md#resource类型) | 否 | - | 弹窗标题。 | + | message | string \|& [Resource](../../ui/ts-types.md#resource类型) | 是 | - | 弹窗内容。 | + | autoCancel | boolean | 否 | true | 点击遮障层时，是否关闭弹窗。 | + | primaryButton | {
value: string \| [Resource](../../ui/ts-types.md#resource类型),
fontColor?: Color \| number \| string \| [Resource](../../ui/ts-types.md#resource类型),
backgroundColor?: Color \| number \| string \| [Resource](../../ui/ts-types.md#resource类型),
action: () => void;
} | 否 | - | 按钮的文本内容、文本色、按钮背景色和点击回调。 | + | secondaryButton | {
value: string \| [Resource](../../ui/ts-types.md#resource类型),
fontColor?: Color \| number \| string \| [Resource](../../ui/ts-types.md#resource类型),
backgroundColor?: Color \| number \| string \| [Resource](../../ui/ts-types.md#resource类型),
action: () => void;
} | 否 | - | 按钮的文本内容、文本色、按钮背景色和点击回调。 | + | cancel | () => void | 否 | - | 点击遮障层关闭dialog时的回调。 | + | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 | + | offset | {
dx: Length \| [Resource](../../ui/ts-types.md#resource类型),
dy: Length  \| [Resource](../../ui/ts-types.md#resource类型)
} | 否 | - | 弹窗相对alignment所在位置的偏移量。 | + | gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 | -## 示例 +## 示例 ``` @Entry @@ -330,5 +95,4 @@ struct AlertDialogExample { } ``` -![](figures/AlertDialog.gif) - +![zh-cn_image_0000001174582844](figures/zh-cn_image_0000001174582844.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-actionsheet.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-actionsheet.md deleted file mode 100644 index 7ccc91d0fcca230e729615ff877cefe7a11745f1..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-actionsheet.md +++ /dev/null @@ -1,234 +0,0 @@ -# 列表选择弹窗 - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -列表弹窗。 - -## 权限列表 - -无 - -## ActionSheet.show - -show\(options: \{ [paramObject1](#table816913216616)\}\) - -定义列表弹窗并弹出。 - -- paramObject1参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

title

-

string

-

否

-

无标题

-

弹窗标题。

-

message

-

string

-

是

-

-

-

弹窗内容。

-

autoCancel

-

boolean

-

否

-

true

-

点击遮障层时，是否关闭弹窗。

-

confirm

-

{

-

value: string,

-

action: () => void

-

}

-

否

-

-

-

确认按钮的文本内容和点击回调。

-

value：按钮文本内容。

-

action: 按钮选中时的回调。

-

cancel

-

() => void

-

否

-

-

-

点击遮障层关闭dialog时的回调。

-

alignment

-

DialogAlignment

-

否

-

DialogAlignment.Default

-

弹窗在竖直方向上的对齐方式。

-

offset

-

{

-

dx: Length,

-

dy: Length

-

}

-

否

-

{

-

dx: 0,

-

dy: 0

-

}

-

弹窗相对alignment所在位置的偏移量。

-

sheets

-

Array<SheetInfo>

-

是

-

-

-

设置选项内容，每个选择项支持设置图片、文本和选中的回调。

-
- -- SheetInfo接口说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

title

-

string

-

是

-

-

-

sheet文本。

-

icon

-

string

-

否

-

无

-

sheet图标。

-

action

-

()=>void

-

是

-

-

-

sheet选中的回调。

-
- - -## 示例 - -``` -@Entry -@Component -struct ActionSheetExapmle { - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Button('Click to Show ActionSheet') - .onClick(() => { - ActionSheet.show({ - title: 'ActionSheet title', - message: 'message', - confirm: { - value: 'Confirm button', - action: () => { - console.log('Get Alert Dialog handled') - } - }, - sheets: [ - { - title: 'apples', - action: () => { - console.error('apples') - } - }, - { - title: 'bananas', - action: () => { - console.error('bananas') - } - }, - { - title: 'pears', - action: () => { - console.error('pears') - } - } - ] - }) - }) - }.width('100%') - .height('100%') - } -} -``` - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md index 2a3af18c66ad41478ef34082c799cc6a39bba643..0978b45c9e6211d7417c109d4c3b27865e3d3053 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md @@ -1,133 +1,43 @@ -# 自定义弹窗 +# 自定义弹窗 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 通过CustomDialogController类显示自定义弹窗。 -## 接口 - -CustomDialogController\(value:\{builder: CustomDialog, cancel?: \(\) =\> void, autoCancel?: boolean\}\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

builder

-

CustomDialog

-

是

-

-

-

自定义弹窗内容构造器。

-

cancel

-

() => void

-

否

-

-

-

点击遮障层退出时的回调。

-

autoCancel

-

boolean

-

否

-

true

-

是否允许点击遮障层退出。

-

alignment

-

DialogAlignment

-

否

-

DialogAlignment.Default

-

弹窗在竖直方向上的对齐方式。

-

offset

-

{

-

dx: Length | Resource,

-

dy: Length | Resource

-

}

-

否

-

-

-

弹窗相对alignment所在位置的偏移量。

-

customStyle

-

boolean

-

否

-

false

-

弹窗容器样式是否自定义。

-
- -- DialogAlignment枚举说明 - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Top

-

垂直顶部对齐。

-

Center

-

垂直居中对齐。

-

Bottom

-

垂直底部对齐。

-

Default

-

默认对齐。

-
- - -### CustomDialogController + +## 接口 + +CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean}) + + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | builder | [CustomDialog](../../ui/ts-component-based-customdialog.md) | 是 | - | 自定义弹窗内容构造器。 | + | cancel | () => void | 否 | - | 点击遮障层退出时的回调。 | + | autoCancel | boolean | 否 | true | 是否允许点击遮障层退出。 | + | alignment | DialogAlignment | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 | + | offset | {
dx: Length \| [Resource](../../ui/ts-types.md#resource类型),
dy: Length  \| [Resource](../../ui/ts-types.md#resource类型)
} | 否 | - | 弹窗相对alignment所在位置的偏移量。 | + | customStyle | boolean | 否 | false | 弹窗容器样式是否自定义。 | + +- DialogAlignment枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Top | 垂直顶部对齐。 | + | Center | 垂直居中对齐。 | + | Bottom | 垂直底部对齐。 | + | Default | 默认对齐。 | + | TopStart8+ | 左上对齐。 | + | TopEnd8+ | 右上对齐。 | + | CenterStart8+ | 左中对齐。 | + | CenterEnd8+ | 右中对齐。 | + | BottomStart8+ | 左下对齐。 | + | BottomEnd8+ | 右下对齐。 | + + +### CustomDialogController 创建对象 @@ -135,15 +45,19 @@ CustomDialogController\(value:\{builder: CustomDialog, cancel?: \(\) =\> void, a dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean}) ``` -open\(\) +open() + 显示自定义弹窗内容，若已显示，则不生效。 -close\(\) + +close() + 关闭显示的自定义弹窗，若已关闭，则不生效。 -## 示例 + +## 示例 ``` @CustomDialog @@ -203,5 +117,4 @@ struct CustomDialogUser { } ``` -![](figures/customdialog.gif) - +![zh-cn_image_0000001219744203](figures/zh-cn_image_0000001219744203.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-image-cache.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-image-cache.md index be0083ee3d604c515630fd72ffc610647fb5a779..9b3cd1df1a785d2578d65135ae4d81a3117462b9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-image-cache.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-image-cache.md @@ -1,158 +1,99 @@ -# 图片缓存 +# 图片缓存 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从 API Version 7 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从 API Version 7 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 导入模块 + +## 导入模块 ``` import app from '@system.app' ``` -## 权限 + +## 权限 无 -## app.setImageCacheCount -setImageCacheCount\(value: number\): void +## app.setImageCacheCount -设置内存中缓存解码后图片的数量上限，提升再次加载同源图片的加载速度。如果不设置则默认为0，不进行缓存。缓存采用内置的LRU策略，新图片加载后，如果超过缓存上限，会删除最久未再次加载的缓存。建议根据应用内存需求，设置合理缓存数量，数字过大可能导致内存使用过高。 +setImageCacheCount(value: number): void -- 参数 - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

value

-

number

-

是

-

内存中解码后图片的缓存数量。

-
- -- 示例 - - ``` - // app.ets - import app from '@system.app'; - export default { - onCreate() { - app.setImageCacheCount(100) // 设置解码后图片内存缓存上限为100张 - console.info('Application onCreate') - }, - onDestroy() { - console.info('Application onDestroy') - }, - } - ``` - - -## app.setImageRawDataCacheSize - -setImageRawDataCacheSize\(value: number\): void +设置内存中缓存解码后图片的数量上限，提升再次加载同源图片的加载速度。如果不设置则默认为0，不进行缓存。缓存采用内置的LRU策略，新图片加载后，如果超过缓存上限，会删除最久未再次加载的缓存。建议根据应用内存需求，设置合理缓存数量，数字过大可能导致内存使用过高。 +- 参数 + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | number | 是 | 内存中解码后图片的缓存数量。 | + +- 示例 + ``` + // app.ets + import app from '@system.app'; + + export default { + onCreate() { + app.setImageCacheCount(100) // 设置解码后图片内存缓存上限为100张 + console.info('Application onCreate') + }, + onDestroy() { + console.info('Application onDestroy') + }, + } + ``` + + +## app.setImageRawDataCacheSize + +setImageRawDataCacheSize(value: number): void 设置内存中缓存解码前图片数据的大小上限，单位为字节，提升再次加载同源图片的加载速度。如果不设置则默认为0，不进行缓存。缓存采用内置的LRU策略，新图片加载后，如果解码前数据超过缓存上限，会删除最久未再次加载的图片数据缓存。建议根据应用内存需求，设置合理缓存上限，过大可能导致应用内存使用过高。 -- 参数 - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

value

-

number

-

是

-

内存中解码前图片数据的缓存大小，单位为字节。

-
- -- 示例 - - ``` - // app.ets - import app from '@system.app'; - - export default { - onCreate() { - app.setImageRawDataCacheSize(104,857,600) // 设置解码前图片数据内存缓存上限为100MB - console.info('Application onCreate') - }, - onDestroy() { - console.info('Application onDestroy') - }, - } - ``` - - -## app.setImageFileCacheSize - -setImageFileCacheSize\(value: number\): void +- 参数 + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | number | 是 | 内存中解码前图片数据的缓存大小，单位为字节。 | + +- 示例 + ``` + // app.ets + import app from '@system.app'; + + export default { + onCreate() { + app.setImageRawDataCacheSize(104,857,600) // 设置解码前图片数据内存缓存上限为100MB + console.info('Application onCreate') + }, + onDestroy() { + console.info('Application onDestroy') + }, + } + ``` -设置图片文件缓存的大小上限，单位为字节，提升再次加载同源图片的加载速度，特别是对网络图源、缩略图会有较明显提升。如果不设置则默认为100MB。缓存采用内置的LRU策略，新图片加载后，如果超过文件缓存上限，会按照时间由远到近删除缓存图片文件直到缓存图片大小满足缓存上限。建议根据应用实际需求，设置合理文件缓存上限，数字过大可能导致磁盘空间占用过高。 -- 参数 - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

value

-

number

-

是

-

图片文件的缓存大小，单位为字节。

-
- -- 示例 - - ``` - // app.ets - import app from '@system.app'; - - export default { - onCreate() { - app.setImageFileCacheSize(209,715,200) // 设置图片文件数据缓存上限为200MB - console.info('Application onCreate') - }, - onDestroy() { - console.info('Application onDestroy') - }, - } - ``` +## app.setImageFileCacheSize +setImageFileCacheSize(value: number): void + +设置图片文件缓存的大小上限，单位为字节，提升再次加载同源图片的加载速度，特别是对网络图源、缩略图会有较明显提升。如果不设置则默认为100MB。缓存采用内置的LRU策略，新图片加载后，如果超过文件缓存上限，会按照时间由远到近删除缓存图片文件直到缓存图片大小满足缓存上限。建议根据应用实际需求，设置合理文件缓存上限，数字过大可能导致磁盘空间占用过高。 +- 参数 + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | number | 是 | 图片文件的缓存大小，单位为字节。 | + +- 示例 + ``` + // app.ets + import app from '@system.app'; + + export default { + onCreate() { + app.setImageFileCacheSize(209,715,200) // 设置图片文件数据缓存上限为200MB + console.info('Application onCreate') + }, + onDestroy() { + console.info('Application onDestroy') + }, + } + ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-media-query.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-media-query.md index ee4ff3ccbdd9195b78b643f064eed1cf062587fd..a841fba375872ce4efa70454182351f1eb630839 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-media-query.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-media-query.md @@ -1,255 +1,110 @@ -# 媒体查询 +# 媒体查询 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 导入模块 + +## 导入模块 ``` import mediaquery from '@ohos.mediaquery' ``` -## 权限 + +## 权限 无 -## mediaquery.matchMediaSync -matchMediaSync\(condition: string\): MediaQueryListener +## mediaquery.matchMediaSync + +matchMediaSync(condition: string): MediaQueryListener 设置媒体查询的查询条件，并返回对应的监听句柄。 -- 参数 - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

condition

-

string

-

是

-

媒体事件的匹配条件。条件字符串格式: 参考媒体查询。

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

MediaQueryListener

-

媒体事件监听句柄，用于注册和去注册监听回调。

-
- -- 示例 - - ``` - listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件 - ``` - - -## MediaQueryListener +- 参数 + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | condition | string | 是 | 媒体事件的匹配条件。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | MediaQueryListener | 媒体事件监听句柄，用于注册和去注册监听回调。 | + +- 示例 + ``` + listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件 + ``` + + +## MediaQueryListener 媒体查询的句柄，并包含了申请句柄时的首次查询结果。 -### 属性 - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

可读

-

可写

-

说明

-

matches

-

boolean

-

是

-

否

-

是否符合匹配条件。

-

media

-

string

-

是

-

否

-

媒体事件的匹配条件。

-
- -### on - -on\(type: 'change', callback: Callback\): void + +### 属性 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| matches | boolean | 是 | 否 | 是否符合匹配条件。 | +| media | string | 是 | 否 | 媒体事件的匹配条件。 | + + +### on + +on(type: 'change', callback: Callback<MediaQueryResult>): void 通过句柄向对应的查询条件注册回调，当媒体属性发生变更时会触发该回调。 -- 参数 - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

type

-

string

-

是

-

必须填写字符串'change'。

-

callback

-

Callback<MediaQueryResult>

-

是

-

向媒体查询注册的回调

-
- -- 示例 - - 详见[off示例](#li16426122219256)。 - - -### off - -off\(type: 'change', callback?: Callback\): void +- 参数 + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | type | string | 是 | 必须填写字符串'change'。 | + | callback | Callback<MediaQueryResult> | 是 | 向媒体查询注册的回调 | + +- 示例 + 详见[off示例](#off)。 + + +### off + +off(type: 'change', callback?: Callback<MediaQueryResult>): void 通过句柄向对应的查询条件去注册回调，当媒体属性发生变更时不在触发指定的回调。 +- 参数 + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | type | boolean | 是 | 必须填写字符串'change'。 | + | callback | Callback<MediaQueryResult> | 否 | 需要去注册的回调，如果参数缺省则去注册该句柄下所有的回调。 | + +- 示例 + ``` + listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件 + onPortrait(mediaQueryResult) { + if (mediaQueryResult.matches) { + // do something here + } else { + // do something here + } + } + listener.on('change', onPortrait) // 注册回调 + listener.off('change', onPortrait) // 去注册回调 + ``` -- 参数 - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

type

-

boolean

-

是

-

必须填写字符串'change'。

-

callback

-

Callback<MediaQueryResult>

-

否

-

需要去注册的回调，如果参数缺省则去注册该句柄下所有的回调。

-
- -- 示例 - - ``` - listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件 - onPortrait(mediaQueryResult) { - if (mediaQueryResult.matches) { - // do something here - } else { - // do something here - } - } - listener.on('change', onPortrait) // 注册回调 - listener.off('change', onPortrait) // 去注册回调 - ``` - - -## MediaQueryResult - -### 属性 - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

可读

-

可写

-

说明

-

matches

-

boolean

-

是

-

否

-

是否符合匹配条件。

-

media

-

string

-

是

-

否

-

媒体事件的匹配条件。

-
- -### 示例 + +## MediaQueryResult + + +### 属性 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| matches | boolean | 是 | 否 | 是否符合匹配条件。 | +| media | string | 是 | 否 | 媒体事件的匹配条件。 | + + +### 示例 ``` import mediaquery from '@ohos.mediaquery' @@ -287,5 +142,4 @@ struct MediaQueryExample { } ``` -![](figures/MediaQuery.gif) - +![zh-cn_image_0000001174422920](figures/zh-cn_image_0000001174422920.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-popup-window.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-popup-window.md new file mode 100644 index 0000000000000000000000000000000000000000..92ce0b452fd7815e85bbd8181f9335066f7825b8 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-popup-window.md @@ -0,0 +1,7 @@ +# 弹窗 + +- **[警告弹窗](ts-methods-alert-dialog-box.md)** + +- **[列表选择弹窗](ts-methods-action-sheet.md)** + +- **[自定义弹窗](ts-methods-custom-dialog-box.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md index 684c361a9e1c59371c1152cc90cedfd0418560b5..82a6b6a35aa076ddd43098bb09048e7405871ec0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md @@ -1,49 +1,20 @@ -# 路径动画 +# 路径动画 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 设置组件进行位移动画时的运动路径。 -## 属性 - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

motionPath

-

{

-

path: string,

-

from?: number,

-

to?: number,

-

rotatable?: boolean

-

}

-
说明：

path中支持通过start和end进行起点和终点的替代，如：

-

'Mstart.x start.y L50 50 Lend.x end.y Z'。

-
-

{

-

"",

-

0.0,

-

1.0,

-

false

-

}

-

设置组件的运动路径，入参说明如下：

-
  • path：位移动画的运动路径，使用svg路径字符串。
  • from：运动路径的起点，默认为0.0。
  • to：运动路径的终点，默认为1.0。
  • rotatable：是否跟随路径进行旋转。
-
+## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> path中支持通过start和end进行起点和终点的替代，如：
> 
> 'Mstart.x start.y L50 50 Lend.x end.y Z'。 | {
"",
0.0,
1.0,
false
} | 设置组件的运动路径，入参说明如下：
- path：位移动画的运动路径，使用svg路径字符串。
- from：运动路径的起点，默认为0.0。
- to：运动路径的终点，默认为1.0。
- rotatable：是否跟随路径进行旋转。 | -## 示例 + +## 示例 ``` @Entry @@ -67,5 +38,4 @@ struct MotionPathExample { } ``` -![](figures/motion.gif) - +![zh-cn_image_0000001174104400](figures/zh-cn_image_0000001174104400.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md index 5e7ef1059b8e62baf37c51cd5d402d3ba64ef6cd..43dddb82795587b63bef2151ea2b607037066a45 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md @@ -1,258 +1,52 @@ -# OffscreenCanvasRenderingConxt2D对象 +# OffscreenCanvasRenderingConxt2D对象 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制绘制到canvas上，加快了绘制速度。 -## 接口 - -OffscreenCanvasRenderingContext2D\(width: number, height: number, setting: RenderingContextSettings\) - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

width

-

number

-

是

-

-

-

离屏画布的宽度

-

height

-

number

-

是

-

-

-

离屏画布的高度

-

setting

-

RenderingContextSettings

-

是

-

-

-

见RenderingContextSettings接口描述。

-
- - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

fillStyle

-

<color> | CanvasGradient | CanvasPattern

-

-

-

指定绘制的填充色。

-
  • 类型为<color>时，表示设置填充区域的颜色。
  • 类型为CanvasGradient时，表示渐变对象，使用 createLinearGradient方法创建。
  • 类型为CanvasPattern时，使用createPattern方法创建。
-

lineWidth

-

number

-

-

-

设置绘制线条的宽度。

-

strokeStyle

-

<color> | CanvasGradient | CanvasPattern

-

-

-

设置描边的颜色。

-
  • 类型为<color>时，表示设置描边使用的颜色。
  • 类型为CanvasGradient时，表示渐变对象，使用createLinearGradient方法创建。
  • 类型为CanvasPattern时，使用createPattern方法创建。
-

lineCap

-

string

-

'butt'

-

指定线端点的样式，可选值为：

-
  • 'butt'：线端点以方形结束。
  • 'round'：线端点以圆形结束。
  • 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
-

lineJoin

-

string

-

'miter'

-

指定线段间相交的交点样式，可选值为：

-
  • 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
  • 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
  • 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
-

miterLimit

-

number

-

10

-

设置斜接面限制值，该值指定了线条相交处内角和外角的距离。

-

font

-

string

-

'normal normal 14px sans-serif'

-

设置文本绘制中的字体样式。

-

语法：ctx.font='font-size font-family'

-
  • font-size(可选)，指定字号和行高，单位只支持px。
  • font-family(可选)，指定字体系列。
-

语法：ctx.font='font-style font-weight font-size font-family'

-
  • font-style(可选)，用于指定字体样式，支持如下几种样式：'normal', 'italic'。
  • font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
  • font-size(可选)，指定字号和行高，单位只支持px。
  • font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。
-

textAlign

-

string

-

'left'

-

设置文本绘制中的文本对齐方式，可选值为：

-
  • 'left'：文本左对齐。
  • 'right'：文本右对齐。
  • 'center'：文本居中对齐。
  • 'start'：文本对齐界线开始的地方。
  • 'end'：文本对齐界线结束的地方。
-
说明：

ltr布局模式下start和left一致，rtl布局模式下start和right一致·。

-
-

textBaseline

-

string

-

'alphabetic'

-

设置文本绘制中的水平对齐方式，可选值为：

-
  • 'alphabetic'：文本基线是标准的字母基线。
  • 'top'：文本基线在文本块的顶部。
  • 'hanging'：文本基线是悬挂基线。
  • 'middle'：文本基线在文本块的中间。
  • 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
  • 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic 基线不需要考虑下行字母。
-

globalAlpha

-

number

-

-

-

设置透明度，0.0为完全透明，1.0为完全不透明。

-

lineDashOffset

-

number

-

0.0

-

设置画布的虚线偏移量，精度为float。

-

globalCompositeOperation

-

string

-

'source-over'

-

设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。

-

shadowBlur

-

number

-

0.0

-

设置绘制阴影时的模糊级别，值越大越模糊，精度为float。

-

shadowColor

-

<color>

-

-

-

设置绘制阴影时的阴影颜色。

-

shadowOffsetX

-

number

-

-

-

设置绘制阴影时和原有对象的水平偏移值。

-

shadowOffsetY

-

number

-

-

-

设置绘制阴影时和原有对象的垂直偏移值。

-

imageSmoothingEnabled

-

boolean

-

true

-

用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。

-

imageSmoothingQuality

-

string

-

'low'

-

用于设置图像平滑度，支持如下三种类型：'low', 'medium', 'high'。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明：** ->类型格式为 'rgb\(255, 255, 255\)'，'rgba\(255, 255, 255, 1.0\)'，'\#FFFFFF'。 - -### fillStyle + +## 接口 + +OffscreenCanvasRenderingContext2D(width: number, height: number, setting: RenderingContextSettings) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | width | number | 是 | - | 离屏画布的宽度 | + | height | number | 是 | - | 离屏画布的高度 | + | setting | [RenderingContextSettings](ts-canvasrenderingcontext2d#renderingcontextsettings) | 是 | - | 见RenderingContextSettings接口描述。 | + + +## 属性 + +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。
- 类型为<color>时，表示设置填充区域的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用 [createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | +| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 | +| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 设置描边的颜色。
- 类型为<color>时，表示设置描边使用的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | +| [lineCap](#linecap) | string | 'butt' | 指定线端点的样式，可选值为：
- 'butt'：线端点以方形结束。
- 'round'：线端点以圆形结束。
- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 | +| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：
- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 | +| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 | +| [font](#font) | string | 'normal normal 14px sans-serif' | 设置文本绘制中的字体样式。
语法：ctx.font='font-size font-family'
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列。
语法：ctx.font='font-style font-weight font-size font-family'
- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal', 'italic'。
- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。 | +| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：
- 'left'：文本左对齐。
- 'right'：文本右对齐。
- 'center'：文本居中对齐。
- 'start'：文本对齐界线开始的地方。
- 'end'：文本对齐界线结束的地方。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> ltr布局模式下start和left一致，rtl布局模式下start和right一致·。 | +| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：
- 'alphabetic'：文本基线是标准的字母基线。
- 'top'：文本基线在文本块的顶部。
- 'hanging'：文本基线是悬挂基线。
- 'middle'：文本基线在文本块的中间。
- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic 基线不需要考虑下行字母。 | +| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 | +| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 | +| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。 | +| [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 | +| [shadowColor](#shadowcolor) | <color> | - | 设置绘制阴影时的阴影颜色。 | +| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 | +| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 | +| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 | +| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low', 'medium', 'high'。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> <color>类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 + + +### fillStyle ``` @Entry @@ -281,9 +75,10 @@ struct FillStyleExample { } ``` -![](figures/zh-cn_image_0000001237555173.png) +![zh-cn_image_0000001193872516](figures/zh-cn_image_0000001193872516.png) -### lineWidth + +### lineWidth ``` @Entry @@ -312,9 +107,10 @@ struct LineWidthExample { } ``` -![](figures/zh-cn_image_0000001192755194.png) +![zh-cn_image_0000001238832403](figures/zh-cn_image_0000001238832403.png) + -### strokeStyle +### strokeStyle ``` @Entry @@ -344,9 +140,11 @@ struct StrokeStyleExample { } ``` -![](figures/zh-cn_image_0000001237355135.png) -### lineCap +![zh-cn_image_0000001238712437](figures/zh-cn_image_0000001238712437.png) + + +### lineCap ``` @Entry @@ -379,9 +177,10 @@ struct LineCapExample { } ``` -![](figures/zh-cn_image_0000001192595232.png) +![zh-cn_image_0000001194192454](figures/zh-cn_image_0000001194192454.png) + -### lineJoin +### lineJoin ``` @Entry @@ -415,9 +214,10 @@ struct LineJoinExample { } ``` -![](figures/zh-cn_image_0000001237715141.png) +![zh-cn_image_0000001194352450](figures/zh-cn_image_0000001194352450.png) + -### miterLimit +### miterLimit ``` @Entry @@ -451,9 +251,10 @@ struct MiterLimit { } ``` -![](figures/zh-cn_image_0000001193075178.png) +![zh-cn_image_0000001238952397](figures/zh-cn_image_0000001238952397.png) -### font + +### font ``` @Entry @@ -482,9 +283,10 @@ struct Font { } ``` -![](figures/zh-cn_image_0000001193075164.png) +![zh-cn_image_0000001194032476](figures/zh-cn_image_0000001194032476.png) + -### textAlign +### textAlign ``` @Entry @@ -528,9 +330,10 @@ struct CanvasExample { } ``` -![](figures/zh-cn_image_0000001192595234.png) +![zh-cn_image_0000001239032423](figures/zh-cn_image_0000001239032423.png) + -### textBaseline +### textBaseline ``` @Entry @@ -574,9 +377,10 @@ struct TextBaseline { } ``` -![](figures/zh-cn_image_0000001193075180.png) +![zh-cn_image_0000001193872518](figures/zh-cn_image_0000001193872518.png) -### globalAlpha + +### globalAlpha ``` @Entry @@ -608,9 +412,10 @@ struct GlobalAlpha { } ``` -![](figures/zh-cn_image_0000001237715165.png) +![zh-cn_image_0000001238832405](figures/zh-cn_image_0000001238832405.png) + -### lineDashOffset +### lineDashOffset ``` @Entry @@ -640,73 +445,24 @@ struct LineDashOffset { } ``` -![](figures/zh-cn_image_0000001237555181.png) - -### globalCompositeOperation - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

source-over

-

在现有绘制内容上显示新绘制内容，属于默认值。

-

source-atop

-

在现有绘制内容顶部显示新绘制内容。

-

source-in

-

在现有绘制内容中显示新绘制内容。

-

source-out

-

在现有绘制内容之外显示新绘制内容。

-

destination-over

-

在新绘制内容上方显示现有绘制内容。

-

destination-atop

-

在新绘制内容顶部显示现有绘制内容。

-

destination-in

-

在新绘制内容中显示现有绘制内容。

-

destination-out

-

在新绘制内容外显示现有绘制内容。

-

lighter

-

显示新绘制内容和现有绘制内容。

-

copy

-

显示新绘制内容而忽略现有绘制内容。

-

xor

-

使用异或操作对新绘制内容与现有绘制内容进行融合。

-
+![zh-cn_image_0000001238712439](figures/zh-cn_image_0000001238712439.png) + + +### globalCompositeOperation + +| 名称 | 描述 | +| -------- | -------- | +| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 | +| source-atop | 在现有绘制内容顶部显示新绘制内容。 | +| source-in | 在现有绘制内容中显示新绘制内容。 | +| source-out | 在现有绘制内容之外显示新绘制内容。 | +| destination-over | 在新绘制内容上方显示现有绘制内容。 | +| destination-atop | 在新绘制内容顶部显示现有绘制内容。 | +| destination-in | 在新绘制内容中显示现有绘制内容。 | +| destination-out | 在新绘制内容外显示现有绘制内容。 | +| lighter | 显示新绘制内容和现有绘制内容。 | +| copy | 显示新绘制内容而忽略现有绘制内容。 | +| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 | ``` @Entry @@ -743,9 +499,10 @@ struct GlobalCompositeOperation { } ``` -![](figures/zh-cn_image_0000001237355137.png) +![zh-cn_image_0000001194192456](figures/zh-cn_image_0000001194192456.png) + -### shadowBlur +### shadowBlur ``` @Entry @@ -776,9 +533,10 @@ struct ShadowBlur { } ``` -![](figures/zh-cn_image_0000001192755182.png) +![zh-cn_image_0000001194352452](figures/zh-cn_image_0000001194352452.png) -### shadowColor + +### shadowColor ``` @Entry @@ -810,9 +568,10 @@ struct ShadowColor { } ``` -![](figures/zh-cn_image_0000001237555155.png) +![zh-cn_image_0000001238952399](figures/zh-cn_image_0000001238952399.png) + -### shadowOffsetX +### shadowOffsetX ``` @Entry @@ -844,9 +603,10 @@ struct ShadowOffsetX { } ``` -![](figures/zh-cn_image_0000001193075168.png) +![zh-cn_image_0000001194032478](figures/zh-cn_image_0000001194032478.png) + -### shadowOffsetY +### shadowOffsetY ``` @Entry @@ -878,9 +638,10 @@ struct ShadowOffsetY { } ``` -![](figures/zh-cn_image_0000001237475139.png) +![zh-cn_image_0000001239032425](figures/zh-cn_image_0000001239032425.png) -### imageSmoothingEnabled + +### imageSmoothingEnabled ``` @Entry @@ -910,2961 +671,1441 @@ struct ImageSmoothingEnabled { } ``` -![](figures/zh-cn_image_0000001237355121.png) +![zh-cn_image_0000001193872520](figures/zh-cn_image_0000001193872520.png) + + +## 方法 -## 方法 -### fillRect +### fillRect -fillRect\(x: number, y: number, w: number, h: number\): void +fillRect(x: number, y: number, w: number, h: number): void 填充一个矩形。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

说明

-

x

-

number

-

是

-

0

-

指定矩形左上角点的x坐标。

-

y

-

number

-

是

-

0

-

指定矩形左上角点的y坐标。

-

width

-

number

-

是

-

0

-

指定矩形的宽度。

-

height

-

number

-

是

-

0

-

指定矩形的高度。

-
- -- 示例 - - ``` - @Entry - @Component - struct FillRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.fillRect(0,30,100,100) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') - } +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 指定矩形左上角点的x坐标。 | + | y | number | 是 | 0 | 指定矩形左上角点的y坐标。 | + | width | number | 是 | 0 | 指定矩形的宽度。 | + | height | number | 是 | 0 | 指定矩形的高度。 | + +- 示例 + ``` + @Entry + @Component + struct FillRect { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.fillRect(0,30,100,100) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237475123.png) + ![zh-cn_image_0000001238832407](figures/zh-cn_image_0000001238832407.png) -### strokeRect +### strokeRect -strokeRect\(x: number, y: number, w: number, h: number\): void +strokeRect(x: number, y: number, w: number, h: number): void 绘制具有边框的矩形，矩形内部不填充。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

说明

-

x

-

number

-

是

-

0

-

指定矩形的左上角x坐标。

-

y

-

number

-

是

-

0

-

指定矩形的左上角y坐标。

-

width

-

number

-

是

-

0

-

指定矩形的宽度。

-

height

-

number

-

是

-

0

-

指定矩形的高度。

-
- - -- 示例 - - ``` - @Entry - @Component - struct StrokeRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.strokeRect(30, 30, 200, 150) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 指定矩形的左上角x坐标。 | + | y | number | 是 | 0 | 指定矩形的左上角y坐标。 | + | width | number | 是 | 0 | 指定矩形的宽度。 | + | height | number | 是 | 0 | 指定矩形的高度。 | + +- 示例 + ``` + @Entry + @Component + struct StrokeRect { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.strokeRect(30, 30, 200, 150) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001192755180.png) + ![zh-cn_image_0000001238712441](figures/zh-cn_image_0000001238712441.png) -### clearRect +### clearRect -clearRect\(x: number, y: number, w: number, h: number\): void +clearRect(x: number, y: number, w: number, h: number): void 删除指定区域内的绘制内容。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

指定矩形上的左上角x坐标。

-

y

-

number

-

是

-

0

-

指定矩形上的左上角y坐标。

-

width

-

number

-

是

-

0

-

指定矩形的宽度。

-

height

-

number

-

是

-

0

-

指定矩形的高度。

-
- - -- 示例 - - ``` - @Entry - @Component - struct ClearRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.fillStyle = 'rgb(0,0,255)' - this.offContext.fillRect(0,0,500,500) - this.offContext.clearRect(20,20,150,100) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | + | y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | + | width | number | 是 | 0 | 指定矩形的宽度。 | + | height | number | 是 | 0 | 指定矩形的高度。 | + +- 示例 + ``` + @Entry + @Component + struct ClearRect { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.fillStyle = 'rgb(0,0,255)' + this.offContext.fillRect(0,0,500,500) + this.offContext.clearRect(20,20,150,100) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/11111-5.png) + ![zh-cn_image_0000001194192458](figures/zh-cn_image_0000001194192458.png) -### fillText +### fillText -fillText\(text: string, x: number, y: number\): void +fillText(text: string, x: number, y: number): void 绘制填充类文本。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

说明

-

text

-

string

-

是

-

“”

-

需要绘制的文本内容。

-

x

-

number

-

是

-

0

-

需要绘制的文本的左下角x坐标。

-

y

-

number

-

是

-

0

-

需要绘制的文本的左下角y坐标。

-
- - -- 示例 - - ``` - @Entry - @Component - struct FillText { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.font = '30px sans-serif' - this.offContext.fillText("Hello World!", 20, 100) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | text | string | 是 | “” | 需要绘制的文本内容。 | + | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | + | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | + +- 示例 + ``` + @Entry + @Component + struct FillText { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.font = '30px sans-serif' + this.offContext.fillText("Hello World!", 20, 100) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237555165.png) + ![zh-cn_image_0000001194352454](figures/zh-cn_image_0000001194352454.png) -### strokeText +### strokeText -strokeText\(text: string, x: number, y: number\): void +strokeText(text: string, x: number, y: number): void 绘制描边类文本。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

text

-

string

-

是

-

“”

-

需要绘制的文本内容。

-

x

-

number

-

是

-

0

-

需要绘制的文本的左下角x坐标。

-

y

-

number

-

是

-

0

-

需要绘制的文本的左下角y坐标。

-
- - -- 示例 - - ``` - @Entry - @Component - struct StrokeText { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.font = '55px sans-serif' - this.offContext.strokeText("Hello World!", 20, 60) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | text | string | 是 | “” | 需要绘制的文本内容。 | + | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | + | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | + +- 示例 + ``` + @Entry + @Component + struct StrokeText { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.font = '55px sans-serif' + this.offContext.strokeText("Hello World!", 20, 60) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237715149.png) + ![zh-cn_image_0000001238952401](figures/zh-cn_image_0000001238952401.png) -### measureText +### measureText -measureText\(text: string\): TextMetrics +measureText(text: string): TextMetrics 该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

说明

-

text

-

string

-

是

-

""

-

需要进行测量的文本。

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

TextMetrics

-

文本的尺寸信息

-
- -- TextMetrics类型描述 - - - - - - - - - - - -

属性

-

类型

-

描述

-

width

-

number

-

字符串的宽度。

-
- - -- 示例 - - ``` - @Entry - @Component - struct MeasureText { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.font = '50px sans-serif' - this.offContext.fillText("Hello World!", 20, 100) - this.offContext.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | text | string | 是 | "" | 需要进行测量的文本。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | TextMetrics | 文本的尺寸信息 | + +- TextMetrics类型描述 + | 属性 | 类型 | 描述 | + | -------- | -------- | -------- | + | width | number | 字符串的宽度。 | + +- 示例 + ``` + @Entry + @Component + struct MeasureText { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.font = '50px sans-serif' + this.offContext.fillText("Hello World!", 20, 100) + this.offContext.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193075172.png) + ![zh-cn_image_0000001194032480](figures/zh-cn_image_0000001194032480.png) -### stroke +### stroke -stroke\(path?: Path2D\): void +stroke(path?: Path2D): void 进行边框绘制操作。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

path

-

Path2D

-

否

-

null

-

需要绘制的Path2D。

-
- - -- 示例 - - ``` - @Entry - @Component - struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.moveTo(25, 25) - this.offContext.lineTo(25, 105) - this.offContext.strokeStyle = 'rgb(0,0,255)' - this.offContext.stroke() - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | + +- 示例 + ``` + @Entry + @Component + struct Stroke { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.moveTo(25, 25) + this.offContext.lineTo(25, 105) + this.offContext.strokeStyle = 'rgb(0,0,255)' + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001192595220.png) + ![zh-cn_image_0000001239032427](figures/zh-cn_image_0000001239032427.png) -### beginPath +### beginPath -beginPath\(\): void +beginPath(): void 创建一个新的绘制路径。 -- 示例 - - ``` - @Entry - @Component - struct BeginPath { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.beginPath() - this.offContext.lineWidth = 6 - this.offContext.strokeStyle = '#0000ff' - this.offContext.moveTo(15, 80) - this.offContext.lineTo(280, 160) - this.offContext.stroke() - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 示例 + ``` + @Entry + @Component + struct BeginPath { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath() + this.offContext.lineWidth = 6 + this.offContext.strokeStyle = '#0000ff' + this.offContext.moveTo(15, 80) + this.offContext.lineTo(280, 160) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237555163.png) + ![zh-cn_image_0000001193872522](figures/zh-cn_image_0000001193872522.png) -### moveTo +### moveTo -moveTo\(x: number, y: number\): void +moveTo(x: number, y: number): void 路径从当前点移动到指定点。 -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

说明

-

x

-

number

-

是

-

0

-

指定位置的x坐标。

-

y

-

number

-

是

-

0

-

指定位置的y坐标。

-
- - -- 示例 - - ``` - @Entry - @Component - struct MoveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.beginPath() - this.offContext.moveTo(10, 10) - this.offContext.lineTo(280, 160) - this.offContext.stroke() - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 指定位置的x坐标。 | + | y | number | 是 | 0 | 指定位置的y坐标。 | + +- 示例 + ``` + @Entry + @Component + struct MoveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath() + this.offContext.moveTo(10, 10) + this.offContext.lineTo(280, 160) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001192595228.png) + ![zh-cn_image_0000001238832409](figures/zh-cn_image_0000001238832409.png) -### lineTo +### lineTo -lineTo\(x: number, y: number\): void +lineTo(x: number, y: number): void 从当前点到指定点进行路径连接。 -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

指定位置的x坐标。

-

y

-

number

-

是

-

0

-

指定位置的y坐标。

-
- - -- 示例 - - ``` - @Entry - @Component - struct LineTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.beginPath() - this.offContext.moveTo(10, 10) - this.offContext.lineTo(280, 160) - this.offContext.stroke() - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 指定位置的x坐标。 | + | y | number | 是 | 0 | 指定位置的y坐标。 | + +- 示例 + ``` + @Entry + @Component + struct LineTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath() + this.offContext.moveTo(10, 10) + this.offContext.lineTo(280, 160) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237715151.png) + ![zh-cn_image_0000001238712443](figures/zh-cn_image_0000001238712443.png) -### closePath +### closePath -closePath\(\): void +closePath(): void 结束当前路径形成一个封闭路径。 -- 示例 - - ``` - @Entry - @Component - struct ClosePath { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.beginPath() - this.offContext.moveTo(30, 30) - this.offContext.lineTo(110, 30) - this.offContext.lineTo(70, 90) - this.offContext.closePath() - this.offContext.stroke() - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 示例 + ``` + @Entry + @Component + struct ClosePath { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath() + this.offContext.moveTo(30, 30) + this.offContext.lineTo(110, 30) + this.offContext.lineTo(70, 90) + this.offContext.closePath() + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001192595224.png) + ![zh-cn_image_0000001194192460](figures/zh-cn_image_0000001194192460.png) -### createPattern +### createPattern -createPattern\(image: ImageBitmap, repetition: string\): CanvasPattern +createPattern(image: ImageBitmap, repetition: string): CanvasPattern 通过指定图像和重复方式创建图片填充的模板。 -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

image

-

ImageBitmap

-

是

-

null

-

图源对象，具体参考 ImageBitmap对象。

-

repetition

-

string

-

是

-

“”

-

设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。

-
- -- 示例 - - ``` - @Entry - @Component - struct CreatePattern { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - var pattern = this.offContext.createPattern(this.img, 'repeat') - this.offContext.fillStyle = pattern - this.offContext.fillRect(0, 0, 200, 200) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 | + | repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 | + +- 示例 + ``` + @Entry + @Component + struct CreatePattern { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var pattern = this.offContext.createPattern(this.img, 'repeat') + this.offContext.fillStyle = pattern + this.offContext.fillRect(0, 0, 200, 200) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237475133.png) + ![zh-cn_image_0000001194352456](figures/zh-cn_image_0000001194352456.png) -### bezierCurveTo +### bezierCurveTo -bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void +bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 创建三次贝赛尔曲线的路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

cp1x

-

number

-

是

-

0

-

第一个贝塞尔参数的x坐标值。

-

cp1y

-

number

-

是

-

0

-

第一个贝塞尔参数的y坐标值。

-

cp2x

-

number

-

是

-

0

-

第二个贝塞尔参数的x坐标值。

-

cp2y

-

number

-

是

-

0

-

第二个贝塞尔参数的y坐标值。

-

x

-

number

-

是

-

0

-

路径结束时的x坐标值。

-

y

-

number

-

是

-

0

-

路径结束时的y坐标值。

-
- - -- 示例 - - ``` - @Entry - @Component - struct BezierCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.beginPath() - this.offContext.moveTo(10, 10) - this.offContext.bezierCurveTo(20, 100, 200, 100, 200, 20) - this.offContext.stroke() - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | + | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | + | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | + | cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 | + | x | number | 是 | 0 | 路径结束时的x坐标值。 | + | y | number | 是 | 0 | 路径结束时的y坐标值。 | + +- 示例 + ``` + @Entry + @Component + struct BezierCurveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath() + this.offContext.moveTo(10, 10) + this.offContext.bezierCurveTo(20, 100, 200, 100, 200, 20) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237715153.png) + ![zh-cn_image_0000001238952403](figures/zh-cn_image_0000001238952403.png) -### quadraticCurveTo +### quadraticCurveTo -quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void +quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 创建二次贝赛尔曲线的路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

cpx

-

number

-

是

-

0

-

贝塞尔参数的x坐标值。

-

cpy

-

number

-

是

-

0

-

贝塞尔参数的y坐标值。

-

x

-

number

-

是

-

0

-

路径结束时的x坐标值。

-

y

-

number

-

是

-

0

-

路径结束时的y坐标值。

-
- - -- 示例 - - ``` - @Entry - @Component - struct QuadraticCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.beginPath(); - this.offContext.moveTo(20, 20); - this.offContext.quadraticCurveTo(100, 100, 200, 20); - this.offContext.stroke(); - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | + | cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 | + | x | number | 是 | 0 | 路径结束时的x坐标值。 | + | y | number | 是 | 0 | 路径结束时的y坐标值。 | + +- 示例 + ``` + @Entry + @Component + struct QuadraticCurveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath(); + this.offContext.moveTo(20, 20); + this.offContext.quadraticCurveTo(100, 100, 200, 20); + this.offContext.stroke(); + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001192915184.png) + ![zh-cn_image_0000001194032482](figures/zh-cn_image_0000001194032482.png) -### arc +### arc -arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean\): void +arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void 绘制弧线路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

弧线圆心的x坐标值。

-

y

-

number

-

是

-

0

-

弧线圆心的y坐标值。

-

radius

-

number

-

是

-

0

-

弧线的圆半径。

-

startAngle

-

number

-

是

-

0

-

弧线的起始弧度。

-

endAngle

-

number

-

是

-

0

-

弧线的终止弧度。

-

anticlockwise

-

boolean

-

否

-

false

-

是否逆时针绘制圆弧。

-
- -- 示例 - - ``` - @Entry - @Component - struct Arc { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.beginPath() - this.offContext.arc(100, 75, 50, 0, 6.28) - this.offContext.stroke() - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 弧线圆心的x坐标值。 | + | y | number | 是 | 0 | 弧线圆心的y坐标值。 | + | radius | number | 是 | 0 | 弧线的圆半径。 | + | startAngle | number | 是 | 0 | 弧线的起始弧度。 | + | endAngle | number | 是 | 0 | 弧线的终止弧度。 | + | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | + +- 示例 + ``` + @Entry + @Component + struct Arc { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath() + this.offContext.arc(100, 75, 50, 0, 6.28) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001192595226.png) + ![zh-cn_image_0000001239032429](figures/zh-cn_image_0000001239032429.png) -### arcTo +### arcTo -arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void +arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 依据圆弧经过的点和圆弧半径创建圆弧路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x1

-

number

-

是

-

0

-

圆弧经过的第一个点的x坐标值。

-

y1

-

number

-

是

-

0

-

圆弧经过的第一个点的y坐标值。

-

x2

-

number

-

是

-

0

-

圆弧经过的第二个点的x坐标值。

-

y2

-

number

-

是

-

0

-

圆弧经过的第二个点的y坐标值。

-

radius

-

number

-

是

-

0

-

圆弧的圆半径值。

-
- - -- 示例 - - ``` - @Entry - @Component - struct ArcTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.moveTo(100, 20); - this.offContext.arcTo(150, 20, 150, 70, 50); - this.offContext.stroke(); - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | + | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | + | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | + | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | + | radius | number | 是 | 0 | 圆弧的圆半径值。 | + +- 示例 + ``` + @Entry + @Component + struct ArcTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.moveTo(100, 20); + this.offContext.arcTo(150, 20, 150, 70, 50); + this.offContext.stroke(); + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237555167.png) + ![zh-cn_image_0000001193872524](figures/zh-cn_image_0000001193872524.png) -### ellipse +### ellipse -ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean\): void +ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void 在规定的矩形区域绘制一个椭圆。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

说明

-

x

-

number

-

是

-

0

-

椭圆圆心的x轴坐标。

-

y

-

number

-

是

-

0

-

椭圆圆心的y轴坐标。

-

radiusX

-

number

-

是

-

0

-

椭圆x轴的半径长度。

-

radiusY

-

number

-

是

-

0

-

椭圆y轴的半径长度。

-

rotation

-

number

-

是

-

0

-

椭圆的旋转角度，单位为弧度。

-

startAngle

-

number

-

是

-

0

-

椭圆绘制的起始点角度，以弧度表示。

-

endAngle

-

number

-

是

-

0

-

椭圆绘制的结束点角度，以弧度表示。

-

anticlockwise

-

boolean

-

否

-

false

-

是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)

-
- - -- 示例 - - ``` - @Entry - @Component - struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.beginPath() - this.offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true) - this.offContext.stroke() - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | + | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | + | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | + | radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 | + | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | + | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | + | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | + | anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | + +- 示例 + + ``` + @Entry + @Component + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath() + this.offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237355131.png) + ![zh-cn_image_0000001238832411](figures/zh-cn_image_0000001238832411.png) -### rect +### rect -rect\(x: number, y: number, width: number, height: number\): void +rect(x: number, y: number, width: number, height: number): void 创建矩形路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

指定矩形的左上角x坐标值。

-

y

-

number

-

是

-

0

-

指定矩形的左上角y坐标值。

-

width

-

number

-

是

-

0

-

指定矩形的宽度。

-

height

-

number

-

是

-

0

-

指定矩形的高度。

-
- - -- 示例 - - ``` - @Entry - @Component - struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) - this.offContext.stroke() - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | + | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | + | width | number | 是 | 0 | 指定矩形的宽度。 | + | height | number | 是 | 0 | 指定矩形的高度。 | + +- 示例 + ``` + @Entry + @Component + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237715155.png) + ![zh-cn_image_0000001238712445](figures/zh-cn_image_0000001238712445.png) -### fill +### fill -fill\(\): void +fill(): void 对封闭路径进行填充。 -- 示例 - - ``` - @Entry - @Component - struct Fill { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) - this.offContext.fill() - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 示例 + ``` + @Entry + @Component + struct Fill { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) + this.offContext.fill() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193075166.png) + ![zh-cn_image_0000001194192462](figures/zh-cn_image_0000001194192462.png) -### clip +### clip -clip\(\): void +clip(): void 设置当前路径为剪切路径。 -- 示例 - - ``` - @Entry - @Component - struct Clip { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.rect(0, 0, 200, 200) - this.offContext.stroke() - this.offContext.clip() - this.offContext.fillStyle = "rgb(255,0,0)" - this.offContext.fillRect(0, 0, 150, 150) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 示例 + ``` + @Entry + @Component + struct Clip { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.rect(0, 0, 200, 200) + this.offContext.stroke() + this.offContext.clip() + this.offContext.fillStyle = "rgb(255,0,0)" + this.offContext.fillRect(0, 0, 150, 150) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001192595238.png) + ![zh-cn_image_0000001194352458](figures/zh-cn_image_0000001194352458.png) -### rotate +### rotate -rotate\(rotate: number\): void +rotate(rotate: number): void 针对当前坐标轴进行顺时针旋转。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

rotate

-

number

-

是

-

0

-

设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。

-
- - -- 示例 - - ``` - @Entry - @Component - struct Rotate { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees - this.offContext.fillRect(70, 20, 50, 50) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | + +- 示例 + ``` + @Entry + @Component + struct Rotate { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees + this.offContext.fillRect(70, 20, 50, 50) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237355133.png) + ![zh-cn_image_0000001238952405](figures/zh-cn_image_0000001238952405.png) -### scale +### scale -scale\(x: number, y: number\): void +scale(x: number, y: number): void 设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

设置水平方向的缩放值。

-

y

-

number

-

是

-

0

-

设置垂直方向的缩放值。

-
- - -- 示例 - - ``` - @Entry - @Component - struct Scale { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.strokeRect(10, 10, 25, 25) - this.offContext.scale(2, 2) // Scale to 200% - this.offContext.strokeRect(10, 10, 25, 25) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 设置水平方向的缩放值。 | + | y | number | 是 | 0 | 设置垂直方向的缩放值。 | + +- 示例 + ``` + @Entry + @Component + struct Scale { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.strokeRect(10, 10, 25, 25) + this.offContext.scale(2, 2) // Scale to 200% + this.offContext.strokeRect(10, 10, 25, 25) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001192755178.png) + ![zh-cn_image_0000001194032484](figures/zh-cn_image_0000001194032484.png) -### transform +### transform -transform\(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number\): void +transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： ->- x' = scaleX \* x + skewY \* y + translateX ->- y' = skewX \* x + scaleY \* y + translateY - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

scaleX

-

number

-

是

-

0

-

指定水平缩放值。

-

skewX

-

number

-

是

-

0

-

指定水平倾斜值。

-

skewY

-

number

-

是

-

0

-

指定垂直倾斜值。

-

scaleY

-

number

-

是

-

0

-

指定垂直缩放值。

-

translateX

-

number

-

是

-

0

-

指定水平移动值。

-

translateY

-

number

-

是

-

0

-

指定垂直移动值。

-
- -- 示例 - - ``` - @Entry - @Component - struct Transform { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.fillStyle = 'rgb(0,0,0)' - this.offContext.fillRect(0, 0, 100, 100) - this.offContext.transform(1, 0.5, -0.5, 1, 10, 10) - this.offContext.fillStyle = 'rgb(255,0,0)' - this.offContext.fillRect(0, 0, 100, 100) - this.offContext.transform(1, 0.5, -0.5, 1, 10, 10) - this.offContext.fillStyle = 'rgb(0,0,255)' - this.offContext.fillRect(0, 0, 100, 100) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： +> +> - x' = scaleX \* x + skewY \* y + translateX +> +> - y' = skewX \* x + scaleY \* y + translateY + +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | scaleX | number | 是 | 0 | 指定水平缩放值。 | + | skewX | number | 是 | 0 | 指定水平倾斜值。 | + | skewY | number | 是 | 0 | 指定垂直倾斜值。 | + | scaleY | number | 是 | 0 | 指定垂直缩放值。 | + | translateX | number | 是 | 0 | 指定水平移动值。 | + | translateY | number | 是 | 0 | 指定垂直移动值。 | + +- 示例 + ``` + @Entry + @Component + struct Transform { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.fillStyle = 'rgb(0,0,0)' + this.offContext.fillRect(0, 0, 100, 100) + this.offContext.transform(1, 0.5, -0.5, 1, 10, 10) + this.offContext.fillStyle = 'rgb(255,0,0)' + this.offContext.fillRect(0, 0, 100, 100) + this.offContext.transform(1, 0.5, -0.5, 1, 10, 10) + this.offContext.fillStyle = 'rgb(0,0,255)' + this.offContext.fillRect(0, 0, 100, 100) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` - - ![](figures/zh-cn_image_0000001192595230.png) - - -### setTransform - -setTransform\(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number\): void - -setTransfrom方法使用的参数和transform\(\)方法相同，但setTransform\(\)方法会重置现有的变换矩阵并创建新的变换矩阵。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

scaleX

-

number

-

是

-

0

-

指定水平缩放值。

-

skewX

-

number

-

是

-

0

-

指定水平倾斜值。

-

skewY

-

number

-

是

-

0

-

指定垂直倾斜值。

-

scaleY

-

number

-

是

-

0

-

指定垂直缩放值。

-

translateX

-

number

-

是

-

0

-

指定水平移动值。

-

translateY

-

number

-

是

-

0

-

指定垂直移动值。

-
- -- 示例 - - ``` - @Entry - @Component - struct SetTransform { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.fillStyle = 'rgb(255,0,0)' - this.offContext.fillRect(0, 0, 100, 100) - this.offContext.setTransform(1,0.5, -0.5, 1, 10, 10) - this.offContext.fillStyle = 'rgb(0,0,255)' - this.offContext.fillRect(0, 0, 100, 100) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') + } + ``` + + ![zh-cn_image_0000001239032431](figures/zh-cn_image_0000001239032431.png) + + +### setTransform + +setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void + +setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 + +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | scaleX | number | 是 | 0 | 指定水平缩放值。 | + | skewX | number | 是 | 0 | 指定水平倾斜值。 | + | skewY | number | 是 | 0 | 指定垂直倾斜值。 | + | scaleY | number | 是 | 0 | 指定垂直缩放值。 | + | translateX | number | 是 | 0 | 指定水平移动值。 | + | translateY | number | 是 | 0 | 指定垂直移动值。 | + +- 示例 + ``` + @Entry + @Component + struct SetTransform { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.fillStyle = 'rgb(255,0,0)' + this.offContext.fillRect(0, 0, 100, 100) + this.offContext.setTransform(1,0.5, -0.5, 1, 10, 10) + this.offContext.fillStyle = 'rgb(0,0,255)' + this.offContext.fillRect(0, 0, 100, 100) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237715159.png) + ![zh-cn_image_0000001193872526](figures/zh-cn_image_0000001193872526.png) -### translate +### translate -translate\(x: number, y: number\): void +translate(x: number, y: number): void 移动当前坐标系的原点。 -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x

-

number

-

是

-

0

-

设置水平平移量。

-

y

-

number

-

是

-

0

-

设置竖直平移量。

-
- -- 示例 - - ``` - @Entry - @Component - struct Translate { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.fillRect(10, 10, 50, 50) - this.offContext.translate(70, 70) - this.offContext.fillRect(10, 10, 50, 50) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | number | 是 | 0 | 设置水平平移量。 | + | y | number | 是 | 0 | 设置竖直平移量。 | + +- 示例 + ``` + @Entry + @Component + struct Translate { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.fillRect(10, 10, 50, 50) + this.offContext.translate(70, 70) + this.offContext.fillRect(10, 10, 50, 50) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![zh-cn_image_0000001238832413](figures/zh-cn_image_0000001238832413.png) + + +### drawImage + +drawImage(image: ImageBitmap, dx: number, dy: number): void + +drawImage(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number): void + +drawImage(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void + +进行图像绘制。 + +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图片资源，请参考ImageBitmap。 | + | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 | + | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | + | sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | + | sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | + | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | + | dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | + | dWidth | number | 否 | 0 | 绘制区域的宽度。 | + | dHeight | number | 否 | 0 | 绘制区域的高度。 | + + +- 示例 + ``` + @Entry + @Component + struct Index { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) .width('100%') .height('100%') + .backgroundColor('#ffff00') + .onReady(() => { + this.offContext.drawImage( this.img,0,0,400,200) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001237475137.png) + ![zh-cn_image_0000001238712447](figures/zh-cn_image_0000001238712447.png) -### drawImage +### createImageData -drawImage\(image: ImageBitmap, dx: number, dy: number\): void +createImageData(width: number, height: number): Object -drawImage\(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number\): void +根据宽高创建ImageData对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 -drawImage\(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number\):void +- 参数 + | 参数 | 类型 | 必填 | 默认 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | width | number | 是 | 0 | ImageData的宽度。 | + | height | number | 是 | 0 | ImageData的高度。 | -进行图像绘制。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

image

-

ImageBitmap

-

是

-

null

-

图片资源，请参考ImageBitmap。

-

sx

-

number

-

否

-

0

-

裁切源图像时距离源图像左上角的x坐标值。

-

sy

-

number

-

否

-

0

-

裁切源图像时距离源图像左上角的y坐标值。

-

sWidth

-

number

-

否

-

0

-

裁切源图像时需要裁切的宽度。

-

sHeight

-

number

-

否

-

0

-

裁切源图像时需要裁切的高度。

-

dx

-

number

-

是

-

0

-

绘制区域左上角在x轴的位置。

-

dy

-

number

-

是

-

0

-

绘制区域左上角在y 轴的位置。

-

dWidth

-

number

-

否

-

0

-

绘制区域的宽度。

-

dHeight

-

number

-

否

-

0

-

绘制区域的高度。

-
- - -- 示例 - - ``` - @Entry - @Component - struct Index { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) +### createImageData + +createImageData(imageData: ImageData): Object + +根据已创建的ImageData对象创建新的ImageData对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 + +- 参数 + | 参数 | 类型 | 必填 | 默认 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 被复制的ImageData对象。 | + + +### getImageData + +getImageData(sx: number, sy: number, sw: number, sh: number): Object + +以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。 + +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | + | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | + | sw | number | 是 | 0 | 需要输出的区域的宽度。 | + | sh | number | 是 | 0 | 需要输出的区域的高度。 | + + +### putImageData + +putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void + +使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。 + +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | imagedata | Object | 是 | null | 包含像素值的ImageData对象。 | + | dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 | + | dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 | + | dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | + | dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | + | dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | + | dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | + +- 示例 + ``` + @Entry + @Component + struct PutImageData { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#ffff00') - .onReady(() => { - this.offContext.drawImage( this.img,0,0,400,200) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) + .onReady(() =>{ + var imageData = this.offContext.createImageData(100, 100) + for (var i = 0; i < imageData.data.length; i += 4) { + imageData.data[i + 0] = 255 + imageData.data[i + 1] = 0 + imageData.data[i + 2] = 255 + imageData.data[i + 3] = 255 + } + this.offContext.putImageData(imageData, 10, 10) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) }) - } - .width('100%') - .height('100%') - } - } - ``` - - ![](figures/zh-cn_image_0000001192915180.png) - - -### createImageData - -createImageData\(width: number, height: number\): Object - -根据宽高创建ImageData对象，请参考[ImageData](ts-components-canvas-imagedata.md)。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认

-

描述

-

width

-

number

-

是

-

0

-

ImageData的宽度。

-

height

-

number

-

是

-

0

-

ImageData的高度。

-
- - -### createImageData - -createImageData\(imageData: ImageData\): Object - -根据已创建的ImageData对象创建新的ImageData对象，请参考[ImageData](ts-components-canvas-imagedata.md)。 - -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认

-

描述

-

imagedata

-

ImageData

-

是

-

null

-

被复制的ImageData对象。

-
- - -### getImageData - -getImageData\(sx: number, sy: number, sw: number, sh: number\): Object - -以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagedata.md)对象。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

sx

-

number

-

是

-

0

-

需要输出的区域的左上角x坐标。

-

sy

-

number

-

是

-

0

-

需要输出的区域的左上角y坐标。

-

sw

-

number

-

是

-

0

-

需要输出的区域的宽度。

-

sh

-

number

-

是

-

0

-

需要输出的区域的高度。

-
- - -### putImageData - -putImageData\(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number\): void - -使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

imagedata

-

Object

-

是

-

null

-

包含像素值的ImageData对象。

-

dx

-

number

-

是

-

0

-

填充区域在x轴方向的偏移量。

-

dy

-

number

-

是

-

0

-

填充区域在y轴方向的偏移量。

-

dirtyX

-

number

-

否

-

0

-

源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。

-

dirtyY

-

number

-

否

-

0

-

源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。

-

dirtyWidth

-

number

-

否

-

imagedata的宽度

-

源图像数据矩形裁切范围的宽度。

-

dirtyHeight

-

number

-

否

-

imagedata的高度

-

源图像数据矩形裁切范围的高度。

-
- -- 示例 - - ``` - @Entry - @Component - struct PutImageData { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - var imageData = this.offContext.createImageData(100, 100) - for (var i = 0; i < imageData.data.length; i += 4) { - imageData.data[i + 0] = 255 - imageData.data[i + 1] = 0 - imageData.data[i + 2] = 255 - imageData.data[i + 3] = 255 - } - this.offContext.putImageData(imageData, 10, 10) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001193075170.png) + ![zh-cn_image_0000001194192464](figures/zh-cn_image_0000001194192464.png) -### restore +### restore -restore\(\): void +restore(): void 对保存的绘图上下文进行恢复。 -- 示例 - - ``` - @Entry - @Component - struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.restore() - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 示例 + ``` + @Entry + @Component + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.restore() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` -### save +### save -save\(\): void +save(): void 对当前的绘图上下文进行保存。 -- 示例 - - ``` - @Entry - @Component - struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.offContext.save() - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 示例 + ``` + @Entry + @Component + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.save() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` -### createLinearGradient +### createLinearGradient -createLinearGradient\(x0: number, y0: number, x1: number, y1: number\): void +createLinearGradient(x0: number, y0: number, x1: number, y1: number): void 创建一个线性渐变色。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x0

-

number

-

是

-

0

-

起点的x轴坐标。

-

y0

-

number

-

是

-

0

-

起点的y轴坐标。

-

x1

-

number

-

是

-

0

-

终点的x轴坐标。

-

y1

-

number

-

是

-

0

-

终点的y轴坐标。

-
- -- 示例 - - ``` - @Entry - @Component - struct CreateLinearGradient { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - var grad = this.offContext.createLinearGradient(50,0, 300,100) - grad.addColorStop(0.0, 'red') - grad.addColorStop(0.5, 'white') - grad.addColorStop(1.0, 'green') - this.offContext.fillStyle = grad - this.offContext.fillRect(0, 0, 500, 500) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x0 | number | 是 | 0 | 起点的x轴坐标。 | + | y0 | number | 是 | 0 | 起点的y轴坐标。 | + | x1 | number | 是 | 0 | 终点的x轴坐标。 | + | y1 | number | 是 | 0 | 终点的y轴坐标。 | + +- 示例 + ``` + @Entry + @Component + struct CreateLinearGradient { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var grad = this.offContext.createLinearGradient(50,0, 300,100) + this.grad.addColorStop(0.0, 'red') + this.grad.addColorStop(0.5, 'white') + this.grad.addColorStop(1.0, 'green') + this.offContext.fillStyle = grad + this.offContext.fillRect(0, 0, 500, 500) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` + } + ``` - ![](figures/zh-cn_image_0000001192915162.png) + ![zh-cn_image_0000001194352460](figures/zh-cn_image_0000001194352460.png) -### createRadialGradient +### createRadialGradient -createRadialGradient\(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number\): void +createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): void 创建一个径向渐变色。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

默认值

-

描述

-

x0

-

number

-

是

-

0

-

起始圆的x轴坐标。

-

y0

-

number

-

是

-

0

-

起始圆的y轴坐标。

-

r0

-

number

-

是

-

0

-

起始圆的半径。必须是非负且有限的。

-

x1

-

number

-

是

-

0

-

终点圆的x轴坐标。

-

y1

-

number

-

是

-

0

-

终点圆的y轴坐标。

-

r1

-

number

-

是

-

0

-

终点圆的半径。必须为非负且有限的。

-
- -- 示例 - - ``` - @Entry - @Component - struct CreateRadialGradient { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200) - grad.addColorStop(0.0, 'red') - grad.addColorStop(0.5, 'white') - grad.addColorStop(1.0, 'green') - this.offContext.fillStyle = grad - this.offContext.fillRect(0, 0, 500, 500) - var image = this.offContext.transferToImageBitmap() - this.context.transferFromImageBitmap(image) - }) - } - .width('100%') - .height('100%') +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x0 | number | 是 | 0 | 起始圆的x轴坐标。 | + | y0 | number | 是 | 0 | 起始圆的y轴坐标。 | + | r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 | + | x1 | number | 是 | 0 | 终点圆的x轴坐标。 | + | y1 | number | 是 | 0 | 终点圆的y轴坐标。 | + | r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 | + +- 示例 + ``` + @Entry + @Component + struct CreateRadialGradient { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200) + this.grad.addColorStop(0.0, 'red') + this.grad.addColorStop(0.5, 'white') + this.grad.addColorStop(1.0, 'green') + this.offContext.fillStyle = grad + this.offContext.fillRect(0, 0, 500, 500) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) } + .width('100%') + .height('100%') } - ``` - - ![](figures/zh-cn_image_0000001237555179.png) + } + ``` + ![zh-cn_image_0000001238952407](figures/zh-cn_image_0000001238952407.png) -## CanvasPattern -一个Object对象, 通过[createPattern](#section660873113512)方法创建。 +## CanvasPattern +一个Object对象, 通过[createPattern](#createpattern)方法创建。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md index 12f099183c808bb99ec47b4859ac0ab8f2908046..22468a260b20cfb79a310985da0ac734bf2028cf 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md @@ -1,248 +1,65 @@ -# 页面间转场 +# 页面间转场 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 页面转场通过在全局pageTransition方法内配置页面入场组件和页面退场组件来自定义页面转场动效。 - - - - - - - - - - - - - - -

名称

-

参数

-

参数描述

-

PageTransitionEnter

-

Object

-

页面入场组件，用于自定义当前页面的入场效果，详见动效参数说明。

-

PageTransitionExit

-

Object

-

页面退场组件，用于自定义当前页面的退场效果，详见动效参数说明。

-
- -- 动效参数说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

默认值

-

必填

-

参数描述

-

type

-

RouteType

-

-

-

否

-

不配置时表明pop为push时效果的逆播。

-

duration

-

number

-

1000

-

否

-

动画时长，单位为毫秒。

-

curve

-

Curve | Curves

-

Linear

-

否

-

动画曲线，有效值参见Curve 说明。

-

delay

-

number

-

0

-

否

-

动画延迟时长，单位为毫秒，默认不延时播放。

-
- - -- RouteType枚举说明 - - - - - - - - - - - - -

名称

-

描述

-

Pop

-

PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。

-

Push

-

PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。

-
- - -## 属性 + +| 名称 | 参数 | 参数描述 | +| -------- | -------- | -------- | +| PageTransitionEnter | Object | 页面入场组件，用于自定义当前页面的入场效果，详见动效参数说明。 | +| PageTransitionExit | Object | 页面退场组件，用于自定义当前页面的退场效果，详见动效参数说明。 | + + +- 动效参数说明 + | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | type | RouteType | - | 否 | 不配置时表明pop为push时效果的逆播。 | + | duration | number | 1000 | 否 | 动画时长，单位为毫秒。 | + | curve | Curve \| Curves | Linear | 否 | 动画曲线，有效值参见[Curve](../reference/arkui-ts/ts-animatorproperty.md) 说明。 | + | delay | number | 0 | 否 | 动画延迟时长，单位为毫秒，默认不延时播放。 | + + +- RouteType枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Pop | PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。 | + | Push | PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。 | + + +## 属性 PageTransitionEnter和PageTransitionExit组件支持的属性： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

默认值

-

必填

-

参数描述

-

slide

-

SlideEffect

-

Right

-

否

-

设置转场的滑入效果，有效值参见SlideEffect说明。

-

translate

-

{

-

x? : number,

-

y? : number,

-

z? : number

-

}

-

-

-

否

-

设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。

-

scale

-

{

-

x? : number,

-

y? : number,

-

z? : number,

-

centerX? : number,

-

centerY? : number

-

}

-

-

-

否

-

设置页面转场时的缩放效果，为入场时起点和退场时终点的值。

-

opacity

-

number

-

1

-

否

-

设置入场的起点透明度值或者退场的终点透明度值。

-
- -- SlideEffect枚举说明 - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Left

-

设置到入场时表示从左边滑入，出场时表示滑出到左边。

-

Right

-

设置到入场时表示从右边滑入，出场时表示滑出到右边。

-

Top

-

设置到入场时表示从上边滑入，出场时表示滑出到上边。

-

Bottom

-

设置到入场时表示从下边滑入，出场时表示滑出到下边。

-
- - -## 事件 +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| slide | SlideEffect | SlideEffect.Right | 否 | 设置转场的滑入效果，有效值参见SlideEffect枚举说明。 | +| translate | {
x? : number,
y? : number,
z? : number
} | - | 否 | 设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。 | +| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number,
centerY? : number
} | - | 否 | 设置页面转场时的缩放效果，为入场时起点和退场时终点的值。 | +| opacity | number | 1 | 否 | 设置入场的起点透明度值或者退场的终点透明度值。 | + +- SlideEffect枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Left | 设置到入场时表示从左边滑入，出场时表示滑出到左边。 | + | Right | 设置到入场时表示从右边滑入，出场时表示滑出到右边。 | + | Top | 设置到入场时表示从上边滑入，出场时表示滑出到上边。 | + | Bottom | 设置到入场时表示从下边滑入，出场时表示滑出到下边。 | + + +## 事件 PageTransitionEnter和PageTransitionExit组件支持的事件： - - - - - - - - - - - -

事件

-

功能描述

-

onEnter(type: RouteType, progress: number) => void

-

回调入参为当前入场动画的归一化进度[0 - 1]。

-

onExit(type: RouteType, progress: number) => void

-

回调入参为当前退场动画的归一化进度[0 - 1]。

-
- -## 示例 +| 事件 | 功能描述 | +| -------- | -------- | -------- | +| onEnter(type: RouteType, progress: number) => void | 回调入参为当前入场动画的归一化进度[0 - 1]。 | +| onExit(type: RouteType, progress: number) => void | 回调入参为当前退场动画的归一化进度[0 - 1]。 | + + +## 示例 自定义方式1：配置了当前页面的入场动画为淡入，退场动画为缩小。 @@ -311,7 +128,7 @@ struct AExample { } ``` -![](figures/PageTransition1.gif) +![zh-cn_image_0000001174422902](figures/zh-cn_image_0000001174422902.gif) 自定义方式2：配置了当前页面的入场动画为从左侧滑入，退场为缩小加透明度变化。 @@ -377,5 +194,4 @@ struct PageTransitionExample1 { } ``` -![](figures/PageTransition2.gif) - +![zh-cn_image_0000001219864139](figures/zh-cn_image_0000001219864139.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md index 75ef65d87e3860d66091106a9ad649884523b4de..cf0b35935cccc4d96d4b21a723664ba2e2b5ddd7 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md @@ -1,154 +1,36 @@ -# 组件内转场 +# 组件内转场 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -组件转场主要通过transition属性进行配置转场参数，在组件插入和删除时进行过渡动效，主要用于容器组件子组件插入删除时提升用户体验（需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置）。 - -## 属性 - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

参数描述

-

transition

-

Object

-

-

-

所有参数均为可选参数，详细描述见transition入参说明。

-
+组件转场主要通过transition属性进行配置转场参数，在组件插入和删除时进行过渡动效，主要用于容器组件子组件插入删除时提升用户体验（需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置）。 -- transition入参说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

默认值

-

必填

-

参数描述

-

type

-

TransitionType

-

All

-

否

-

默认包括组件新增和删除。

-
说明：

不指定Type时说明插入删除使用同一种效果。

-
-

opacity

-

number

-

1

-

否

-

设置组件转场时的透明度效果，为插入时起点和删除时终点的值。

-

translate

-

{

-

x? : number,

-

y? : number,

-

z? : number

-

}

-

-

-

否

-

设置组件转场时的平移效果，为插入时起点和删除时终点的值。

-

scale

-

{

-

x? : number,

-

y? : number,

-

z? : number,

-

centerX? : number,

-

centerY? : number

-

}

-

-

-

否

-

设置组件转场时的缩放效果，为插入时起点和删除时终点的值。

-

rotate

-

{

-

x?: number,

-

y?: number,

-

z?: number,

-

angle?: Angle,

-

centerX?: Length,

-

centerY?: Length

-

}

-

-

-

否

-

设置组件转场时的旋转效果，为插入时起点和删除时终点的值。

-
+## 属性 +| 名称 | 参数类型 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | +| transition | Object | - | 所有参数均为可选参数，详细描述见transition入参说明。 | -- TransitionType枚举说明 +- transition入参说明 + | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | type | TransitionType | TransitionType.All | 否 | 默认包括组件新增和删除。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 不指定Type时说明插入删除使用同一种效果。 | + | opacity | number | 1 | 否 | 设置组件转场时的透明度效果，为插入时起点和删除时终点的值。 | + | translate | {
x? : number,
y? : number,
z? : number
} | - | 否 | 设置组件转场时的平移效果，为插入时起点和删除时终点的值。 | + | scale | {
x? : number,
y? : number,
z? : number,
centerX? : number,
centerY? : number
} | - | 否 | 设置组件转场时的缩放效果，为插入时起点和删除时终点的值。 | + | rotate | {
x?: number,
y?: number,
z?: number,
angle?: Angle,
centerX?: Length,
centerY?: Length
} | - | 否 | 设置组件转场时的旋转效果，为插入时起点和删除时终点的值。 | - - - - - - - - - - - - - - -

名称

-

描述

-

All

-

指定当前的Transition动效生效在组件的所有变化场景。

-

Insert

-

指定当前的Transition动效生效在组件的插入场景。

-

Delete

-

指定当前的Transition动效生效在组件的删除场景。

-
+- TransitionType枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | All | 指定当前的Transition动效生效在组件的所有变化场景。 | + | Insert | 指定当前的Transition动效生效在组件的插入场景。 | + | Delete | 指定当前的Transition动效生效在组件的删除场景。 | -## 示例 +## 示例 示例功能通过一个Button控制第二个Button的出现和消失，并通过transition配置第二个Button出现和消失的过场动画。 @@ -183,5 +65,4 @@ struct TransitionExample { } ``` -![](figures/Transition.gif) - +![zh-cn_image_0000001174582850](figures/zh-cn_image_0000001174582850.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md index 94ca49f08a5c0cff6288418a7f5020b4653b8e9f..3f7e939867de5b2f38f9b3d21b0405d780262915 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md @@ -1,87 +1,27 @@ -# 共享元素转场 +# 共享元素转场 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 共享元素转场支持页面间的转场，如当前页面的图片转场至下一页面中。 -## 属性 - - - - - - - - - - - - -

名称

-

参数

-

默认值

-

参数描述

-

sharedTransition

-

id: string,

-

options?: Object

-

-

-

两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。

-
+## 属性 -- options参数说明 +| 名称 | 参数 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | +| sharedTransition | id: string,
options?: Object | - | 两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。 | - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名称

-

参数类型

-

默认值

-

必填

-

参数描述

-

duration

-

number

-

1000

-

否

-

单位为毫秒，默认动画时长为1000毫秒。

-

curve

-

Curve | Curves

-

Linear

-

否

-

默认曲线为线性，有效值参见Curve说明。

-

delay

-

number

-

0

-

否

-

单位为毫秒，默认不延时播放。

-
+- options参数说明 + | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | duration | number | 1000 | 否 | 单位为毫秒，默认动画时长为1000毫秒。 | + | curve | Curve \| Curves | Linear | 否 | 默认曲线为线性，有效值参见Curve说明。 | + | delay | number | 0 | 否 | 单位为毫秒，默认不延时播放。 | -## 示例 +## 示例 示例功能为两个页面，共享元素转场页面图片点击后转场至页面B的图片。 @@ -126,5 +66,4 @@ struct BExample { } ``` -![](figures/SharedTransition.gif) - +![zh-cn_image_0000001219744195](figures/zh-cn_image_0000001219744195.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation.md index 54febbd3441ee977b93342c05429056c13b1afb5..d519f22a2c758cdb883f53cb4e148a69e94d28c1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation.md @@ -1,9 +1,7 @@ -# 转场动画 +# 转场动画 -- **[页面间转场](ts-page-transition-animation.md)** - -- **[组件内转场](ts-transition-animation-component.md)** - -- **[共享元素转场](ts-transition-animation-shared-elements.md)** +- **[页面间转场](ts-page-transition-animation.md)** +- **[组件内转场](ts-transition-animation-component.md)** +- **[共享元素转场](ts-transition-animation-shared-elements.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md index aebe77279ae8d4d8e032617d9b8a0554ca099092..12b9c249fc0b3488240d5dcac36766867b0daa96 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md @@ -1,104 +1,37 @@ -# 背景设置 +# 背景设置 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 设置组件的背景色。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

backgroundColor

-

Color

-

-

-

设置组件的背景色。

-

backgroundImage

-

src: string,

-

repeat?: ImageRepeat

-

-

-

src参数：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。

-

repeat参数：设置背景图片的重复样式，默认不重复。

-

backgroundImageSize

-

{

-

width?: Length,

-

height?: Length

-

} | ImageSize

-

Auto

-

设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。

-

backgroundImagePosition

-

{

-

x?: Length,

-

y?: Length

-

} | Alignment

-

{

-

x: 0,

-

y: 0

-

}

-

设置背景图在组件中显示位置。

-
- -- ImageSize枚举说明 - - - - - - - - - - - - - - - -

类型

-

描述

-

Cover

-

默认值，保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。

-

Contain

-

保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。

-

Auto

-

保持原图的比例不变。

-
- - -## 示例 + +## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| backgroundColor | Color | - | 设置组件的背景色。 | +| backgroundImage | src: string,
repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat枚举说明) | - | src参数：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。
repeat参数：设置背景图片的重复样式，默认不重复。 | +| backgroundImageSize | {
width?: Length,
height?: Length
} \| ImageSize | Auto | 设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。 | +| backgroundImagePosition | {
x?: Length,
y?: Length
} \| [Alignment](ts-appendix-enums.md#alignment枚举说明) | {
x: 0,
y: 0
} | 设置背景图在组件中显示位置。 | + + +- ImageSize枚举说明 + | 类型 | 描述 | + | -------- | -------- | + | Cover | 默认值，保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。 | + | Contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。 | + | Auto | 保持原图的比例不变。 | + + +## 示例 ``` @Entry @@ -164,5 +97,4 @@ struct BackgroundExample { } ``` -![](figures/back.png) - +![zh-cn_image_0000001219982703](figures/zh-cn_image_0000001219982703.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md index 6dd4daec6ace01dfea2d7b0f2e6dbb8274c910c1..add589fa8e92a1946bfbbb4d232e8bc1226a5970 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md @@ -1,107 +1,38 @@ -# 边框设置 +# 边框设置 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 设置组件边框样式。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

border

-

{

-

width?: Length,

-

color?: Color,

-

radius?: Length,

-

style?: BorderStyle

-

}

-

-

-

统一边框样式设置接口。

-

borderStyle

-

BorderStyle

-

Solid

-

设置元素的边框样式。

-

borderWidth

-

Length

-

0

-

设置元素的边框宽度。

-

borderColor

-

Color

-

-

-

设置元素的边框颜色。

-

borderRadius

-

Length

-

0

-

设置元素的边框圆角半径。

-
- -- BorderStyle枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

Dotted

-

显示为一系列圆点，圆点半径为borderWidth的一半。

-

Dashed

-

显示为一系列短的方形虚线。

-

Solid

-

显示为一条实线。

-
- - -## 示例 + +## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| border | {
width?: Length,
color?: Color,
radius?: Length,
style?: BorderStyle
} | - | 统一边框样式设置接口。 | +| borderStyle | BorderStyle |  BorderStyle.Solid | 设置元素的边框样式。 | +| borderWidth | Length | 0 | 设置元素的边框宽度。 | +| borderColor | Color | - | 设置元素的边框颜色。 | +| borderRadius | Length | 0 | 设置元素的边框圆角半径。 | + + +- BorderStyle枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Dotted | 显示为一系列圆点，圆点半径为borderWidth的一半。 | + | Dashed | 显示为一系列短的方形虚线。 | + | Solid | 显示为一条实线。 | + + +## 示例 ``` @Entry @@ -122,5 +53,4 @@ struct BorderExample { } ``` -![](figures/border.gif) - +![zh-cn_image_0000001219982705](figures/zh-cn_image_0000001219982705.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md new file mode 100644 index 0000000000000000000000000000000000000000..a60397de2481f18ed6d7cbd9b8adbeadb18db665 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md @@ -0,0 +1,50 @@ +# 点击控制 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 权限列表 + +无 + + +## 属性 + + +| **名称** | **参数类型** | **默认值** | **描述** | +| -------- | -------- | -------- | -------- | +| touchable | boolean | true | 设置当前组件是否可以被触摸。 | + + +## 示例 + +``` +@Entry +@Component +struct TouchAbleExample { + @State text1: string = '' + @State text2: string = '' + + build() { + Stack() { + Rect() + .fill(Color.Gray).width(150).height(150) + .onClick(() => { + console.info(this.text1 = 'Rect Clicked') + }) + .overlay(this.text1, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Ellipse() + .fill(Color.Pink).width(150).height(80) + .touchable(false) // 点击Ellipse区域，不会打印 “Ellipse Clicked” + .onClick(() => { + console.info(this.text2 = 'Ellipse Clicked') + }) + .overlay(this.text2, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + }.margin(100) + } +} +``` + + +![zh-cn_image_0000001189624550](figures/zh-cn_image_0000001189624550.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md new file mode 100644 index 0000000000000000000000000000000000000000..530ccd6226f58f4e7f90b8773e281875e43de16d --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md @@ -0,0 +1,102 @@ +# 组件标识 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 权限列表 + +无 + + +## 属性 + +| 名称 | 参数说明 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| id | string | '' | 组件的唯一标识，唯一性由使用者保证。 | + + +## 接口 + + +### getInspectorByKey + +getInspectorByKey(id: string): string + +获取指定id的组件的所有属性，不包括子组件信息。 + +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | id | string | 是 | - | 要获取属性的组件id。 | + +- 返回值 + | 类型 | 描述 | + | -------- | -------- | + | string | 组件属性列表的JSON字符串。 | + + +### sendEventByKey + +sendEventByKey(id: string, action: number, params: string): boolean + +给指定id的组件发送事件。 + +- 参数 + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | id | string | 是 | - | 要触发事件的组件的id。 | + | action | number | 是 | - | 要触发的事件类型，目前支持取值：
- 点击事件Click: 10
- 长按事件LongClick: 11。 | + | params | string | 是 | - | 事件参数，无参数传空字符串 ""。 | + +- 返回值 + | 类型 | 描述 | + | -------- | -------- | + | boolean | 找不到指定id的组件时返回false，其余情况返回true。 | + + +## 示例 + +``` +@Entry +@Component +struct IdExample { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Button() { + Text('click') + .fontSize(25) + .fontWeight(FontWeight.Bold) + } + .type(ButtonType.Capsule) + .margin({ + top: 20 + }).onClick(() => { + console.info(getInspectorByKey("click")) + console.info(getInspectorTree()) + setTimeout(() => { + sendEventByKey("longclick", 11, "") + }, 2000) + }).id('click') + + Button() { + Text('longclick') + .fontSize(25) + .fontWeight(FontWeight.Bold) + } + .type(ButtonType.Capsule) + .margin({ + top: 20 + }) + .backgroundColor('#0D9FFB') + .gesture( + LongPressGesture().onActionEnd(() => { + console.info('long clicked') + })) + .id('longclick') + } + .width('100%') + .height('100%') + } +} +``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md index 1aab03af30f1ea77b3cb594c028a93061d95867b..b3939fe73d40d7bdc9aa1616497cd14829ef412d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md @@ -1,37 +1,23 @@ -# 禁用控制 +# 禁用控制 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

enabled

-

boolean

-

true

-

值为true表示组件可用，可响应点击等操作；值为false时，不响应点击等操作。

-
- -## 示例 + +## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| enabled | boolean | true | 值为true表示组件可用，可响应点击等操作；值为false时，不响应点击等操作。 | + + +## 示例 ``` @Entry @@ -49,5 +35,4 @@ struct EnabledExample { } ``` -![](figures/enabled.gif) - +![zh-cn_image_0000001219982713](figures/zh-cn_image_0000001219982713.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md index 9bf95b5d168e5543a0fffca26cad302507849e00..96d69ae8255f2929a7b394bfdaf270ad52a5f8fe 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md @@ -1,65 +1,28 @@ -# Flex布局 +# Flex布局 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->- 仅当父组件是Flex组件时生效。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> +> - 仅当父组件是Flex组件时生效。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数说明

-

默认值

-

描述

-

flexBasis

-

'auto' | Length

-

'auto'

-

此属性所在的组件在Flex容器中主轴方向上基准尺寸。

-

flexGrow

-

number

-

0

-

Flex容器的剩余空间分配给给此属性所在的组件的比例。

-

flexShrink

-

number

-

1

-

Flex容器压缩尺寸分配给此属性所在的组件的比例。

-

alignSelf

-

ItemAlign

-

Auto

-

覆盖Flex布局容器中alignItems默认配置。

-
+## 属性 + + +| 名称 | 参数说明 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| flexBasis | 'auto' \| Length | 'auto' | 此属性所在的组件在Flex容器中主轴方向上基准尺寸。 | +| flexGrow | number | 0 | Flex容器的剩余空间分配给给此属性所在的组件的比例。 | +| flexShrink | number | 1 | Flex容器压缩尺寸分配给此属性所在的组件的比例。 | +| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign枚举说明) | Auto | 覆盖Flex布局容器中alignItems默认配置。 | -## 示例 + +## 示例 ``` @Entry @@ -121,5 +84,4 @@ struct FlexExample { } ``` -![](figures/flex.png) - +![zh-cn_image_0000001219744197](figures/zh-cn_image_0000001219744197.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md new file mode 100644 index 0000000000000000000000000000000000000000..e6ed56978e3cbcb1fe41101ece127d0f09b40cce --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md @@ -0,0 +1,76 @@ +# 焦点控制 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 权限列表 + +无 + + +## 属性 + +| **名称** | **参数类型** | **默认值** | **描述** | +| -------- | -------- | -------- | -------- | +| focusable | boolean | false | 设置当前组件是否可以获焦。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 支持焦点控制的组件：Button、Text、Image、List、Grid。 + + +## 示例 + +``` +@Entry +@Component +struct FocusableExample { + @State textOne: string = '' + @State textTwo: string = '' + @State textThree: string = 'The third button cannot be focused' + @State oneButtonColor: string = '#FF0000' + @State twoButtonColor: string = '#FFC0CB' + @State threeButtonColor: string = '#87CEFA' + + build() { + Column({ space:20 }){ + Button(this.textOne) + .backgroundColor(this.oneButtonColor) + .width(300).height(70).fontColor(Color.Black) + .focusable(true) + .onFocus(() => { + this.textOne = 'First Button onFocus' + this.oneButtonColor = '#AFEEEE' + }) + .onBlur(() => { + this.textOne = 'First Button onBlur' + this.oneButtonColor = '#FFC0CB' + }) + Button(this.textTwo) + .backgroundColor(this.twoButtonColor) + .width(300).height(70).fontColor(Color.Black) + .focusable(true) + .onFocus(() => { + this.textTwo = 'Second Button onFocus' + this.twoButtonColor = '#AFEEEE' + }) + .onBlur(() => { + this.textTwo = 'Second Button onBlur' + this.twoButtonColor = '#FFC0CB' + }) + Button(this.textThree) + .backgroundColor(this.threeButtonColor) + .width(300).height(70).fontColor(Color.Black) + .focusable(false) + .onFocus(() => { + this.textThree = 'Third Button onFocus' + this.threeButtonColor = '#AFEEEE' + }) + .onBlur(() => { + this.textThree = 'Third Button onBlur' + this.threeButtonColor = '#FFC0CB' + }) + }.width('100%').margin({ top:20 }) + } +} +``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md index 55a249ec57060c262245325206e4db69a6e5afce..334636f603d2bd67f3b0f7a4e9488b85e4798232 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md @@ -1,143 +1,41 @@ -# 颜色渐变 +# 颜色渐变 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

linearGradient

-

{

-

angle?: Angle,

-

direction?:GradientDirection,

-

colors: Array<ColorStop>

-

repeating?: boolean

-

}

-

-

-

线性渐变。

-

angle: 线性渐变的角度。

-

direction: 线性渐变的方向。

-

colors: 为渐变的颜色描述。

-

repeating: 为渐变的颜色重复着色。

-

sweepGradient

-

{

-

center: Point,

-

start?: angle,

-

end?: angle,

-

colors: Array<ColorStop>

-

repeating?: boolean

-

}

-

-

-

角度渐变。

-

center：为角度渐变的中心点。

-

start：角度渐变的起点。

-

end：角度渐变的终点。

-

colors: 为渐变的颜色描述。

-

repeating: 为渐变的颜色重复着色。

-

radialGradient

-

{

-

center: Point,

-

radius: Length,

-

colors: Array<ColorStop>

-

repeating: boolean

-

}

-

-

-

径向渐变。

-

center：径向渐变的中心点。

-

radius：径向渐变的半径。

-

colors: 为渐变的颜色描述。

-

repeating: 为渐变的颜色重复着色。

-
+## 属性 + -- GradientDirection枚举说明 +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| linearGradient | {
angle?: [Angle](../../ui/ts-types.md#角度类型),
direction?: GradientDirection,
colors: Array<[ColorStop](../../ui/ts-types.md#角度类型/ts-types.md#colorstop类型)>
repeating?: boolean
} | - | 线性渐变。
angle: 线性渐变的角度。
direction: 线性渐变的方向。
colors: 为渐变的颜色描述。
repeating: 为渐变的颜色重复着色。 | +| sweepGradient | {
center: Point,
start?: angle,
end?: angle,
colors: Array<[ColorStop](../../ui/ts-types.md#colorstop类型)>
repeating?: boolean
} | - | 角度渐变。
center：为角度渐变的中心点。
start：角度渐变的起点。
end：角度渐变的终点。
colors: 为渐变的颜色描述。
repeating: 为渐变的颜色重复着色。 | +| radialGradient | {
center: Point,
radius: Length,
colors: Array<[ColorStop](../../ui//ts-types.md#colorstop类型)>
repeating: boolean
} | - | 径向渐变。
center：径向渐变的中心点。
radius：径向渐变的半径。
colors: 为渐变的颜色描述。
repeating: 为渐变的颜色重复着色。 | - GradientDirection用于描述渐变方向。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Left

-

从右向左。

-

Top

-

从下向上。

-

Right

-

从左向右。

-

Bottom

-

从上向下。

-

LeftTop

-

左上。

-

LeftBottom

-

左下。

-

RightTop

-

右上。

-

RightBottom

-

右下。

-

None

-

无。

-
+- GradientDirection枚举说明 + GradientDirection用于描述渐变方向。 + | 名称 | 描述 | + | -------- | -------- | + | Left | 从右向左。 | + | Top | 从下向上。 | + | Right | 从左向右。 | + | Bottom | 从上向下。 | + | LeftTop | 左上。 | + | LeftBottom | 左下。 | + | RightTop | 右上。 | + | RightBottom | 右下。 | + | None | 无。 | -## 示例 + +## 示例 ``` @Entry @@ -180,5 +78,4 @@ struct ColorGradientExample { } ``` -![](figures/colorGradient.png) - +![zh-cn_image_0000001219864149](figures/zh-cn_image_0000001219864149.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md index f9f4a2a2a288f4f70c92ae643c722e761657954a..a172b870867e78911a5ce14688cc7b7ab8a58103 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md @@ -1,70 +1,27 @@ -# 栅格设置 +# 栅格设置 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->- 栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。使用栅格属性的组件树上至少需要有1个GridContainer容器组件。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> +> - 栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。使用栅格属性的组件树上至少需要有1个GridContainer容器组件。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

useSizeType

-

{

-

xs?: number | { span: number, offset: number },

-

sm?: number | { span: number, offset: number },

-

md?: number | { span: number, offset: number },

-

lg?: number | { span: number, offset: number }

-

}

-

-

-

设置在特定设备宽度类型下的占用列数和偏移列数，span: 占用列数; offset: 偏移列数。

-

当值为number类型时，仅设置列数， 当格式如{"span": 1, "offset": 0}时，指同时设置占用列数与偏移列数。

-
  • xs: 指设备宽度类型为SizeType.XS时的占用列数和偏移列数。
  • sm: 指设备宽度类型为SizeType.SM时的占用列数和偏移列数。
-
  • md: 指设备宽度类型为SizeType.MD时的占用列数和偏移列数。
  • lg: 指设备宽度类型为SizeType.LG时的占用列数和偏移列数。
-

gridSpan

-

number

-

1

-

默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。

-
说明：

设置了栅格span属性，组件的宽度由栅格布局决定。

-
-

gridOffset

-

number

-

0

-

默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时， 当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。

-
说明：

1. 配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。

-

2. 偏移位移 = （列宽 + 间距）* 列数。

-

3. 设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。

-
-
+## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| useSizeType | {
xs?: number \| { span: number, offset: number },
sm?: number \| { span: number, offset: number },
md?: number \| { span: number, offset: number },
lg?: number \| { span: number, offset: number }
} | - | 设置在特定设备宽度类型下的占用列数和偏移列数，span: 占用列数; offset: 偏移列数。
当值为number类型时，仅设置列数， 当格式如{"span": 1, "offset": 0}时，指同时设置占用列数与偏移列数。
- xs: 指设备宽度类型为SizeType.XS时的占用列数和偏移列数。
- sm: 指设备宽度类型为SizeType.SM时的占用列数和偏移列数。
- md: 指设备宽度类型为SizeType.MD时的占用列数和偏移列数。
- lg: 指设备宽度类型为SizeType.LG时的占用列数和偏移列数。 | +| gridSpan | number | 1 | 默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 设置了栅格span属性，组件的宽度由栅格布局决定。 | +| gridOffset | number | 0 | 默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时， 当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 1.  配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。
> 
> 2.  偏移位移 = （列宽 + 间距）\* 列数。
> 
> 3.  设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。 | -## 示例 + +## 示例 ``` @Entry @@ -109,12 +66,11 @@ struct GridContainerExample1 { } ``` -**图 1** 设备宽度为SM -![](figures/设备宽度为SM.png "设备宽度为SM") - -**图 2** 设备宽度为MD -![](figures/设备宽度为MD.png "设备宽度为MD") +**图1** 设备宽度为SM +![zh-cn_image_0000001174582872](figures/zh-cn_image_0000001174582872.png) -**图 3** 设备宽度为LG -![](figures/设备宽度为LG.png "设备宽度为LG") +**图2** 设备宽度为MD +![zh-cn_image_0000001219744207](figures/zh-cn_image_0000001219744207.png) +**图3** 设备宽度为LG +![zh-cn_image_0000001219982727](figures/zh-cn_image_0000001219982727.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md new file mode 100644 index 0000000000000000000000000000000000000000..da7f2b1e0a0dd6ca0d6577cd31861fc95284f5d3 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md @@ -0,0 +1,67 @@ +# 悬浮态效果 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 权限列表 + +无 + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| hoverEffect | HoverEffect | HoverEffect.Auto | 设置当前组件悬停态下的悬浮效果。 | + +- HoverEffect 枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Auto | 使用组件的系统默认悬浮效果。 | + | Scale | 放大缩小效果。 | + | Board | 背景淡入淡出效果。 | + | None | 不设置效果。 | + + +## 示例 + +``` +@Entry +@Component +struct HoverExample { + @State isHoverVal: boolean = false + + build() { + Column({ space: 5 }) { + Column({ space: 5 }) { + Text('Scale').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 80 }) + Column() + .width('80%').height(200).backgroundColor(Color.Gray) + .position({ x: 40, y: 120 }) + .hoverEffect(HoverEffect.Scale) + .onHover((isHover: boolean) => { + console.info('Scale' + isHover) + this.isHoverVal = isHover + }) + + Text('Board').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 380 }) + Column() + .width('80%').height(200).backgroundColor(Color.Gray) + .hoverEffect(HoverEffect.Board) + .position({ x: 40, y: 420 }) + .onHover((isHover: boolean) => { + console.info('HoverEffect.Board') + this.isHoverVal = isHover + }) + } + .hoverEffect(HoverEffect.None) + .width('100%').height('100%').border({ width: 1 }) + .onHover((isHover: boolean) => { + console.info('HoverEffect.None') + this.isHoverVal = isHover + }) + } + } +} +``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md index 3e8fcd6469f97c5e4113633474c0cfbb3c18842d..49015456c8dd875aa1409dd3476878543a24c0fa 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md @@ -1,139 +1,40 @@ -# 图像效果 +# 图像效果 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

blur

-

number

-

-

-

为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。

-

backdropBlur

-

number

-

-

-

为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。

-

shadow

-

{

-

radius: number,

-

color?: Color,

-

offsetX?: number,

-

offsetY?: number

-

}

-

-

-

为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、X轴的偏移量(可选，默认为0)，Y轴的偏移量(可选，默认为0)，偏移量单位为px。

-

grayscale

-

number

-

0.0

-

为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)

-

brightness

-

number

-

1.0

-

为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑；大于1时亮度增加，数值越大亮度越大。

-

saturate

-

number

-

1.0

-

为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大；小于1时消色成分越大，饱和度越小。（百分比）

-

contrast

-

number

-

1.0

-

为当前组件添加对比度效果，入参为对比度的值，值为1时，显示原图；大于1时，值越大对比度越高，图像越清晰醒目；小于1时，值越小对比度越低；当对比度为0时，图像变为全灰。（百分比）

-

invert

-

number

-

0

-

反转输入的图像。入参为图像反转的比例。值为1时完全反转。值为0则图像无变化。（百分比）

-

colorBlend 8+

-

Color

-

-

-

为当前组件添加颜色叠加效果，入参为叠加的颜色。

-

sepia

-

number

-

0

-

将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。 （百分比）

-

hueRotate

-

Angle

-

0deg

-

为当前组件添加色相旋转效果，入参为旋转的角度值。当入参为0deg时图像无变化(默认值是0deg)，入参没有最大值，超过360deg的值相当于又绕一圈。

-
- -## 示例 + +## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 | +| backdropBlur | number | - | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 | +| shadow | {
radius: number,
color?: Color,
offsetX?: number,
offsetY?: number
} | - | 为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、X轴的偏移量(可选，默认为0)，Y轴的偏移量(可选，默认为0)，偏移量单位为px。 | +| grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比) | +| brightness | number | 1.0 | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑；大于1时亮度增加，数值越大亮度越大。 | +| saturate | number | 1.0 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大；小于1时消色成分越大，饱和度越小。（百分比） | +| contrast | number | 1.0 | 为当前组件添加对比度效果，入参为对比度的值，值为1时，显示原图；大于1时，值越大对比度越高，图像越清晰醒目；小于1时，值越小对比度越低；当对比度为0时，图像变为全灰。（百分比） | +| invert | number | 0 | 反转输入的图像。入参为图像反转的比例。值为1时完全反转。值为0则图像无变化。（百分比） | +| colorBlend 8+ | Color | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。 | +| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。 （百分比） | +| hueRotate | Angle | 0deg | 为当前组件添加色相旋转效果，入参为旋转的角度值。当入参为0deg时图像无变化(默认值是0deg)，入参没有最大值，超过360deg的值相当于又绕一圈。 | + + +## 示例 ``` @Entry @Component struct ImageEffectsExample { build() { - Column({space: 10}) { + Column({space：10}) { // 对字体进行模糊 Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%') Text('text').blur(3).width('90%').height(40) @@ -171,5 +72,4 @@ struct ImageEffectsExample { } ``` -![](figures/2222.png) - +![zh-cn_image_0000001219864157](figures/zh-cn_image_0000001219864157.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md index 03162caad6af00534dd1e4900c7c333a2b6ec839..ee375427774414832f3000fb51b17185114da843 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md @@ -1,48 +1,24 @@ -# 布局约束 +# 布局约束 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - - - - - - -

名称

-

参数说明

-

默认值

-

描述

-

aspectRatio

-

number

-

-

-

指定当前组件的宽高比。

-

displayPriority

-

number

-

-

-

设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。

-
说明：

仅在Row/Column/Flex(单行)容器组件中生效。

-
-
- -## 示例 + +## 属性 + + +| 名称 | 参数说明 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| aspectRatio | number | - | 指定当前组件的宽高比。 | +| displayPriority | number | - | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅在Row/Column/Flex(单行)容器组件中生效。 | + + +## 示例 ``` @Entry @@ -92,11 +68,11 @@ struct AspectRatioExample { } ``` -**图 1** 竖屏显示 -![](figures/竖屏显示.gif "竖屏显示") +**图1** 竖屏显示 +![zh-cn_image_0000001219744205](figures/zh-cn_image_0000001219744205.gif) -**图 2** 横屏显示 -![](figures/横屏显示.gif "横屏显示") +**图2** 横屏显示 +![zh-cn_image_0000001174264382](figures/zh-cn_image_0000001174264382.gif) ``` class ContainerInfo { @@ -149,5 +125,4 @@ struct DisplayPriorityExample { ``` -![](figures/DisplayPriorityExample.gif) - +![zh-cn_image_0000001219662667](figures/zh-cn_image_0000001219662667.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md index 41fe4a1b1ea0dbe9a7673cc4d1aae1a9aa0dae3b..ac65f17a241863ab26b65f9c4a0c217e38d5826f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md @@ -1,115 +1,35 @@ -# 位置设置 +# 位置设置 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

align

-

Alignment

-

Center

-

设置元素内容的对齐方式，只有当设置的width和height大小超过元素本身内容大小时生效。

-

direction

-

Direction

-

Auto

-

设置元素水平方向的布局，可选值参照Direction枚举说明。

-

position

-

{

-

x: Length,

-

y: Length

-

}

-

-

-

使用绝对定位，设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。

-

markAnchor

-

{

-

x: Length,

-

y: Length

-

}

-

{

-

x: 0,

-

y: 0

-

}

-

设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。

-

offset

-

{

-

x: Length,

-

y: Length

-

}

-

{

-

x: 0,

-

y: 0

-

}

-

相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。

-
- -- Direction枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

Ltr

-

元素从左到右布局。

-

Rtl

-

元素从右到左布局。

-

Auto

-

使用系统默认布局方向。

-
- - -## 示例 + +## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| align | [Alignment](ts-appendix-enums.md#alignment枚举说明) | Center | 设置元素内容的对齐方式，只有当设置的width和height大小超过元素本身内容大小时生效。 | +| direction | Direction | Auto | 设置元素水平方向的布局，可选值参照Direction枚举说明。 | +| position | {
x: Length,
y: Length
} | - | 使用绝对定位，设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。 | +| markAnchor | {
x: Length,
y: Length
} | {
x: 0,
y: 0
} | 设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。 | +| offset | {
x: Length,
y: Length
} | {
x: 0,
y: 0
} | 相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。 | + + +- Direction枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Ltr | 元素从左到右布局。 | + | Rtl | 元素从右到左布局。 | + | Auto | 使用系统默认布局方向。 | + + +## 示例 ``` @Entry @@ -142,7 +62,7 @@ struct PositionExample { } ``` -![](figures/position.gif) +![zh-cn_image_0000001174264368](figures/zh-cn_image_0000001174264368.gif) ``` @Entry @@ -195,5 +115,4 @@ struct PositionExample2 { } ``` -![](figures/position2.gif) - +![zh-cn_image_0000001174104392](figures/zh-cn_image_0000001174104392.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md index 54c82a37bd93a2e7a779747bc97a0b46925a0d66..ac768804a52d97e332ec964f02b190425ac5e609 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md @@ -1,65 +1,30 @@ -# Menu控制 +# Menu控制 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

bindMenu

-

Array<MenuItem> | CustomBuilder8+

-

-

-

给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。

-
- -- MenuItem - - - - - - - - - - - - - - - -

名称

-

类型

-

描述

-

value

-

string

-

菜单项文本。

-

action

-

() => void

-

点击菜单项的事件回调。

-
- - -## 示例 + +## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| bindMenu | Array8+ | - | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 | + + +- MenuItem + | 名称 | 类型 | 描述 | + | -------- | -------- | -------- | + | value | string | 菜单项文本。 | + | action | () => void | 点击菜单项的事件回调。 | + + +## 示例 ``` @Entry @@ -89,7 +54,7 @@ struct MenuExample { } ``` -![](figures/menu.gif) +![zh-cn_image_0000001174582862](figures/zh-cn_image_0000001174582862.gif) ``` import router from '@system.router'; @@ -137,5 +102,4 @@ struct MenuExample { } ``` -![](figures/GIF.gif) - +![zh-cn_image_0000001186807708](figures/zh-cn_image_0000001186807708.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md index 72eb6cff96e81bd30767a19d67a7373ee87084a2..bba65d744a27c56232b24f55b1fb46b29709d666 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md @@ -1,39 +1,26 @@ -# 透明度设置 +# 透明度设置 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 设置组件的透明度。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

opacity

-

number

-

1

-

元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-
- -## 示例 + +## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| opacity | number | 1 | 元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | + + +## 示例 ``` @Entry @@ -54,5 +41,4 @@ struct OpacityExample { } ``` -![](figures/opacity.gif) - +![zh-cn_image_0000001219662647](figures/zh-cn_image_0000001219662647.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md index 92753d44dfe52624026d3685f4f476a635b720af..45b00a1bdafd5018100d506adf76cf217180106f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md @@ -1,44 +1,23 @@ -# 浮层 +# 浮层 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

overlay

-

title: string,

-

options: {

-

align?: Alignment,

-

offset?: {x: number, y: number}

-

}

-

{

-

align: Alignment.Center,

-

offset: {0, 0}

-

}

-

在当前组件上，增加遮罩文本，布局与当前组件相同。

-
+## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| overlay | title: string,
options: {
align?: [Alignment](ts-appendix-enums.md#alignment枚举说明),
offset?: {x: number, y: number}
} | {
align: Alignment.Center,
offset: {0, 0}
} | 在当前组件上，增加遮罩文本，布局与当前组件相同。 | -## 示例 + +## 示例 ``` @Entry @@ -52,7 +31,7 @@ struct OverlayExample { Column() { Image($r('app.media.img')) .width(240).height(240) - .overlay("Winter is a beautiful season, especially when it snows", { align: Alignment.Bottom, offset: { x: 0, y: -15 } }) + .overlay("Winter is a beautiful season, especially when it snows.", { align: Alignment.Bottom, offset: { x: 0, y: -15 } }) }.border({ color: Color.Black, width: 2 }) }.width('100%') }.padding({ top: 20 }) @@ -60,5 +39,4 @@ struct OverlayExample { } ``` -![](figures/overlay.png) - +![zh-cn_image_0000001205769446](figures/zh-cn_image_0000001205769446.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md new file mode 100644 index 0000000000000000000000000000000000000000..28c0b3dcf612d27876403437211e218997564a3f --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md @@ -0,0 +1,124 @@ +# 多态样式 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +设置组件不同状态下的样式。 + + +## 权限列表 + +无 + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| stateStyle | StateStyles | - | 设置组件不同状态的样式。 | + +- StateStyles接口说明 + | 名称 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | normal | ()=>void | 否 | - | 组件无状态时的样式。 | + | pressed | ()=>void | 否 | - | 组件按下状态的样式。 | + | disabled | ()=>void | 否 | - | 组件禁用状态的样式。 | + + +## 示例 + +``` +@Entry +@Component +struct StyleExample { + @State isEnable: boolean = true + + @Styles pressedStyles() { + .backgroundColor("#ED6F21") + .borderRadius(10) + .borderStyle(BorderStyle.Dashed) + .borderWidth(2) + .borderColor("#33000000") + .width(120) + .height(30) + .opacity(1) + } + + @Styles disabledStyles() { + .backgroundColor("#E5E5E5") + .borderRadius(10) + .borderStyle(BorderStyle.Solid) + .borderWidth(2) + .borderColor("#2a4c1919") + .width(90) + .height(25) + .opacity(1) + } + + @Styles normalStyles() { + .backgroundColor("#0A59F7") + .borderRadius(10) + .borderStyle(BorderStyle.Solid) + .borderWidth(2) + .borderColor("#33000000") + .width(100) + .height(25) + .opacity(1) + } + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + Text("normal") + .fontSize(14) + .fontColor(Color.White) + .opacity(0.5) + .stateStyles({ + normal: this.normalStyles, + }) + .margin({ bottom: 20 }) + .textAlign(TextAlign.Center) + Text("pressed") + .backgroundColor("#0A59F7") + .borderRadius(20) + .borderStyle(BorderStyle.Dotted) + .borderWidth(2) + .borderColor(Color.Red) + .width(100) + .height(25) + .opacity(1) + .fontSize(14) + .fontColor(Color.White) + .stateStyles({ + pressed: this.pressedStyles, + }) + .margin({ bottom: 20 }) + .textAlign(TextAlign.Center) + Text(this.isEnable == true ? "effective" : "disabled") + .backgroundColor("#0A59F7") + .borderRadius(20) + .borderStyle(BorderStyle.Solid) + .borderWidth(2) + .borderColor(Color.Gray) + .width(100) + .height(25) + .opacity(1) + .fontSize(14) + .fontColor(Color.White) + .enabled(this.isEnable) + .stateStyles({ + disabled: this.disabledStyles, + }) + .textAlign(TextAlign.Center) + Text("control disabled") + .onClick(() => { + this.isEnable = !this.isEnable + console.log(`${this.isEnable}`) + }) + } + .width(350).height(300) + } +} +``` + +![zh-cn_image_0000001188742468](figures/zh-cn_image_0000001188742468.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md index 02ec3ab0feb49a7a92992ca3099359cd31cc76fb..1f10a1a0a9ea896ce8e727159f47343430682981 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md @@ -1,269 +1,56 @@ -# Popup控制 +# Popup控制 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

bindPopup

-

show: boolean,

-

popup: PopupOption | CustomPopupOption

-

-

-

给组件绑定Popup，点击弹出弹窗。

-

show: 创建页面弹窗提示是否默认显示，默认值为false。

-

popup: 配置当前弹窗提示的参数。

-
+## 属性 -- PopupOption类型接口说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

必填

-

默认值

-

描述

-

message

-

string

-

是

-

-

-

弹窗信息内容。

-

placementOnTop

-

boolean

-

否

-

false

-

是否在组件上方显示，默认值为false。

-

primaryButton

-

{

-

value: string,

-

action: () => void

-

}

-

否

-

-

-

第一个按钮。

-

value: 弹窗里主按钮的文本。

-

action: 点击主按钮的回调函数。

-

secondaryButton

-

{

-

value: string,

-

action: () => void

-

}

-

否

-

-

-

第二个按钮。

-

value: 弹窗里辅助按钮的文本。

-

action: 点击辅助按钮的回调函数。

-

onStateChange

-

(isVisible: boolean) => void

-

否

-

-

-

弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。

-
+| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| bindPopup | show: boolean,
popup: PopupOption\| CustomPopupOption | - | 给组件绑定Popup，点击弹出弹窗。
show: 创建页面弹窗提示是否默认显示，默认值为false。
popup: 配置当前弹窗提示的参数。 | -- CustomPopupOption类型接口说明8+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

必填

-

默认值

-

描述

-

builder

-

() => any

-

是

-

-

-

提示气泡内容的构造器。

-

placement

-

Placement

-

否

-

Placement.Bottom

-

气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。

-

maskColor

-

Color

-

否

-

-

-

提示气泡遮障层的颜色。

-

popupColor

-

Color

-

否

-

-

-

提示气泡的颜色。

-

enableArrow

-

boolean

-

否

-

true

-

是否显示箭头，只有上、下方向的气泡会显示箭头。

-

autoCancel

-

boolean

-

否

-

true

-

页面有操作时，是否自动关闭气泡

-

onStateChange

-

(isVisible: boolean) => void

-

否

-

-

-

弹窗状态变化事件回调，参数为弹窗当前的显示状态。

-
+- PopupOption类型接口说明 + | 名称 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | message | string | 是 | - | 弹窗信息内容。 | + | placementOnTop | boolean | 否 | false | 是否在组件上方显示，默认值为false。 | + | primaryButton | {
value: string,
action: () => void
} | 否 | - | 第一个按钮。
value: 弹窗里主按钮的文本。
action: 点击主按钮的回调函数。 | + | secondaryButton | {
value: string,
action: () => void
} | 否 | - | 第二个按钮。
value: 弹窗里辅助按钮的文本。
action: 点击辅助按钮的回调函数。 | + | onStateChange | (isVisible: boolean) => void | 否 | - | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。 | -- Placement枚举说明8+ +- CustomPopupOption类型接口说明8+ + | 名称 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | builder | () => any | 是 | - | 提示气泡内容的构造器。 | + | placement | Placement | 否 | Placement.Bottom | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。 | + | maskColor | [Color](../../ui/ts-types.md#颜色类型) | 否 | - | 提示气泡遮障层的颜色。 | + | popupColor | [Color](../../ui/ts-types.md#颜色类型) | 否 | - | 提示气泡的颜色。 | + | enableArrow | boolean | 否 | true | 是否显示箭头，只有上、下方向的气泡会显示箭头。 | + | autoCancel | boolean | 否 | true | 页面有操作时，是否自动关闭气泡 | + | onStateChange | (isVisible: boolean) => void | 否 | - | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Left

-

气泡提示位于组件左侧。

-

Right

-

气泡提示位于组件右侧。

-

Top

-

气泡提示位于组件上侧。

-

Bottom

-

气泡提示位于组件下侧。

-

TopLeft

-

气泡提示位于组件左上角。

-

TopRight

-

气泡提示位于组件右上角。

-

BottomLeft

-

气泡提示位于组件左下角。

-

BottomRight

-

气泡提示位于组件右下角。

-
+- Placement枚举说明8+ + | 名称 | 描述 | + | -------- | -------- | + | Left | 气泡提示位于组件左侧。 | + | Right | 气泡提示位于组件右侧。 | + | Top | 气泡提示位于组件上侧。 | + | Bottom | 气泡提示位于组件下侧。 | + | TopLeft | 气泡提示位于组件左上角。 | + | TopRight | 气泡提示位于组件右上角。 | + | BottomLeft | 气泡提示位于组件左下角。 | + | BottomRight | 气泡提示位于组件右下角。 | -## 示例 +## 示例 ``` @Entry @@ -340,5 +127,4 @@ struct PopupExample { } ``` -![](figures/popup.gif) - +![zh-cn_image_0000001187055946](figures/zh-cn_image_0000001187055946.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-response-region.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-response-region.md deleted file mode 100644 index e609b2caad3f6ddbbcd11f272bfd9852d3cf3df7..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-response-region.md +++ /dev/null @@ -1,131 +0,0 @@ -# 触摸热区设置 - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。 - -## 权限列表 - -无 - -## 属性 - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

responseRegion

-

Array<Rectangle> | Rectangle

-

{

-

x：0,

-

y：0,

-

width：'100%',

-

height：'100%'

-

}

-

设置一个或多个触摸热区，包括位置和大小。

-
说明：

百分比是相对于组件本身来度量的。

-

x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小，当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小，当y设置为'-100%'时表示热区往上偏移组件本身高度大小。

-

width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。

-
-
- -- Rectangle对象说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

必填

-

默认值

-

描述

-

x

-

Length

-

否

-

0vp

-

触摸点相对于组件本身左边沿的X坐标。

-

y

-

Length

-

否

-

0vp

-

触摸点相对于组件本身左边沿的Y坐标。

-

width

-

Length

-

否

-

100%

-

触摸热区范围的宽度。

-

height

-

Length

-

否

-

100%

-

触摸热区范围的高度。

-
- - >![](../../public_sys-resources/icon-note.gif) **说明：** - >当x和y都设置为正值时，表示组件的触摸热区的范围整体往组件本身右下角偏移，偏移的大小可通过数值来设置。 - - -## 示例 - -``` -@Entry -@Component -struct ResponseRegionExample { - build() { - Column() { - Toggle({ type: ToggleType.Checkbox, isOn: true }) - .selectedColor(0x39a2db) - .backgroundColor(0xAFEEEE) - .responseRegion({ x: 1.0, y: 1.0, width: 400, height: 400 }) - .onChange((isOn: boolean) => { - console.info('Component status:' + isOn) - }) - }.width('100%').margin({ top: 5 }) - } -} -``` - -![](figures/GIF1.gif) - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md index be60088552ef4b20a52a56c240824349d2c38636..3cf21fa6c0375a06dfff3802f382298ec0738bb0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md @@ -1,46 +1,24 @@ -# 形状裁剪 +# 形状裁剪 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

clip

-

Shape | boolean

-

false

-

参数为Shape类型时，按指定的形状对当前组件进行裁剪；参数为boolean类型时，设置是否按照边缘轮廓进行裁剪。

-

mask

-

Shape

-

-

-

在当前组件上加上指定形状的遮罩。

-
+## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| clip | Shape \| boolean | false | 参数为Shape类型时，按指定的形状对当前组件进行裁剪；参数为boolean类型时，设置是否按照边缘轮廓进行裁剪。 | +| mask | Shape | - | 在当前组件上加上指定形状的遮罩。 | -## 示例 + +## 示例 ``` @Entry @@ -77,5 +55,4 @@ struct ClipAndMaskExample { } ``` -![](figures/clip.png) - +![zh-cn_image_0000001174264370](figures/zh-cn_image_0000001174264370.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md index 690ce279746778022e97634e1205e61371ec5181..0e09e523c0a5ca7d64bfe788774b747e1fc5291d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md @@ -1,124 +1,35 @@ -# 尺寸设置 +# 尺寸设置 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数说明

-

默认值

-

描述

-

width

-

Length

-

-

-

设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。

-

height

-

Length

-

-

-

设置组件自身的高度，缺省时使用元素自身内容需要的高度。

-

size

-

{

-

width?: Length,

-

height?: Length

-

}

-

-

-

设置高宽尺寸。

-

padding

-

{

-

top?: Length,

-

right?: Length,

-

bottom?: Length,

-

left?: Length

-

} | Length

-

0

-

设置内边距属性。

-

参数为Length类型时，四个方向内边距同时生效。

-

margin

-

{

-

top?: Length,

-

right?: Length,

-

bottom?: Length,

-

left?: Length

-

}

-

| Length

-

0

-

设置外边距属性。

-

参数为Length类型时，四个方向外边距同时生效。

-

constraintSize

-

{

-

minWidth?: Length,

-

maxWidth?: Length,

-

minHeight?: Length,

-

maxHeight?: Lenght

-

}

-

{

-

minWidth: 0,

-

maxWidth: Infinity,

-

minHeight: 0,

-

maxHeight: Infinity

-

}

-

设置约束尺寸，组件布局时，进行尺寸范围限制。

-

layoutWeight

-

number

-

0

-

容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。

-
说明：

仅在Row/Column/Flex布局中生效。

-
-
+## 属性 + + +| 名称 | 参数说明 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| width | Length | - | 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。 | +| height | Length | - | 设置组件自身的高度，缺省时使用元素自身内容需要的高度。 | +| size | {
width?: Length,
height?: Length
} | - | 设置高宽尺寸。 | +| padding | {
top?: Length,
right?: Length,
bottom?: Length,
left?: Length
} \| Length | 0 | 设置内边距属性。
参数为Length类型时，四个方向内边距同时生效。 | +| margin | {
top?: Length,
right?: Length,
bottom?: Length,
left?: Length
}
\| Length | 0 | 设置外边距属性。
参数为Length类型时，四个方向外边距同时生效。 | +| constraintSize | {
minWidth?: Length,
maxWidth?: Length,
minHeight?: Length,
maxHeight?: Lenght
} | {
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
} | 设置约束尺寸，组件布局时，进行尺寸范围限制。 | +| layoutWeight | number | 0 | 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅在Row/Column/Flex布局中生效。 | -## 示例 + +## 示例 ``` @Entry @Component struct SizeExample { + @StateitemWidth : number = 0 @StateitemHeight : number = 0 build() { Column({ space: 10 }) { Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%') @@ -144,10 +55,10 @@ struct SizeExample { Text('no layoutWeight') .size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) }.size({ width: '90%', height: 140 }).backgroundColor(0xAFEEEE) + List() { ListItem() { Image('/resources/rawfile/seaman.png') .alt('/resources/rawfile/seaman2.png') .objectFit(ImageFit.Fill) .padding('100vp') .margin('40vp') .opacity(0.5) .measure('image_1') // 获取id=image_1的Image组件尺寸信息 } .onMeasure((Array ruler) => { // 在布局之前回调，返回已测量的子组件尺寸信息 console.log(ruler[0].id, ruler[0].screenX, ruler[0].screenY, ruler[0].offsetX, ruler[0].offsetY, ruler[0].width, ruler[0].height) this.itemWidth = ruler[0].width this.itemHeight = ruler[0].height }) .width(this.itemWidth) .height(this.itemHeight) } }.width('100%').margin({ top: 5 }) } } ``` -![](figures/size.gif) - +![zh-cn_image_0000001174264384](figures/zh-cn_image_0000001174264384.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md index c7de8fb1a92586b4ee4cd1197896097b7778b2ca..920f40215e0a787c69bfad314c5d21d9989af9c0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md @@ -1,140 +1,48 @@ -# 文本样式设置 +# 文本样式设置 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 针对包含文本元素的组件，设置文本样式。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

fontColor

-

Color

-

-

-

设置文本颜色。

-

fontSize

-

Length

-

-

-

设置文本尺寸，Length为number类型时，使用fp单位。

-

fontStyle

-

FontStyle

-

Normal

-

设置文本的字体样式。

-

fontWeight

-

number | FontWeight

-

Normal

-

设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。

-

提供常用枚举值，参考：FontWeight。

-

fontFamily

-

string

-

-

-

设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。

-
- -- FontStyle枚举说明 - - - - - - - - - - - - -

名称

-

描述

-

Normal

-

标准的字体样式。

-

Italic

-

斜体的字体样式。

-
- - -- FontWeight枚举说明 - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Lighter

-

字体较细。

-

Normal

-

字体粗细正常。

-

Regular

-

字体粗细正常。

-

Medium

-

字体粗细适中。

-

Bold

-

字体较粗。

-

Bolder

-

字体非常粗。

-
- - -## 示例 + +## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| fontColor | Color | - | 设置文本颜色。 | +| fontSize | Length | - | 设置文本尺寸，Length为number类型时，使用fp单位。 | +| fontStyle | FontStyle | FontStyle.Normal | 设置文本的字体样式。 | +| fontWeight | number \|FontWeight | FontWeight.FontWeightNormal | 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
提供常用枚举值，参考：FontWeight枚举说明。 | +| fontFamily | string | - | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。 | + + +- FontStyle枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Normal | 标准的字体样式。 | + | Italic | 斜体的字体样式。 | + + +- FontWeight枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Lighter | 字体较细。 | + | Normal | 字体粗细正常。 | + | Regular | 字体粗细正常。 | + | Medium | 字体粗细适中。 | + | Bold | 字体较粗。 | + | Bolder | 字体非常粗。 | + + +## 示例 ``` @Entry @@ -179,5 +87,4 @@ struct TextStyleExample { } ``` -![](figures/textstyle.png) - +![zh-cn_image_0000001219662673](figures/zh-cn_image_0000001219662673.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md new file mode 100644 index 0000000000000000000000000000000000000000..babdc3e865e9d1fa215ef18147eee672f77dab95 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md @@ -0,0 +1,55 @@ +# 触摸热区设置 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。 + + +## 权限列表 + +无 + + +## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| responseRegion | Array<Rectangle> \| Rectangle | {
x：0,
y：0,
width：'100%',
height：'100%'
} | 设置一个或多个触摸热区，包括位置和大小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 百分比是相对于组件本身来度量的。
> 
> x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小，当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小，当y设置为'-100%'时表示热区往上偏移组件本身高度大小。
> 
> width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。 | + + +- Rectangle对象说明 + | 名称 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | x | Length | 否 | 0vp | 触摸点相对于组件本身左边沿的X坐标。 | + | y | Length | 否 | 0vp | 触摸点相对于组件本身左边沿的Y坐标。 | + | width | Length | 否 | 100% | 触摸热区范围的宽度。 | + | height | Length | 否 | 100% | 触摸热区范围的高度。 | + + > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** + > 当x和y都设置为正值时，表示组件的触摸热区的范围整体往组件本身右下角偏移，偏移的大小可通过数值来设置。 + + +## 示例 + +``` +@Entry +@Component +struct ResponseRegionExample { + build() { + Column() { + Toggle({ type: ToggleType.Checkbox, isOn: true }) + .selectedColor(0x39a2db) + .backgroundColor(0xAFEEEE) + .responseRegion({ x: 1.0, y: 1.0, width: 400, height: 400 }) + .onChange((isOn: boolean) => { + console.info('Component status:' + isOn) + }) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![zh-cn_image_0000001184400598](figures/zh-cn_image_0000001184400598.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touchable.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touchable.md deleted file mode 100644 index db8a12c6e6591f53c6a0799c9010da587c45cbc6..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touchable.md +++ /dev/null @@ -1,64 +0,0 @@ -# 点击控制 - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -## 权限列表 - -无 - -## 属性 - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

touchable

-

boolean

-

true

-

设置当前组件是否可以被触摸。

-
- -## 示例 - -``` -@Entry -@Component -struct TouchAbleExample { - @State text1: string = '' - @State text2: string = '' - - build() { - Stack() { - Rect() - .fill(Color.Gray).width(150).height(150) - .onClick(() => { - console.info(this.text1 = 'Rect Clicked') - }) - .overlay(this.text1, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) - Ellipse() - .fill(Color.Pink).width(150).height(80) - .touchable(false) // 点击Ellipse区域，不会打印 “Ellipse Clicked” - .onClick(() => { - console.info(this.text2 = 'Ellipse Clicked') - }) - .overlay(this.text2, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) - }.margin(100) - } -} -``` - -![](figures/GIF2.gif) - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md index e895b85b9ebd3250ff047ae9ef858f205c176391..78e95635f49d05622b97de4dc09816b34a24711a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md @@ -1,98 +1,26 @@ -# 图形变换 +# 图形变换 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

rotate

-

{

-

x?: number,

-

y?: number,

-

z?: number,

-

angle?: Angle,

-

centerX?: Length,

-

centerY?: Length

-

}

-

{

-

x: 0,

-

y: 0,

-

z: 0,

-

angle: 0,

-

centerX: '50%',

-

centerY: '50%'

-

}

-

(x, y, z)指定一个矢量，表示旋转轴，正角度为顺时针转动，负角度为逆时针转动，默认值为0，同时可以通过centerX和centerY设置旋转的中心点。

-

translate

-

{

-

x?: Length,

-

y?: Length,

-

z? : Length

-

}

-

{

-

x: 0,

-

y: 0,

-

z: 0

-

}

-

可以分别设置X轴、Y轴、Z轴的平移距离，距离的正负控制平移的方向，默认值为0。

-

scale

-

{

-

x?: number,

-

y?: number,

-

z?: number,

-

centerX?: Length,

-

centerY?: Length

-

}

-

{

-

x: 1,

-

y: 1,

-

z: 1,

-

centerX:'50%',

-

centerY:'50%'

-

}

-

可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。

-

transform

-

matrix: Matrix4

-

-

-

设置当前组件的变换矩阵。

-
- -## 示例 + +## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| rotate | {
x?: number,
y?: number,
z?: number,
angle?: Angle,
centerX?: Length,
centerY?: Length
} | {
x: 0,
y: 0,
z: 0,
angle: 0,
centerX: '50%',
centerY: '50%'
} | (x, y, z)指定一个矢量，表示旋转轴，正角度为顺时针转动，负角度为逆时针转动，默认值为0，同时可以通过centerX和centerY设置旋转的中心点。 | +| translate | {
x?: Length,
y?: Length,
z? : Length
} | {
x: 0,
y: 0,
z: 0
} | 可以分别设置X轴、Y轴、Z轴的平移距离，距离的正负控制平移的方向，默认值为0。 | +| scale | {
x?: number,
y?: number,
z?: number,
centerX?: Length,
centerY?: Length
} | {
x: 1,
y: 1,
z: 1,
centerX:'50%',
centerY:'50%'
} | 可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。 | +| transform | matrix: Matrix4 | - | 设置当前组件的变换矩阵。 | + + +## 示例 ``` import Matrix4 from '@ohos.matrix4' @@ -133,5 +61,4 @@ struct TransformExample { } ``` -![](figures/1111.png) - +![zh-cn_image_0000001219864137](figures/zh-cn_image_0000001219864137.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md index a006bafc170a4e44ff1b3ee610cbe2a7f89c1930..81aee8bf9c665433b40692aec2413d21ef307fbb 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md @@ -1,64 +1,31 @@ -# 显隐控制 +# 显隐控制 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

visibility

-

Visibility

-

Visible

-

控制当前组件显示或隐藏。

-
- -- Visibility枚举说明 - - - - - - - - - - - - - - - -

名称

-

描述

-

Hidden

-

隐藏，但参与布局进行占位。

-

Visible

-

显示。

-

None

-

隐藏，但不参与布局，不进行占位。

-
- - -## 示例 + +## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| visibility | Visibility | Visibility.Visible | 控制当前组件显示或隐藏。 | + + +- Visibility枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Hidden | 隐藏，但参与布局进行占位。 | + | Visible | 显示。 | + | None | 隐藏，但不参与布局，不进行占位。 | + + +## 示例 ``` @Entry @@ -83,5 +50,4 @@ struct VisibilityExample { } ``` -![](figures/visibility.gif) - +![zh-cn_image_0000001174104390](figures/zh-cn_image_0000001174104390.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md index 94f384440bd2f5d649fb35f96b32e0f66d370f61..44b12c4482f71352de12022b04dd858f577a641f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md @@ -1,37 +1,23 @@ -# Z序控制 +# Z序控制 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 属性 - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

zIndex

-

number

-

0

-

同一容器中兄弟组件显示层级关系，z值越大，显示层级越高。

-
- -## 示例 + +## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| zIndex | number | 0 | 同一容器中兄弟组件显示层级关系，z值越大，显示层级越高。 | + + +## 示例 ``` @Entry @@ -56,5 +42,4 @@ struct ZIndexExample { } ``` -![](figures/zIndex.png) - +![zh-cn_image_0000001174582860](figures/zh-cn_image_0000001174582860.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes.md index 3849fa6b3982007b7cfaea2d8048040ad916b682..669c73195512a689a49cd67170984d36483bedd7 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes.md @@ -1,45 +1,51 @@ -# 通用属性 +# 通用属性 -- **[尺寸设置](ts-universal-attributes-size.md)** +- **[尺寸设置](ts-universal-attributes-size.md)** -- **[位置设置](ts-universal-attributes-location.md)** +- **[位置设置](ts-universal-attributes-location.md)** -- **[布局约束](ts-universal-attributes-layout-constraints.md)** +- **[布局约束](ts-universal-attributes-layout-constraints.md)** -- **[Flex布局](ts-universal-attributes-flex-layout.md)** +- **[Flex布局](ts-universal-attributes-flex-layout.md)** -- **[边框设置](ts-universal-attributes-border.md)** +- **[边框设置](ts-universal-attributes-border.md)** -- **[背景设置](ts-universal-attributes-background.md)** +- **[背景设置](ts-universal-attributes-background.md)** -- **[透明度设置](ts-universal-attributes-opacity.md)** +- **[透明度设置](ts-universal-attributes-opacity.md)** -- **[显隐控制](ts-universal-attributes-visibility.md)** +- **[显隐控制](ts-universal-attributes-visibility.md)** -- **[禁用控制](ts-universal-attributes-enable.md)** +- **[禁用控制](ts-universal-attributes-enable.md)** -- **[浮层](ts-universal-attributes-overlay.md)** +- **[浮层](ts-universal-attributes-overlay.md)** -- **[Z序控制](ts-universal-attributes-z-order.md)** +- **[Z序控制](ts-universal-attributes-z-order.md)** -- **[图形变换](ts-universal-attributes-transformation.md)** +- **[图形变换](ts-universal-attributes-transformation.md)** -- **[图像效果](ts-universal-attributes-image-effect.md)** +- **[图像效果](ts-universal-attributes-image-effect.md)** -- **[形状裁剪](ts-universal-attributes-sharp-clipping.md)** +- **[形状裁剪](ts-universal-attributes-sharp-clipping.md)** -- **[文本样式设置](ts-universal-attributes-text-style.md)** +- **[文本样式设置](ts-universal-attributes-text-style.md)** -- **[栅格设置](ts-universal-attributes-grid.md)** +- **[栅格设置](ts-universal-attributes-grid.md)** -- **[颜色渐变](ts-universal-attributes-gradient-color.md)** +- **[颜色渐变](ts-universal-attributes-gradient-color.md)** -- **[Popup控制](ts-universal-attributes-popup.md)** +- **[Popup控制](ts-universal-attributes-popup.md)** -- **[Menu控制](ts-universal-attributes-menu.md)** +- **[Menu控制](ts-universal-attributes-menu.md)** -- **[点击控制](ts-universal-attributes-touchable.md)** +- **[点击控制](ts-universal-attributes-click.md)** -- **[触摸热区设置](ts-universal-attributes-response-region.md)** +- **[焦点控制](ts-universal-attributes-focus.md)** +- **[悬浮态效果](ts-universal-attributes-hover-effect.md)** +- **[组件标识](ts-universal-attributes-component-id.md)** + +- **[触摸热区设置](ts-universal-attributes-touch-target.md)** + +- **[多态样式](ts-universal-attributes-polymorphic-style.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md new file mode 100644 index 0000000000000000000000000000000000000000..2f92d04f541f9651fdb5cb3bba3334fd7c1bcbfc --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md @@ -0,0 +1,46 @@ +# 组件区域变化事件 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 权限列表 + +无 + + +## 事件 + +| 名称 | 支持冒泡 | 功能描述 | +| -------- | -------- | -------- | -------- | +| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | 否 | 组件区域变化时触发该回调，Area类型说明见[Area对象](../reference/arkui-ts/ts-universal-events-click.md)介绍。 | + + +## 示例 + +``` +@Entry +@Component +struct AreaExample { + @State value: string = 'Text' + @State size: string = '' + + build() { + Column() { + Text(this.value) + .backgroundColor(Color.Green).margin(30).fontSize(20) + .onClick(() => { + this.value = this.value + 'Text' + }) + .onAreaChange((oldValue: Area, newValue: Area) => { + console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) + this.size = JSON.stringify(newValue) + }) + Text('new area is: \n' + this.size).margin({ right: 30, left: 30 }) + } + .width('100%').height('100%').margin({ top: 30 }) + } +} +``` + +![zh-cn_image_0000001189634870](figures/zh-cn_image_0000001189634870.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-components.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-components.md index ce59ac8b9d6c89e4bb363f3a57fd9c74f081e2b5..bed379185ebea9ba44f1ed03d6779abc33d8b532 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-components.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-components.md @@ -1,9 +1,7 @@ -# 通用 +# 通用 -- **[通用事件](ts-universal-events.md)** - -- **[通用属性](ts-universal-attributes.md)** - -- **[手势处理](ts-gesture-processing.md)** +- **[通用事件](ts-universal-events.md)** +- **[通用属性](ts-universal-attributes.md)** +- **[手势处理](ts-gesture-processing.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md index 6a9daa3f1ca973879490def878dbeeab7561f4a1..2b3d823b05893456b7b9256810643c8b93b84b2e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md @@ -1,177 +1,51 @@ -# 点击事件 +# 点击事件 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 事件 - - - - - - - - - - - -

名称

-

支持冒泡

-

功能描述

-

onClick(callback: (event?: ClickEvent) => void)

-

否

-

点击动作触发该方法调用，event参数见ClickEvent介绍。

-
- -- ClickEvent对象说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性名称

-

类型

-

描述

-

screenX

-

number

-

点击点相对于设备屏幕左边沿的X坐标。

-

screenY

-

number

-

点击点相对于设备屏幕上边沿的Y坐标。

-

x

-

number

-

点击点相对于被点击元素左边沿的X坐标。

-

y

-

number

-

点击点相对于被点击元素上边沿的Y坐标。

-

target8+

-

EventTarget

-

被点击元素对象。

-

timestamp

-

number

-

事件时间戳。

-
- -- EventTarget对象说明8+ - - - - - - - - - - - -

名称

-

参数类型

-

描述

-

area

-

Area

-

目标元素的区域信息。

-
- -- Area对象说明8+ - - - - - - - - - - - - - - - - - - - - - - - -

属性名称

-

类型

-

描述

-

width

-

Length

-

目标元素的宽度。

-

height

-

Length

-

目标元素的高度。

-

pos

-

Position

-

目标元素左上角相对父元素左上角的位置。

-

globalPos

-

Position

-

目标元素左上角相对页面左上角的位置。

-
- -- Position对象说明8+ - - - - - - - - - - - - - - - -

属性名称

-

参数类型

-

描述

-

x

-

Length

-

x轴坐标。

-

y

-

Length

-

y轴坐标。

-
- - -## 示例 + +## 事件 + +| 名称 | 支持冒泡 | 功能描述 | +| -------- | -------- | -------- | -------- | +| onClick(callback: (event?: ClickEvent) => void) | 否 | 点击动作触发该方法调用，event参数见ClickEvent介绍。 | + +- ClickEvent对象说明 + | 属性名称 | 类型 | 描述 | + | -------- | -------- | -------- | + | screenX | number | 点击点相对于设备屏幕左边沿的X坐标。 | + | screenY | number | 点击点相对于设备屏幕上边沿的Y坐标。 | + | x | number | 点击点相对于被点击元素左边沿的X坐标。 | + | y | number | 点击点相对于被点击元素上边沿的Y坐标。 | + | target8+ | EventTarget | 被点击元素对象。 | + | timestamp | number | 事件时间戳。 | + +- EventTarget对象说明8+ + | 名称 | 参数类型 | 描述 | + | -------- | -------- | -------- | + | area | Area | 目标元素的区域信息。 | + +- Area对象说明8+ + | 属性名称 | 类型 | 描述 | + | -------- | -------- | -------- | + | width | number | 目标元素的宽度，单位为vp。 | + | height | number | 目标元素的高度，单位为vp。 | + | pos | Position | 目标元素左上角相对父元素左上角的位置。 | + | globalPos | Position | 目标元素左上角相对页面左上角的位置。 | + +- Position对象说明8+ + | 属性名称 | 参数类型 | 描述 | + | -------- | -------- | -------- | + | x | number | x轴坐标，单位为vp。 | + | y | number | y轴坐标，单位为vp。 | + + +## 示例 ``` @Entry @@ -184,9 +58,9 @@ struct ClickExample { Button('Click').backgroundColor(0x2788D9).width(100).height(40) .onClick((event: ClickEvent) => { console.info(this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY - + '\n x :' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos：（' - + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + '）\n width:' - + event.target.area.width + '\n height：' + event.target.area.height) + + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:(' + + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\n width:' + + event.target.area.width + '\n height:' + event.target.area.height) }) Text(this.text).padding(15) }.height(350).width('100%').padding(10) @@ -194,5 +68,5 @@ struct ClickExample { } ``` -![](figures/zh-cn_image_0000001237355087.gif) +![zh-cn_image_0000001210353788](figures/zh-cn_image_0000001210353788.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-component-area-change.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-component-area-change.md deleted file mode 100644 index 3a426f2019d4784180c7443617ff6e91667bde36..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-component-area-change.md +++ /dev/null @@ -1,58 +0,0 @@ -# 组件区域变化事件 - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -## 权限列表 - -无 - -## 事件 - - - - - - - - - - - -

名称

-

支持冒泡

-

功能描述

-

onAreaChange(event: (oldValue: Area, newValue: Area) => void)

-

否

-

组件区域变化时触发该回调，Area类型说明见Area对象介绍。

-
- -## 示例 - -``` -@Entry -@Component -struct AreaExample { - @State value: string = 'Text' - @State size: string = '' - - build() { - Column() { - Text(this.value) - .backgroundColor(Color.Green).margin(30).fontSize(20) - .onClick(() => { - this.value = this.value + 'Text' - }) - .onAreaChange((oldValue: Area, newValue: Area) => { - console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) - this.size = JSON.stringify(newValue) - }) - Text('new area is: \n' + this.size).margin({ right: 30, left: 30 }) - } - .width('100%').height('100%').margin({ top: 30 }) - } -} -``` - -![](figures/GIF4.gif) - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md new file mode 100644 index 0000000000000000000000000000000000000000..b8f35086cf464d11191a8604497f9f3bba51fd33 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md @@ -0,0 +1,142 @@ +# 拖拽事件 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +| 名称 | 支持冒泡 | 功能描述 | +| -------- | -------- | -------- | +| onDragStart(callback: (event: DragEvent, extraParams?: string) =>  [CustomBuilder](../../ui/ts-types.md#custombuilder类型8+)) | 否 | 第一次拖拽此事件绑定的组件时，触发回调。
event：拖拽事件信息，包括拖拽点坐标。
extraParams：拖拽事件额外信息，详见extraParam类型描述。
返回值：当前跟手效果所拖拽的对象，用于显示拖拽时的提示组件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 长按150毫秒(ms)可触发拖拽事件。
> - 优先级：长按手势配置时间小于等于150毫秒(ms)时，长按手势优先触发，否则拖拽事件优先触发。 | +| onDragEnter(callback: (event: DragEvent, extraParams?: string) => void) | 否 | 拖拽进入组件范围内时，触发回调。
event：拖拽事件信息，包括拖拽点坐标。
extraParams：拖拽事件额外信息，详见extraParam类型描述。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 当监听了onDrop事件时，此事件才有效。 | +| onDragMove(callback: (event: DragEvent, extraParams?: string) => void) | 否 | 拖拽在组件范围内移动时，触发回调。
event：拖拽事件信息，包括拖拽点坐标。
extraParams：拖拽事件额外信息，详见extraParam类型描述。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 当监听了onDrop事件时，此事件才有效。 | +| onDragLeave(callback: (event: DragEvent, extraParams?: string) => void) | 否 | 拖拽离开组件范围内时，触发回调。
event：拖拽事件信息，包括拖拽点坐标。
extraParams：拖拽事件额外信息，详见extraParam类型描述。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 当监听了onDrop事件时，此事件才有效。 | +| onDrop(callback: (event: DragEvent, extraParams?: string) => void) | 否 | 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。
event：拖拽事件信息，包括拖拽点坐标。
extraParams：拖拽事件额外信息，详见extraParam类型描述。 | + + +- DragEvent对象说明 + | 名称 | 返回值类型 | 功能描述 | + | -------- | -------- | -------- | + | getX() | number | 当前拖拽点x轴坐标，单位为vp。 | + | getY() | number | 当前拖拽点y轴坐标，单位为vp。 | + +- extraParam说明 + 用于返回组件在拖拽中需要用到的额外信息。 + + extraParam是Json对象转换的string字符串，可以通过Json.parse转换的Json对象获取如下属性。 + | 属性名称 | 属性类型 | 描述 | + | -------- | -------- | -------- | + | selectedIndex | number | 当拖拽事件设在父容器的子元素时，selectedIndex表示当前被拖拽子元素是父容器第selectedIndex个子元素，selectedIndex从0开始。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅在ListItem组件中生效。 | + | insertIndex | number | 当前拖拽元素在List组件中放下时，insertIndex表示被拖拽元素插入该组件的第insertIndex个位置，insertIndex从0开始。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅在List组件的拖拽事件中生效。 | + + +## 示例 + +``` +@Entry +@Component +struct DragExample { + @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six'] + @State text: string = '' + @State bool: boolean = false + @State bool1: boolean = false + @State size: string = '' + @State appleVisible: Visibility = Visibility.Visible + @State orangeVisible: Visibility = Visibility.Visible + @State bananaVisible: Visibility = Visibility.Visible + @State select: number = 0 + @State currentIndex: number = 0 + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width('50%').height(60).fontSize(16).borderRadius(10) + .textAlign(TextAlign.Center).backgroundColor(Color.Yellow) + } + } + + build() { + Column() { + Text('There are three Text elements here') + .fontSize(12).fontColor(0xCCCCCC).width('90%') + .textAlign(TextAlign.Start).margin(5) + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) { + Text('apple').width('25%').height(35).fontSize(16) + .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) + .visibility(this.appleVisible) + .onDragStart(() => { + this.bool = true + this.text = 'apple' + this.appleVisible = Visibility.Hidden + return this.pixelMapBuilder + }) + Text('orange').width('25%').height(35).fontSize(16) + .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) + .visibility(this.orangeVisible) + .onDragStart(() => { + this.bool = true + this.text = 'orange' + this.orangeVisible = Visibility.Hidden + return this.pixelMapBuilder + }) + Text('banana').width('25%').height(35).fontSize(16) + .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) + .visibility(this.bananaVisible) + .onDragStart((event: DragEvent, extraParams: string) => { + console.log('Text onDragStarts, ' + extraParams) + this.bool = true + this.text = 'banana' + this.bananaVisible = Visibility.Hidden + return this.pixelMapBuilder + }) + }.border({ width: 1 }).width('90%').padding({ top: 10, bottom: 10 }).margin(10) + + Text('This is a List element').fontSize(12) + .fontColor(0xCCCCCC).width('90%') + .textAlign(TextAlign.Start).margin(15) + List({ space: 20, initialIndex: 0 }) { + ForEach(this.numbers, (item) => { + ListItem() { + Text('' + item) + .width('100%').height(80).fontSize(16).borderRadius(10) + .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) + } + .onDragStart((event: DragEvent, extraParams: string) => { + console.log('ListItem onDragStarts, ' + extraParams) + var jsonString = JSON.parse(extraParams) + this.bool1 = true + this.text = this.numbers[jsonString.selectedIndex] + this.select = jsonString.selectedIndex + return this.pixelMapBuilder + }) + }, item => item) + } + .editMode(true) + .height('50%').width('90%').border({ width: 1 }) + .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) + .onDragEnter((event: DragEvent, extraParams: string) => { + console.log('List onDragEnter, ' + extraParams) + }) + .onDragMove((event: DragEvent, extraParams: string) => { + console.log('List onDragMove, ' + extraParams) + }) + .onDragLeave((event: DragEvent, extraParams: string) => { + console.log('List onDragLeave, ' + extraParams) + }) + .onDrop((event: DragEvent, extraParams: string) => { + var jsonString = JSON.parse(extraParams) + if (this.bool) { + this.numbers.splice(jsonString.insertIndex, 0, this.text) + this.bool = false + } else if (this.bool1) { + this.numbers.splice(jsonString.selectedIndex, 1) + this.numbers.splice(jsonString.insertIndex, 0, this.text) + this.bool = false + this.bool1 = false + } + }) + }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 }) + } +} +``` + +![zh-cn_image_0000001252667389](figures/zh-cn_image_0000001252667389.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md index bbe8be6ad262c402e7c355cee3a86f43e747b3b8..a19618ddc7aed0e7626f08093d4cc78138c6e213 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md @@ -1,220 +1,66 @@ -# 按键事件 +# 按键事件 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 事件 - - - - - - - - - - - -

名称

-

支持冒泡

-

功能描述

-

onKeyEvent(event: (event?: KeyEvent) => void)

-

是

-

按键动作触发该方法调用，event参数见KeyEvent介绍。

-
- -## KeyEvent对象说明 - -- 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性名称

-

类型

-

描述

-

type

-

KeyType

-

按键的类型。

-

keyCode

-

number

-

按键的键码。

-

keyText

-

string

-

按键的键值。

-

keySource

-

KeySource

-

触发当前按键的输入设备类型。

-

deviceId

-

number

-

触发当前按键的输入设备ID。

-

metaKey

-

number

-

按键发生时元键的状态，1表示按压态，0表示未按压态。

-

timestamp

-

number

-

按键发生时的时间戳。

-
- - -- 接口 - - - - - - - - - -

接口名称

-

功能描述

-

stopPropagation(): void

-

阻塞事件冒泡传递。

-
- -- KeyType枚举说明 - - - - - - - - - - - - -

名称

-

描述

-

Down

-

按键按下。

-

Up

-

按键松开。

-
- - -- KeySource枚举说明 - - - - - - - - - - - - -

名称

-

描述

-

Unknown

-

输入设备类型未知。

-

Keyboard

-

输入设备类型为键盘。

-
- -- 常用KeyCode说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

数值

-

行为

-

物理按键

-

19

-

上

-

向上方向键。

-

20

-

下

-

向下方向键。

-

21

-

左

-

向左方向键。

-

22

-

右

-

向右方向键。

-

23

-

确定

-

遥控器的确认键。

-

66

-

确定

-

键盘的回车键。

-

160

-

确定

-

键盘的小键盘回车键。

-
- - -## 示例 + +## 事件 + +| 名称 | 支持冒泡 | 功能描述 | +| -------- | -------- | -------- | -------- | +| onKeyEvent(event: (event?: KeyEvent) => void) | 是 | 按键动作触发该方法调用，event参数见[KeyEvent](#keyevent对象说明)介绍。 | + + +## KeyEvent对象说明 + +- 属性 + | 属性名称 | 类型 | 描述 | + | -------- | -------- | -------- | + | type | KeyType | 按键的类型。 | + | keyCode | number | 按键的键码。 | + | keyText | string | 按键的键值。 | + | keySource | KeySource | 触发当前按键的输入设备类型。 | + | deviceId | number | 触发当前按键的输入设备ID。 | + | metaKey | number | 按键发生时元键的状态，1表示按压态，0表示未按压态。 | + | timestamp | number | 按键发生时的时间戳。 | + + +- 接口 + | 接口名称 | 功能描述 | + | -------- | -------- | + | stopPropagation(): void | 阻塞事件冒泡传递。 | + +- KeyType枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Down | 按键按下。 | + | Up | 按键松开。 | + + +- KeySource枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Unknown | 输入设备类型未知。 | + | Keyboard | 输入设备类型为键盘。 | + +- 常用KeyCode说明 + | 数值 | 行为 | 物理按键 | + | -------- | -------- | -------- | + | 19 | 上 | 向上方向键。 | + | 20 | 下 | 向下方向键。 | + | 21 | 左 | 向左方向键。 | + | 22 | 右 | 向右方向键。 | + | 23 | 确定 | 遥控器的确认键。 | + | 66 | 确定 | 键盘的回车键。 | + | 160 | 确定 | 键盘的小键盘回车键。 | + + +## 示例 ``` @Entry @@ -241,5 +87,4 @@ struct KeyEventExample { } ``` -![](figures/KeyEvent.gif) - +![zh-cn_image_0000001174264364](figures/zh-cn_image_0000001174264364.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md index 5b8e963cf740c6093547445359f5772e9a3573cf..351eeda3d1544970825acc9e11a73ffdb7ce7c6d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md @@ -1,40 +1,23 @@ -# 挂载卸载事件 +# 挂载卸载事件 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 事件 - - - - - - - - - - - - - - -

名称

-

支持冒泡

-

功能描述

-

onAppear(callback: () => void)

-

否

-

组件挂载显示时触发此回调。

-

onDisappear(callback: () => void)

-

否

-

组件卸载消失时触发此回调。

-
+## 事件 + +| 名称 | 支持冒泡 | 功能描述 | +| -------- | -------- | -------- | -------- | +| onAppear(callback: () => void) | 否 | 组件挂载显示时触发此回调。 | +| onDisappear(callback: () => void) | 否 | 组件卸载消失时触发此回调。 | -## 示例 + +## 示例 ``` import prompt from '@system.prompt' @@ -68,5 +51,4 @@ struct AppearExample { } ``` -![](figures/appear.gif) - +![zh-cn_image_0000001219864151](figures/zh-cn_image_0000001219864151.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md index 938d317b997269fcd6ed3e95dd41f0820071dfb7..0af93b6cce52e66bde51e18fede8bc2ac6ee33b9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md @@ -1,189 +1,60 @@ -# 触摸事件 +# 触摸事件 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 + +## 权限列表 无 -## 事件 - - - - - - - - - - - -

名称

-

是否冒泡

-

功能描述

-

onTouch(callback: (event?: TouchEvent) => void)

-

是

-

触摸动作触发该方法调用，event参数见TouchEvent介绍。

-
- -## TouchEvent对象说明 - -- 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性名称

-

类型

-

描述

-

type

-

TouchType

-

触摸事件的类型。

-

touches

-

Array<TouchObject>

-

全部手指信息。

-

changedTouches

-

Array<TouchObject>

-

当前发生变化的手指信息。

-

timestamp

-

number

-

事件时间戳。

-

target8+

-

EventTarget

-

被触摸元素对象。

-
- - -- 接口 - - - - - - - - - -

接口名称

-

功能描述

-

stopPropagation()：void

-

阻塞事件冒泡。

-
- - -- TouchObject对象说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性名称

-

类型

-

描述

-

type

-

TouchType

-

触摸事件的类型。

-

id

-

number

-

手指唯一标识符。

-

screenX

-

number

-

触摸点相对于设备屏幕左边沿的X坐标。

-

screenY

-

number

-

触摸点相对于设备屏幕上边沿的Y坐标。

-

x

-

number

-

触摸点相对于被触摸元素左边沿的X坐标。

-

y

-

number

-

触摸点相对于被触摸元素上边沿的Y坐标。

-
- - -- TouchType枚举说明 - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

Down

-

手指按下时触发。

-

Up

-

手指抬起时触发。

-

Move

-

手指按压态在屏幕上移动时触发。

-

Cancel

-

触摸事件取消时触发。

-
- - -## 示例 + +## 事件 + +| 名称 | 是否冒泡 | 功能描述 | +| -------- | -------- | -------- | -------- | +| onTouch(callback: (event?: TouchEvent) => void) | 是 | 触摸动作触发该方法调用，event参数见[TouchEvent](#touchevent对象说明)介绍。 + + +## TouchEvent对象说明 + +- 属性 + | 属性名称 | 类型 | 描述 | + | -------- | -------- | -------- | + | type | TouchType | 触摸事件的类型。 | + | touches | ArrayTouchObject> | 全部手指信息。 | + | changedTouches | ArrayTouchObject> | 当前发生变化的手指信息。 | + | timestamp | number | 事件时间戳。 | + | target8+ | [EventTarget](ts-universal-events-click.md)| 被触摸元素对象。 | + + +- 接口 + | 接口名称 | 功能描述 | + | -------- | -------- | + | stopPropagation()：void | 阻塞事件冒泡。 | + + +- TouchObject对象说明 + | 属性名称 | 类型 | 描述 | + | -------- | -------- | -------- | + | type | TouchType | 触摸事件的类型。 | + | id | number | 手指唯一标识符。 | + | screenX | number | 触摸点相对于设备屏幕左边沿的X坐标。 | + | screenY | number | 触摸点相对于设备屏幕上边沿的Y坐标。 | + | x | number | 触摸点相对于被触摸元素左边沿的X坐标。 | + | y | number | 触摸点相对于被触摸元素上边沿的Y坐标。 | + + +- TouchType枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Down | 手指按下时触发。 | + | Up | 手指抬起时触发。 | + | Move | 手指按压态在屏幕上移动时触发。 | + | Cancel | 触摸事件取消时触发。 | + + +## 示例 ``` @Entry @@ -206,9 +77,9 @@ struct TouchExample { this.eventType = 'Move' } console.info(this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' - + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\ncomponent globalPos：（' - + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + '）\nwidth:' - + event.target.area.width + '\nheight：' + event.target.area.height) + + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\ncomponent globalPos:(' + + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\nwidth:' + + event.target.area.width + '\nheight:' + event.target.area.height) }) Text(this.text) }.height(200).width(350).padding({ left: 35, right: 35, top: 35 }) @@ -216,5 +87,4 @@ struct TouchExample { } ``` -![](figures/zh-cn_image_0000001192915178.gif) - +![zh-cn_image_0000001209874754](figures/zh-cn_image_0000001209874754.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events.md index 2b2e7bf9cdfd88780a0671780d482ab0efa89b6f..7e4e932c92f89fb90e62ede96fe9a36cea90f402 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events.md @@ -1,13 +1,18 @@ -# 通用事件 +# 通用事件 -- **[点击事件](ts-universal-events-click.md)** +- **[点击事件](ts-universal-events-click.md)** -- **[触摸事件](ts-universal-events-touch.md)** +- **[触摸事件](ts-universal-events-touch.md)** -- **[挂载卸载事件](ts-universal-events-show-hide.md)** +- **[挂载卸载事件](ts-universal-events-show-hide.md)** -- **[按键事件](ts-universal-events-key.md)** +- **[拖拽事件](ts-universal-events-drag-drop.md)** -- **[组件区域变化事件](ts-universal-events-component-area-change.md)** +- **[按键事件](ts-universal-events-key.md)** +- **[焦点事件](ts-universal-focus-event.md)** + +- **[鼠标事件](ts-universal-mouse-key.md)** + +- **[组件区域变化事件](ts-universal-component-area-change-event.md)** diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md new file mode 100644 index 0000000000000000000000000000000000000000..b816e134e544ffbc07b91d9946fb74ec0527e2d4 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md @@ -0,0 +1,69 @@ +# 焦点事件 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 权限列表 + +无 + + +## 事件 + +| **名称** | **支持冒泡** | **功能描述** | +| -------- | -------- | -------- | +| onFocus(callback: () => void) | 否 | 当前组件获取焦点时触发的回调。 | +| onBlur(callback:() => void) | 否 | 当前组件失去焦点时触发的回调。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 支持焦点事件的组件：Button、Text、Image、List、Grid。 + + +## 示例 + +``` +@Entry +@Component +struct FocusEventExample { + @State textOne: string = '' + @State textTwo: string = '' + @State textThree: string = '' + @State oneButtonColor: string = '#FF0000' + @State twoButtonColor: string = '#87CEFA' + @State threeButtonColor: string = '#90EE90' + + build() { + Column({ space:20 }){ + Button(this.textOne) + .backgroundColor(this.oneButtonColor) + .width(260).height(70).fontColor(Color.Black) + .focusable(true) + .onFocus(() => { + this.textOne = 'First Button onFocus' + this.oneButtonColor = '#AFEEEE' + }) + .onBlur(() => { + this.textOne = 'First Button onBlur' + this.oneButtonColor = '#FFC0CB' + }) + Button(this.textTwo) + .backgroundColor(this.twoButtonColor) + .width(260).height(70).fontColor(Color.Black) + .focusable(true) + Button(this.textThree) + .backgroundColor(this.threeButtonColor) + .width(260).height(70).fontColor(Color.Black) + .focusable(true) + .onFocus(() => { + this.textThree = 'Third Button onFocus' + this.threeButtonColor = '#AFEEEE' + }) + .onBlur(() => { + this.textThree = 'Third Button onBlur' + this.threeButtonColor = '#FFC0CB' + }) + }.width('100%').margin({ top:20 }) + } +} +``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md new file mode 100644 index 0000000000000000000000000000000000000000..26d34ecc321f5e3b63371a5fea75efeb21416a5a --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md @@ -0,0 +1,83 @@ +# 鼠标事件 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 权限列表 + +无 + + +## 事件 + +| 名称 | 支持冒泡 | 描述 | +| -------- | -------- | -------- | +| onHover(callback: (isHover: boolean) => void) | 否 | 鼠标进入或退出组件时触发该回调。
isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true, 退出时为false。 | +| onMouse(callback: (event?: MouseEvent) => void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上移动时，触发该回调，event参数包含触发事件时的时间戳、鼠标按键、动作、点击触点在整个屏幕上的坐标和点击触点相对于当前组件的坐标。 | + + +- MouseEvent对象说明 + | 属性名称 | 属性类型 | 描述 | + | -------- | -------- | -------- | + | timestamp | number | 触发事件时的时间戳。 | + | screenX | number | 点击触点相对于屏幕左上角的x轴坐标。 | + | screenY | number | 点击触点相对于屏幕左上角的y轴坐标。 | + | x | number | 点击触点相对于当前组件左上角的x轴坐标。 | + | y | number | 点击触点相对于当前组件左上角的y轴坐标。 | + | button | MouseButton | 鼠标按键。 | + | action | MouseAction | 事件动作。 | + + +- MouseButton类型说明 + | 属性名称 | 属性类型 | 描述 | + | -------- | -------- | -------- | + | Left | number | 鼠标左键。 | + | Right | number | 鼠标右键。 | + | Middle | number | 鼠标中键。 | + | Back | number | 鼠标左侧后退键。 | + | Forward | number | 鼠标左侧前进键。 | + | None | number | 无按键。 | + +- MouseAction类型说明 + | 属性名称 | 属性类型 | 描述 | + | -------- | -------- | -------- | + | Press | number | 鼠标按键按下。 | + | Release | number | 鼠标按键松开。 | + | Move | number | 鼠标移动。 | + + +## 示例 + +``` +@Entry +@Component +struct MouseEventExample { + @State hoverText: string = 'no hover' + @State mouseText: string = 'MouseText' + @State color: Color = Color.Blue + + build() { + Column({ space:20 }) { + Button(this.hoverText) + .onHover((isHover: boolean) => { + if (isHover) { + this.hoverText = 'on hover' + this.color = Color.Pink + } else { + this.hoverText = 'no hover' + this.color = Color.Blue + } + }) + .backgroundColor(this.color) + Button('onMouse') + .onMouse((event: MouseEvent) => { + console.log(this.mouseText = 'onMouse:\nButton = ' + event.button + + '\nAction = ' + event.action + '\nlocalXY=(' + event.x + ',' + event.y + ')' + + '\nscreenXY=(' + event.screenX + ',' + event.screenY + ')') + }) + Text(this.mouseText) + }.padding({ top: 20 }).width('100%') + } +} +``` diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174104404.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174104404.png new file mode 100644 index 0000000000000000000000000000000000000000..e370a44cf043fc34bd8891f57faad2cd2ca05707 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174104404.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174264376.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174264376.png new file mode 100644 index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174264376.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174422914.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174422914.png new file mode 100644 index 0000000000000000000000000000000000000000..bc28f5056c679e189543c8ad6fba67fb56db7655 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174422914.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174582864.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174582864.png new file mode 100644 index 0000000000000000000000000000000000000000..b54dbc2391d1a8f16312dd02dc3d65a35ea2626f Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174582864.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174582866.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174582866.png new file mode 100644 index 0000000000000000000000000000000000000000..56d32d4cd371c5374b133cb81c9c077aaf7b110d Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174582866.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001206450834.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001206450834.png index d2e430e8d79689719c884bdab96c0da4e0be2a4d..451c2869775b6b9a68171eca6f3b2ba53f7aff4b 100644 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001206450834.png and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001206450834.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219662661.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219662661.png new file mode 100644 index 0000000000000000000000000000000000000000..9c43caf5fdfd466eafc37b793f509a6bde2b885d Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219662661.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219662663.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219662663.png new file mode 100644 index 0000000000000000000000000000000000000000..5c5e360f249a2002ba68ad9b94bd7f66f5d6aab1 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219662663.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219662665.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219662665.png new file mode 100644 index 0000000000000000000000000000000000000000..309d1c46f8bc396df5eaed381a5ffa2f0389d602 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219662665.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219744201.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219744201.png new file mode 100644 index 0000000000000000000000000000000000000000..0d22570503febc7a7dcba0d1e870f49f32fe489a Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219744201.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219864153.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219864153.png new file mode 100644 index 0000000000000000000000000000000000000000..58293d5e874f2aa36ecaf7282ca9e4736318092f Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219864153.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219982719.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219982719.png new file mode 100644 index 0000000000000000000000000000000000000000..fde616c73000d3f58fd98eea59088177221127a5 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219982719.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001251090821.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001251090821.png index 44f42f4dea3de06ad2252079616d61595dd5674e..8dfe0814355dcbe52ceb2126ce32ceac8a725804 100644 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001251090821.png and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001251090821.png differ diff --git a/zh-cn/application-dev/ui/ts-a-deep-dive-into-component.md b/zh-cn/application-dev/ui/ts-a-deep-dive-into-component.md index da2f9bf87f951ed5f7601ab5842aab6b2e5109ac..4889ce7ad64db2fd46c30407ce7de0e21f84027c 100644 --- a/zh-cn/application-dev/ui/ts-a-deep-dive-into-component.md +++ b/zh-cn/application-dev/ui/ts-a-deep-dive-into-component.md @@ -1,11 +1,9 @@ -# 深入理解组件化 +# 深入理解组件化 -- **[build函数](ts-function-build.md)** +- **[build函数](ts-function-build.md)** -- **[自定义组件成员变量初始化](ts-custom-component-initialization.md)** - -- **[自定义组件生命周期回调函数](ts-custom-component-lifecycle-callbacks.md)** - -- **[组件创建和重新初始化示例](ts-component-creation-re-initialization.md)** +- **[自定义组件成员变量初始化](ts-custom-component-initialization.md)** +- **[自定义组件生命周期回调函数](ts-custom-component-lifecycle-callbacks.md)** +- **[组件创建和重新初始化](ts-component-creation-re-initialization.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-application-states-apis-environment.md b/zh-cn/application-dev/ui/ts-application-states-apis-environment.md index a1c08ac5a070d3c30f498f990e754a0f8e3d5075..b9582c1867cd31b214bdb36e9f5336d10ffce2f4 100644 --- a/zh-cn/application-dev/ui/ts-application-states-apis-environment.md +++ b/zh-cn/application-dev/ui/ts-application-states-apis-environment.md @@ -1,115 +1,33 @@ -# 环境变量 +# 环境变量 **Environment**是框架在应用程序启动时创建的单例对象，它为**AppStorage**提供了一系列应用程序需要的环境状态属性，这些属性描述了应用程序运行的设备环境。**Environment**及其属性是不可变的，所有属性值类型均为简单类型。如下示例展示了从**Environment**获取语音环境： + ``` Environment.EnvProp("accessibilityEnabled", "default"); var enable = AppStorageGet("accessibilityEnabled"); ``` -**accessibilityEnabled**是**Environment**提供默认系统变量识别符。首先需要将对应系统属性绑定到**Appstorage**中，再通过AppStorage中的方法或者装饰器访问对应系统的属性数据。 -## Environment接口 +**accessibilityEnabled**是**Environment**提供默认系统变量识别符。首先需要将对应系统属性绑定到AppStorage中，再通过AppStorage中的方法或者装饰器访问对应系统的属性数据。 + + +## Environment接口 + +| **key** | 参数 | 返回值 | **说明** | +| -------- | -------- | -------- | -------- | +| EnvProp | key: string,
defaultValue: any | boolean | 关联此系统项到AppStorage中，建议在app启动时使用此接口。如果该属性在AppStorage已存在，返回false。请勿使用AppStorage中的变量，在调用此方法关联环境变量。 | +| EnvProps | keys: {
key: string,
defaultValue: any
}[] | void | 关联此系统项数组到AppStorage中。 | +| Keys | Array<string> | number | 返回关联的系统项。 | - - - - - - - - - - - - - - - - - - - - - - - -

key

-

参数

-

返回值

-

说明

-

EnvProp

-

key: string，

-

defaultValue: any

-

boolean

-

关联此系统项到Appstorage中，建议在app启动时使用此接口。如果该属性在Appstorage已存在，返回false。请勿使用AppStorage中的变量，在调用此方法关联环境变量。

-

EnvProps

-

keys: {

-

key: string,

-

defaultValue: any

-

}[]

-

void

-

关联此系统项数组到Appstorage中。

-

Keys

-

Array<string>

-

number

-

返回关联的系统项。

-
-## Environment内置的环境变量 +## Environment内置的环境变量 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

key

-

类型

-

说明

-

accessibilityEnabled

-

boolean

-

无障碍屏幕朗读是否启用。

-

colorMode

-

ColorMode

-

深浅色模式，可选值为：

-
  • ColorMode.LIGHT：浅色模式；
  • ColorMode.DARK：深色模式。
-

fontScale

-

number

-

字体大小比例，取值范围为[0.85, 1.45]。

-

fontWeightScale

-

number

-

字体权重比例，取值范围为[0.6, 1.6]。

-

layoutDirection

-

LayoutDirection

-

布局方向类型，可选值为：

-
  • LayoutDirection.LTR：从左到右；
  • LayoutDirection.RTL：从右到左。
-

languageCode

-

string

-

设置当前系统的语言，小写字母，例如zh。

-
+| **key** | **类型** | **说明** | +| -------- | -------- | -------- | +| accessibilityEnabled | boolean | 无障碍屏幕朗读是否启用。 | +| colorMode | ColorMode | 深浅色模式，可选值为：
- ColorMode.LIGHT：浅色模式；
- ColorMode.DARK：深色模式。 | +| fontScale | number | 字体大小比例，取值范围为[0.85, 1.45]。 | +| fontWeightScale | number | 字体权重比例，取值范围为[0.6, 1.6]。 | +| layoutDirection | LayoutDirection | 布局方向类型，可选值为：
- LayoutDirection.LTR：从左到右；
- LayoutDirection.RTL：从右到左。 | +| languageCode | string | 设置当前系统的语言，小写字母，例如zh。 | diff --git a/zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md b/zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md index 368ed2e8a8f51e0769dac141208022ff5255ae18..b3aff456d882863047e7dced6230e791716e62d4 100644 --- a/zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md +++ b/zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md @@ -1,66 +1,21 @@ -# 持久化数据管理 +# 持久化数据管理 方舟开发框架通过**PersistentStorage**类提供了一些静态方法用来管理应用持久化数据，可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink装饰器来访问对应key的变量。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

方法

-

参数说明

-

返回值

-

定义

-

PersistProp

-

key : string

-

defaultValue: T

-

void

-

关联命名的属性在AppStorage变为持久化数据，赋值覆盖顺序如下：

-
  • 首先，如果该属性存在于AppStorage，将Persistent中的数据复写为AppStorage中的属性值。
  • 其次，Persistent中有此命名的属性，使用Persistent中的属性值。
-
  • 最后，以上条件均不满足，则使用defaultValue，不支持null和undefined。
-

DeleteProp

-

key: string

-

void

-

取消双向数据绑定，该属性值将从持久存储中删除。

-

PersistProps

-

keys: {

-

key: string,

-

defaultValue: any

-

}[]

-

void

-

关联多个命名的属性绑定。

-

Keys

-

void

-

Array<string>

-

返回所有持久化属性的标记。

-
->![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->- PersistProp接口使用时，需要保证输入对应的key应当在Appstorage存在。 ->- DeleteProp接口使用时，只能对本次启动已经link过的数据生效。 +| 方法 | 参数说明 | 返回值 | 定义 | +| -------- | -------- | -------- | -------- | +| PersistProp | key : string
defaultValue: T | void | 关联命名的属性在AppStorage变为持久化数据，赋值覆盖顺序如下：
- 首先，如果该属性存在于AppStorage，将Persistent中的数据复写为AppStorage中的属性值。
- 其次，Persistent中有此命名的属性，使用Persistent中的属性值。
- 最后，以上条件均不满足，则使用defaultValue，不支持null和undefined。 | +| DeleteProp | key: string | void | 取消双向数据绑定，该属性值将从持久存储中删除。 | +| PersistProps | keys: {
key: string,
defaultValue: any
}[] | void | 关联多个命名的属性绑定。 | +| Keys | void | Array<string> | 返回所有持久化属性的标记。 | + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - PersistProp接口使用时，需要保证输入对应的key应当在AppStorage存在。 +> +> - DeleteProp接口使用时，只能对本次启动已经link过的数据生效。 + ``` PersistentStorage.PersistProp("highScore", "0"); @@ -88,4 +43,3 @@ struct PersistentComponent { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-application-states-appstorage.md b/zh-cn/application-dev/ui/ts-application-states-appstorage.md index 63761d8b39fac86425ab9727a8c48e2df7ee8ee3..db91c87499216d52b317ef2c404da26d75e4821f 100644 --- a/zh-cn/application-dev/ui/ts-application-states-appstorage.md +++ b/zh-cn/application-dev/ui/ts-application-states-appstorage.md @@ -1,162 +1,56 @@ -# 应用程序的数据存储 +# 应用程序的数据存储 + +**AppStorage**是应用程序中的单例对象，由UI框架在应用程序启动时创建，在应用程序退出时销毁，为应用程序范围内的可变状态属性提供中央存储。**AppStorage**包含整个应用程序中需要访问的所有状态属性，只要应用程序保持运行，**AppStorage**就会保存所有属性及属性值，属性值可以通过唯一的键值进行访问。 -**AppStorage**是应用程序中的单例对象，由UI框架在应用程序启动时创建，在应用程序退出退出时销毁，为应用程序范围内的可变状态属性提供中央存储。**AppStorage**包含整个应用程序中需要访问的所有状态属性，只要应用程序保持运行，**AppStorage**就会保存所有属性及属性值，属性值可以通过唯一的键值进行访问。 UI组件可以通过装饰器将应用程序状态数据与**AppStorage**进行同步，应用业务逻辑的实现也可以通过接口访问**AppStorage**。 + **AppStorage**的选择状态属性可以与不同的数据源或数据接收器同步，这些数据源和接收器可以是设备上的本地或远程，并具有不同的功能，如数据持久性。这样的数据源和接收器可以独立于UI在业务逻辑中实现。 + 默认情况下，**AppStorage**中的属性是可变的，**AppStorage**还可使用不可变（只读）属性。 -## AppStorage接口 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

方法

-

参数说明

-

返回值

-

定义

-

SetAndLink

-

key: string,

-

defaultValue: T

-

@Link

-

与Link接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Link返回。

-

Set

-

key: string,

-

newValue: T

-

void

-

对已保存的key值，替换其value值。

-

Link

-

key: string

-

@Link

-

如果存在具有给定键的数据，则返回到此属性的双向数据绑定，该双向绑定意味着变量或者组件对数据的更改将同步到AppStorage，通过AppStorage对数据的修改将同步到变量或者组件。如果具有此键的属性不存在或属性为只读，则返回undefined。

-

SetAndProp

-

propName: string,

-

defaultValue: S

-

@Prop

-

与Prop接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Prop返回。

-

Prop

-

key: string

-

@Prop

-

如果存在具有给定键的属性，则返回此属性的单向数据绑定。该单向绑定意味着只能通过AppStorage将属性的更改同步到变量或者组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态属性，如果具有此键的属性不存在则返回undefined。

-
说明：

prop方法对应的属性值类型为简单类型。

-
-

SetOrCreate

-

key: string,

-

newValue: T

-

boolean

-

如果相同名字的属性存在：如果此属性可以被更改返回true，否则返回false。

-

如果相同名字的属性不存在：创建第一个赋值为defaultValue的属性，不支持null和undefined。

-

Get

-

key: string

-

T或undefined

-

通过此接口获取对应key值的value。

-

Has

-

propName: string

-

boolean

-

判断对应键值的属性是否存在。

-

Keys

-

void

-

array<string>

-

返回包含所有键的字符串数组。

-

Delete

-

key: string

-

boolean

-

删除key指定的键值对，如果存在且删除成功返回true，不存在或删除失败返回false。

-

Clear

-

void

-

boolean

-

删除所有的属性，如果当前有状态变量依旧引用此属性，则返回false。

-

IsMutable

-

key: string

-

boolean

-

返回此属性是否存在并且是否可以改变。

-
- ->![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->当前接口当前仅可以处理基础类型数据，对于修改object中某一个值尚未支持。 - -## AppStorage与组件同步 + +## AppStorage接口 + +| 方法 | 参数说明 | 返回值 | 定义 | +| -------- | -------- | -------- | -------- | +| SetAndLink | key: string,
defaultValue: T | @Link | 与Link接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Link返回。 | +| Set | key: string,
newValue: T | void | 对已保存的key值，替换其value值。 | +| Link | key: string | @Link | 如果存在具有给定键的数据，则返回到此属性的双向数据绑定，该双向绑定意味着变量或者组件对数据的更改将同步到**AppStorage**，通过**AppStorage**对数据的修改将同步到变量或者组件。如果具有此键的属性不存在或属性为只读，则返回**undefined**。 | +| SetAndProp | propName: string,
defaultValue: S | @Prop | 与Prop接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Prop返回。 | +| Prop | key: string | @Prop | 如果存在具有给定键的属性，则返回此属性的单向数据绑定。该单向绑定意味着只能通过**AppStorage**将属性的更改同步到变量或者组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态属性，如果具有此键的属性不存在则返回**undefined**。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> prop方法对应的属性值类型为简单类型。 | +| SetOrCreate | key: string,
newValue: T | boolean | 如果已存在与给定键名字相同的属性，如果此属性可以被更改则替换其value值且返回true，否则不替换且返回false。
如果不存在存在与给定键名字相同的属性, 则创建一个键为key, 值为newValue的属性，属性值不支持null和undefined。 | +| Get | key: string | T或undefined | 通过此接口获取对应key值的value。 | +| Has | propName: string | boolean | 判断对应键值的属性是否存在。 | +| Keys | void | array<string> | 返回包含所有键的字符串数组。 | +| Delete | key: string | boolean | 删除key指定的键值对，如果存在且删除成功返回true，不存在或删除失败返回false。 | +| Clear | void | boolean | 删除所有的属性，如果当前有状态变量依旧引用此属性，则返回false。 | +| IsMutable | key: string | boolean | 返回此属性是否存在并且是否可以改变。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 当前接口当前仅可以处理基础类型数据，对于修改object中某一个值尚未支持。 + + +## AppStorage与组件同步 在[管理组件拥有的状态](ts-component-states-state.md)中，已经定义了如何将组件的状态变量与父组件或祖先组件中的**@State**装饰的状态变量同步，主要包括**@Prop**、**@Link**、**@Consume**。 -本章节将定义如何将组件变量与**AppStorage**同步，主要提供**@StorageLink**和**@StorageProp**装饰器。 +本章节定义如何将组件变量与**AppStorage**同步，主要提供**@StorageLink**和**@StorageProp**装饰器。 + -### @StorageLink装饰器 +### @StorageLink装饰器 -组件通过使用**@StorageLink\(key\)**装饰的状态变量，与**AppStorage**建立双向数据绑定，**key**为**AppStorage**中的属性键值。当创建包含**@StorageLink**的状态变量的组件时，该状态变量的值将使用**AppStorage**中的值进行初始化。在UI组件中对**@StorageLink**的状态变量所做的更改将同步到**AppStorage**，并从**AppStorage**同步到任何其他绑定实例中，如**PersistentStorage**或其他绑定的UI组件。 +组件通过使用@StorageLink(key)装饰的状态变量，与**AppStorage**建立双向数据绑定，**key**为**AppStorage**中的属性键值。当创建包含@StorageLink的状态变量的组件时，该状态变量的值将使用**AppStorage**中的值进行初始化。在UI组件中对@StorageLink的状态变量所做的更改将同步到**AppStorage**，并从**AppStorage**同步到任何其他绑定实例中，如**PersistentStorage**或其他绑定的UI组件。 -### @StorageProp装饰器 -组件通过使用**@StorageProp\(key\)**装饰的状态变量，将与**AppStorage**建立单向数据绑定，**key**标识AppStorage中的属性键值。当创建包含**@StoageProp**的状态变量的组件时，该状态变量的值将使用**AppStorage**中的值进行初始化。**AppStorage**中的属性值的更改会导致绑定的UI组件进行状态更新。 +### @StorageProp装饰器 -## 示例 +组件通过使用@StorageProp(key)装饰的状态变量，将与**AppStorage**建立单向数据绑定，**key**标识AppStorage中的属性键值。当创建包含@StoageProp的状态变量的组件时，该状态变量的值将使用**AppStorage**中的值进行初始化。**AppStorage**中的属性值的更改会导致绑定的UI组件进行状态更新。 + + +## 示例 ``` let varA = AppStorage.Link('varA') @@ -194,5 +88,4 @@ struct ComponentA { } ``` -每次开发者单击Count按钮时，this.varA变量值都会增加，此变量与AppStorage中的varA同步。每次用户单击当前语言按钮时，修改AppStorage中的languageCode，此修改会同步给this.lang变量。 - +每次用户单击Count按钮时，this.varA变量值都会增加，此变量与AppStorage中的varA同步。每次用户单击当前语言按钮时，修改AppStorage中的languageCode，此修改会同步给this.lang变量。 diff --git a/zh-cn/application-dev/ui/ts-application-states-storagelink-storageprop.md b/zh-cn/application-dev/ui/ts-application-states-storagelink-storageprop.md deleted file mode 100644 index b1de366693f627266cef248441aad0431fffebbe..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/ts-application-states-storagelink-storageprop.md +++ /dev/null @@ -1,57 +0,0 @@ -# AppStorage与组件同步 - -在[管理组件拥有的状态](../ui/ts-component-states-state.md)中，我们已经定义了如何将组件的状态变量与父组件或祖先组件中的**@State**装饰的状态变量同步，主要包括**@Prop**、**@Link**、**@Consume**。 - - -本章节将定义如何将组件变量与**AppStorage**同步，主要提供**@StorageLink**和**@StorageProp**装饰器。 - - -## @StorageLink装饰器 - -组件通过使用**@StorageLink(key)**装饰的状态变量，将与**AppStorage**建立双向数据绑定，**key**为**AppStorage**中的属性键值。当创建包含**@StorageLink**的状态变量的组件时，该状态变量的值将使用**AppStorage**中的值进行初始化。在UI组件中对**@StorageLink**的状态变量所做的更改将同步到**AppStorage**，并从**AppStorage**同步到任何其他绑定实例中，如**PersistentStorage**或其他绑定的UI组件。 - - -## @StorageProp装饰器 - -组件通过使用**@StorageProp(key)**装饰的状态变量，将于**AppStorage**建立单向数据绑定，**key**标识AppStorage中的属性键值。当创建包含**@StoageProp**的状态变量的组件时，该状态变量的值将使用**AppStorage**中的值进行初始化。**AppStorage**中的属性值更改会导致绑定的UI组件进行状态更新。 - - -## 示例 - -``` -let varA = AppStorage.Link('varA') -let envLang = AppStorage.Prop('languageCode') - -@Entry -@Component -struct ComponentA { - @StorageLink('varA') varA: number = 2 - @StorageProp('languageCode') lang: string = 'en' - private label: string = 'count' - - private aboutToAppear() { - this.label = (this.lang === 'zh') ? '数' : 'Count' - } - - build() { - Row({ space: 20 }) { - - Button(`${this.label}: ${this.varA}`) - .onClick(() => { - AppStorage.Set('varA', AppStorage.Get('varA') + 1) - }) - Button(`lang: ${this.lang}`) - .onClick(() => { - if (this.lang === 'zh') { - AppStorage.Set('languageCode', 'en') - } else { - AppStorage.Set('languageCode', 'zh') - } - this.label = (this.lang === 'zh') ? '数' : 'Count' - }) - } - } -} -``` - -每次用户单击Count按钮时，this.varA变量值都会增加，此变量与AppStorage中的varA同步。每次用户单击当前语言按钮时，修改AppStorage中的languageCode，此修改会同步给this.lang变量。 diff --git a/zh-cn/application-dev/ui/ts-attribution-configuration.md b/zh-cn/application-dev/ui/ts-attribution-configuration.md index 0f7546ecaeeea2e7c2e03ae33eff8c1d65aaed4d..57e3aa8afabf74f642ba7d0e05118b93ee205946 100644 --- a/zh-cn/application-dev/ui/ts-attribution-configuration.md +++ b/zh-cn/application-dev/ui/ts-attribution-configuration.md @@ -1,44 +1,40 @@ -# 属性配置 +# 属性配置 -使用属性方法配置组件的属性，属性方法紧随组件，并用“**.**”运算符连接。 -- 配置**Text**组件的字体大小属性： +使用属性方法配置组件的属性，属性方法紧随组件，并用**“.”**运算符连接。 - ``` - Text('123') - .fontSize(12) - ``` +- 配置**Text**组件的字体大小属性： + ``` + Text('123') + .fontSize(12) + ``` -- 使用“**.**”操作进行链式调用并同时配置组件的多个属性，如下所示： - ``` - Image('a.jpg') - .alt('error.jpg') - .width(100) - .height(100) - ``` +- 使用**“.”**操作进行链式调用并同时配置组件的多个属性，如下所示： + ``` + Image('a.jpg') + .alt('error.jpg') + .width(100) + .height(100) + ``` -- 除了直接传递常量参数外，还可以传递变量或表达式，如下所示： - - ``` - // Size, count, and offset are private variables defined in the component. - Text('hello') - .fontSize(this.size) - Image('a.jpg') - .width(this.count % 2 === 0 ? 100 : 200) - .height(this.offset + 100) - ``` - - -- 对于内置组件，框架还为其属性预定义了一些枚举类型，供开发人员调用，枚举值可以作为参数传递。枚举类型必须满足参数类型要求，有关特定属性的枚举类型定义的详细信息。可以按以下方式配置**Text**组件的颜色和字重属性： - - ``` - Text('hello') - .fontSize(20) - .fontColor(Color.Red) - .fontWeight(FontWeight.Bold) - ``` +- 除了直接传递常量参数外，还可以传递变量或表达式，如下所示： + ``` + // Size, count, and offset are private variables defined in the component. + Text('hello') + .fontSize(this.size) + Image('a.jpg') + .width(this.count % 2 === 0 ? 100 : 200) + .height(this.offset + 100) + ``` +- 对于内置组件，框架还为其属性预定义了一些枚举类型，供开发人员调用，枚举值可以作为参数传递。枚举类型必须满足参数类型要求，有关特定属性的枚举类型定义的详细信息。可以按以下方式配置**Text**组件的颜色和字体属性： + ``` + Text('hello') + .fontSize(20) + .fontColor(Color.Red) + .fontWeight(FontWeight.Bold) + ``` diff --git a/zh-cn/application-dev/ui/ts-child-component-configuration.md b/zh-cn/application-dev/ui/ts-child-component-configuration.md index 22fd3f45d2aa3eac98fe0abf0fb1841dffdef84f..d31f64606d4013b1fed5e6aa3e6c12c8c31cf73e 100644 --- a/zh-cn/application-dev/ui/ts-child-component-configuration.md +++ b/zh-cn/application-dev/ui/ts-child-component-configuration.md @@ -1,47 +1,47 @@ -# 子组件配置 +# 子组件配置 -对于支持子组件配置的组件，例如容器组件，在“**\{ ... \}**”里为组件添加子组件的UI描述。**Column**、**Row**、**Stack**、**Button**、**Grid**和**List**组件都是容器组件。 -以下是简单的**Column**示例： +对于支持子组件配置的组件，例如容器组件，在**“{ ... }”**里为组件添加子组件的UI描述。**Column**、**Row**、**Stack**、**Button**、**Grid**和**List**组件都是容器组件。 -``` -Column() { - Text('Hello') - .fontSize(100) - Divider() - Text(this.myText) - .fontSize(100) - .fontColor(Color.Red) -} -``` -可以嵌套多个子组件： +- 以下是简单的**Column**示例： + ``` + Column() { + Text('Hello') + .fontSize(100) + Divider() + Text(this.myText) + .fontSize(100) + .fontColor(Color.Red) + } + ``` -``` -Column() { - Column() { - Button() { - Text('+ 1') - }.type(ButtonType.Capsule) - .onClick(() => console.log ('+1 clicked!')) - Image('1.jpg') - } - Divider() - Column() { - Button() { - Text('+ 2') - }.type(ButtonType.Capsule) - .onClick(() => console.log ('+2 clicked!')) - Image('2.jpg') - } - Divider() - Column() { - Button() { - Text('+ 3') - }.type(ButtonType.Capsule) - .onClick(() => console.log('+3 clicked!')) - Image('3.jpg') - } -}.alignItems(HorizontalAlign.Center) // center align components inside Column -``` +- 可以嵌套多个子组件： + ``` + Column() { + Column() { + Button() { + Text('+ 1') + }.type(ButtonType.Capsule) + .onClick(() => console.log ('+1 clicked!')) + Image('1.jpg') + } + Divider() + Column() { + Button() { + Text('+ 2') + }.type(ButtonType.Capsule) + .onClick(() => console.log ('+2 clicked!')) + Image('2.jpg') + } + Divider() + Column() { + Button() { + Text('+ 3') + }.type(ButtonType.Capsule) + .onClick(() => console.log('+3 clicked!')) + Image('3.jpg') + } + }.alignItems(HorizontalAlign.Center) // center align components inside Column + ``` diff --git a/zh-cn/application-dev/ui/ts-component-based-builder.md b/zh-cn/application-dev/ui/ts-component-based-builder.md index 5c0b80f3017cf44c64459a7c231bdb4727cf8dfb..9bdf0dad957220ed5bab0790681edcef0a14fe30 100644 --- a/zh-cn/application-dev/ui/ts-component-based-builder.md +++ b/zh-cn/application-dev/ui/ts-component-based-builder.md @@ -1,6 +1,8 @@ -# @Builder +# @Builder + + +@Builder装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。\@Builder装饰方法的功能和语法规范与[build函数](ts-function-build.md)相同。 -@Builder装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。@Builder装饰方法的功能和语法规范与[build函数](ts-function-build.md)相同。 ``` @Entry @@ -39,4 +41,3 @@ struct CompA { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-component-based-component.md b/zh-cn/application-dev/ui/ts-component-based-component.md index 97dae6f63f01d6e2d09f24c95f7f1627b45a973b..cdefcd02d747618ef1f1f44f7673d830b1dea896 100644 --- a/zh-cn/application-dev/ui/ts-component-based-component.md +++ b/zh-cn/application-dev/ui/ts-component-based-component.md @@ -1,22 +1,29 @@ -# @Component +# @Component **@Component**装饰的**struct**表示该结构体具有组件化能力，能够成为一个独立的组件，这种类型的组件也称为自定义组件，在**build**方法里描述UI结构。自定义组件具有以下特点： -- **可组合：**允许开发人员组合使用内置组件、其他组件、公共属性和方法； -- **可重用：**自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用； -- **生命周期：**生命周期的回调方法可以在组件中配置，用于业务逻辑处理； -- **数据驱动更新：**由状态变量的数据驱动，实现UI自动更新。 + +- **可组合：**允许开发人员组合使用内置组件、其他组件、公共属性和方法； + +- **可重用：**自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用； + +- **生命周期：**生命周期的回调方法可以在组件中配置，用于业务逻辑处理； + +- **数据驱动更新：**由状态变量的数据驱动，实现UI自动更新。 + 对组件化的深入描述，请参考[深入理解组件化](ts-a-deep-dive-into-component.md)。 ->![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->- 自定义组件必须定义build方法。 ->- 自定义组件禁止自定义构造函数。 -## 示例 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 自定义组件必须定义build方法。 +> +> - 自定义组件禁止自定义构造函数。 + 如下代码定义了**MyComponent**组件**：** + ``` @Component struct MyComponent { @@ -29,10 +36,13 @@ struct MyComponent { } ``` + **MyComponent**的**build**方法会在初始渲染时执行，此外，当组件中的状态发生变化时，**build**方法将再次执行。 + 以下代码使用了**MyComponent**组件： + ``` @Component struct ParentComponent { @@ -46,8 +56,10 @@ struct ParentComponent { } ``` + 可以多次使用**MyComponent**，并在不同的组件中进行重用： + ``` @Component struct ParentComponent { @@ -75,4 +87,3 @@ struct ParentComponent { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-component-based-customdialog.md b/zh-cn/application-dev/ui/ts-component-based-customdialog.md index 7cefbc4f80f1b40cf3e8a713c316f40afc80e2ba..28e915392fb050cb8e345eaeaa97592905a91e65 100644 --- a/zh-cn/application-dev/ui/ts-component-based-customdialog.md +++ b/zh-cn/application-dev/ui/ts-component-based-customdialog.md @@ -1,7 +1,8 @@ -# @CustomDialog +# @CustomDialog **@CustomDialog**装饰器用于装饰自定义弹窗。 + ``` // custom-dialog-demo.ets @CustomDialog @@ -46,4 +47,3 @@ struct CustomDialogUser { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-component-based-entry.md b/zh-cn/application-dev/ui/ts-component-based-entry.md index 121aa6a92ba9f286d545e5c80323d0ccfb0a4965..b725be696608e8e4166096eeca671c3cf404af97 100644 --- a/zh-cn/application-dev/ui/ts-component-based-entry.md +++ b/zh-cn/application-dev/ui/ts-component-based-entry.md @@ -1,14 +1,15 @@ -# @Entry +# @Entry -用**@Entry**装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现**@Entry**装饰的自定义组件。 +用**@Entry**装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现**\@Entry**装饰的自定义组件。 ->![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->在单个源文件中，最多可以使用**@Entry**装饰一个自定义组件。 -## 示例 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 在单个源文件中，最多可以使用**\@Entry**装饰一个自定义组件。 + **@Entry**的用法如下： + ``` // Only MyComponent decorated by @Entry is rendered and displayed. "hello world" is displayed, but "goodbye" is not displayed. @Entry @@ -32,4 +33,3 @@ struct HideComponent { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-component-based-extend.md b/zh-cn/application-dev/ui/ts-component-based-extend.md index 49e931628762231151ca730e79d7b480f3ae607d..b28a95235035fe2568da713a26f199187b675577 100644 --- a/zh-cn/application-dev/ui/ts-component-based-extend.md +++ b/zh-cn/application-dev/ui/ts-component-based-extend.md @@ -1,6 +1,7 @@ -# @Extend +# @Extend + +**@Extend**装饰器将新的属性函数添加到内置组件上，如**Text**、**Column**、**Button**等。通过**\@Extend**装饰器可以快速定义并复用组件的自定义样式。 -**@Extend**装饰器将新的属性函数添加到内置组件上，如**Text**、**Column**、**Button**等。通过**@Extend**装饰器可以快速定义并复用组件的自定义样式。 ``` @Extend(Text) function fancy(fontSize: number) { @@ -23,6 +24,6 @@ struct FancyUse { } ``` ->![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->@Extend装饰器不能用在自定义组件struct定义框内。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> @Extend装饰器不能用在自定义组件struct定义框内。 diff --git a/zh-cn/application-dev/ui/ts-component-based-preview.md b/zh-cn/application-dev/ui/ts-component-based-preview.md index 64f134d9097718891f969308382b7b53b164f449..5016d05195beb63bbc2bdd69ed197415ff14187a 100644 --- a/zh-cn/application-dev/ui/ts-component-based-preview.md +++ b/zh-cn/application-dev/ui/ts-component-based-preview.md @@ -1,14 +1,15 @@ -# @Preview +# @Preview 用**@Preview**装饰的自定义组件可以在DevEco Studio的预览器上进行预览，加载页面时，将创建并呈现**@Preview**装饰的自定义组件。 ->![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->在单个源文件中，最多可以使用**@Preview**装饰一个自定义组件。 -## 示例 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 在单个源文件中，最多可以使用**@Preview**装饰一个自定义组件。 + **@Preview**的用法如下： + ``` // Display only Hello Component1 on the PC preview. The content under MyComponent is displayed on the real device. @Entry @@ -57,4 +58,3 @@ struct Component2 { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-component-based.md b/zh-cn/application-dev/ui/ts-component-based.md index fec4b7a92e43a9840e697c2aeccd0e25374ad3df..5701c63be5e6d422dc9f972365bb0b1a7e564dfa 100644 --- a/zh-cn/application-dev/ui/ts-component-based.md +++ b/zh-cn/application-dev/ui/ts-component-based.md @@ -1,15 +1,14 @@ -# 组件化 +# 组件化 -- **[@Component](ts-component-based-component.md)** +- **[@Component](ts-component-based-component.md)** -- **[@Entry](ts-component-based-entry.md)** +- **[@Entry](ts-component-based-entry.md)** -- **[@Preview](ts-component-based-preview.md)** +- **[@Preview](ts-component-based-preview.md)** -- **[@Builder](ts-component-based-builder.md)** +- **[@Builder](ts-component-based-builder.md)** -- **[@Extend](ts-component-based-extend.md)** - -- **[@CustomDialog](ts-component-based-customdialog.md)** +- **[@Extend](ts-component-based-extend.md)** +- **[@CustomDialog](ts-component-based-customdialog.md)** diff --git a/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md b/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md index fb5b88da9ff1b8ae34c610903e740bf784f11a25..fba16b8fff39be1fcc26a37a2b2f6d58c89c2746 100644 --- a/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md +++ b/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md @@ -1,4 +1,50 @@ -# 组件创建和重新初始化示例 +# 组件创建和重新初始化 + +## 初始创建和渲染 + +1. 创建父组件**ParentComp**； + +2. 本地初始化**ParentComp**的状态变量**isCountDown**； + +3. 执行**ParentComp**的**build**函数； + +4. 创建**Column**内置组件； + 1. 创建**Text**内置组件，设置其文本展示内容，并将**Text**组件实例添加到**Column**中； + 2. 判断if条件，创建**true**分支上的组件； + 1. 创建**Image**内置组件，并设置其图片源地址； + 2. 使用给定的构造函数创建**TimerComponent**； + 1. 创建**TimerComponent**对象； + 2. 本地初始化成员变量初始值； + 3. 使用**TimerComponent**构造函数提供的参数更新成员变量的值； + 4. 执行**TimerComponent**的**aboutToAppear**函数； + 5. 执行**TimerComponent**的**build**函数，创建相应的UI描述结构； + 3. 创建**Button**内置组件，设置相应的内容。 + + +## 状态更新 + +用户单击按钮时： + +1. **ParentComp**的**isCountDown**状态变量的值更改为false； + +2. 执行**ParentComp**的**build**函数； + +3. **Column**内置组件会被框架重用并执行重新初始化； + +4. **Column**的子组件会重用内存中的对象，但会进行重新初始化； + 1. **Text**内置组件会被重用，但使用新的文本内容进行重新初始化； + 2. 判断if条件，使用false分支上的组件； + 1. 原来true分支上的组件不在使用，这些组件会进行销毁； + 1. 创建的**Image**内置组件实例进行销毁； + 2. **TimerComponent**组件实例进行销毁，**aboutToDisappear**函数被调用； + 2. 创建false分支上的组件； + 1. 创建**Image**内置组件，并设置其图片源地址； + 2. 使用给定的构造函数重新创建**TimerComponent**； + 3. 新创建的**TimerComponent**进行初始化，并调用**aboutToAppear**函数和**build**函数。 + 3. **Button**内置组件会被重用，但使用新的图片源地址。 + + +## 示例 ``` @Entry @@ -46,44 +92,3 @@ struct TimerComponent { } } ``` - -## 初始创建和渲染 - -1. 创建父组件**ParentComp**； -2. 本地初始化**ParentComp**的状态变量**isCountDown**； -3. 执行**ParentComp**的**build**函数； -4. 创建**Column**内置组件； - 1. 创建**Text**内置组件，设置其文本展示内容，并将**Text**组件实例添加到**Column**中； - 2. 判断if条件，创建**true**分支上的组件； - 1. 创建**Image**内置组件，并设置其图片源地址； - 2. 使用给定的构造函数创建**TimerComponent**； - 1. 创建**TimerComponent**对象； - 2. 本地初始化成员变量初始值； - 3. 使用**TimerComponent**构造函数提供的参数更新成员变量的值； - 4. 执行**TimerComponent**的**aboutToAppear**函数； - 5. 执行**TimerComponent**的**build**函数，创建相应的UI描述结构； - - 3. 创建**Button**内置组件，设置相应的内容。 - - -## 状态更新 - -用户单击按钮时： - -1. **ParentComp**的**isCountDown**状态变量的值更改为false； -2. 执行**ParentComp**的**build**函数； -3. **Column**内置组件会被框架重用并执行重新初始化； -4. **Column**的子组件会重用内存中的对象，但会进行重新初始化； - 1. **Text**内置组件会被重用，但使用新的文本内容进行重新初始化； - 2. 判断if条件，使用false分支上的组件； - 1. 原来true分支上的组件不在使用，这些组件会进行销毁； - 1. 创建的**Image**内置组件实例进行销毁； - 2. **TimerComponent**组件实例进行销毁，**aboutToDisappear**函数被调用； - - 2. 创建false分支上的组件； - 1. 创建**Image**内置组件，并设置其图片源地址； - 2. 使用给定的构造函数重新创建**TimerComponent**； - 3. 新创建的**TimerComponent**进行初始化，并调用**aboutToAppear**函数和**build**函数。 - - 3. **Button**内置组件会被重用，但使用新的图片源地址。 - diff --git a/zh-cn/application-dev/ui/ts-component-states-link.md b/zh-cn/application-dev/ui/ts-component-states-link.md index 9cc78870ea08897512cde2b55b645397fa28606c..0fd6b9d230c92eb5d9060770d85fdbc4228952b9 100644 --- a/zh-cn/application-dev/ui/ts-component-states-link.md +++ b/zh-cn/application-dev/ui/ts-component-states-link.md @@ -1,17 +1,24 @@ -# @Link +# @Link **@Link**装饰的变量可以和父组件的**@State**变量建立双向数据绑定： -- **支持多种类型：@Link**变量的值与**@State**变量的类型相同，即class、number、string、boolean或这些类型的数组； -- **私有：**仅在组件内访问； -- **单个数据源：**初始化**@Link**变量的父组件的变量必须是**@State**变量； -- **双向通信：**子组件对**@Link**变量的更改将同步修改父组件的**@State**变量； -- **创建自定义组件时需要将变量的引用传递给@Link变量：**在创建组件的新实例时，必须使用命名参数初始化所有**@Link**变量。**@Link**变量可以使用**@State**变量或**@Link**变量的引用进行初始化，**@State**变量可以通过'**$**'操作符创建引用。 ->![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->**@Link**变量不能在组件内部进行初始化。 +- **支持多种类型：@Link**变量的值与**@State**变量的类型相同，即class、number、string、boolean或这些类型的数组； -## 简单类型示例 +- **私有：**仅在组件内访问； + +- **单个数据源：**初始化**@Link**变量的父组件的变量必须是**@State**变量； + +- **双向通信：**子组件对**@Link**变量的更改将同步修改父组件的**@State**变量； + +- **创建自定义组件时需要将变量的引用传递给@Link变量：**在创建组件的新实例时，必须使用命名参数初始化所有**@Link**变量。**@Link**变量可以使用**@State**变量或**@Link**变量的引用进行初始化，**@State**变量可以通过'**$**'操作符创建引用。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **@Link**变量不能在组件内部进行初始化。 + + +## 简单类型示例 ``` @Entry @@ -43,7 +50,8 @@ struct PlayButton { **@Link**语义是从'**$**'操作符引出，即**$isPlaying**是**this.isPlaying**内部状态的双向数据绑定。当您单击**PlayButton**时，PlayButton 的**Image**组件和**Text**组件将同时进行刷新。 -## 复杂类型示例 + +## 复杂类型示例 ``` @Entry @@ -82,7 +90,8 @@ struct Child { 在上面的示例中，点击**Button1**和**Button2**更改父组件中显示的文本项目列表。 -## @Link和@State、@Prop结合使用示例 + +## @Link、@State和@Prop结合使用示例 ``` @Entry @@ -120,6 +129,6 @@ struct ChildB { 上述示例中，ParentView包含ChildA和ChildB两个子组件，ParentView的状态变量**counter**分别初始化ChildA和ChildB。 -- ChildB使用**@Link**建立双向状态绑定。当**ChildB**修改**counterRef**状态变量值时，该更改将同步到**ParentView**和**ChildA**共享； -- ChildA使用**@Prop**建立从**ParentView**到自身的单向状态绑定。当**ChildA**修改状态时，**ChildA**将重新渲染，但该更改不会传达给**ParentView**和**ChildB。** +- ChildB使用**@Link**建立双向状态绑定。当**ChildB**修改**counterRef**状态变量值时，该更改将同步到**ParentView**和**ChildA**共享； +- ChildA使用**@Prop**建立从**ParentView**到自身的单向状态绑定。当**ChildA**修改状态时，**ChildA**将重新渲染，但该更改不会传达给**ParentView**和**ChildB**。 diff --git a/zh-cn/application-dev/ui/ts-component-states-prop.md b/zh-cn/application-dev/ui/ts-component-states-prop.md index 063568a22b4e7ac62287da7908e3876abbb6c8e5..1fcb7b8e5cb553487baba5b97d2062f3354e404d 100644 --- a/zh-cn/application-dev/ui/ts-component-states-prop.md +++ b/zh-cn/application-dev/ui/ts-component-states-prop.md @@ -1,15 +1,20 @@ -# @Prop +# @Prop **@Prop与@State**有相同的语义，但初始化方式不同。**@Prop**装饰的变量必须使用其父组件提供的**@State**变量进行初始化，允许组件内部修改**@Prop**变量，但更改不会通知给父组件，即**@Prop**属于单向数据绑定。 **@Prop**状态数据具有以下特征： -- **支持简单类型：**仅支持number、string、boolean简单类型； -- **私有：**仅在组件内访问； -- **支持多个实例：**一个组件中可以定义多个标有**@Prop**的属性； -- **创建自定义组件时将值传递给@Prop变量进行初始化：**在创建组件的新实例时，必须初始化所有@Prop变量，不支持在组件内部进行初始化。 -## 示例 +- **支持简单类型：**仅支持number、string、boolean简单类型； + +- **私有：**仅在组件内访问； + +- **支持多个实例：**一个组件中可以定义多个标有**@Prop**的属性； + +- **创建自定义组件时将值传递给@Prop变量进行初始化：**在创建组件的新实例时，必须初始化所有@Prop变量，不支持在组件内部进行初始化。 + + +## 示例 ``` @Entry @@ -29,10 +34,7 @@ struct ParentComponent { }.onClick(() => { this.countDownStartValue -= 1 }) - - // when creatng ChildComponent, the initial value of its @Prop variable must be supplied - // in a named constructor parameter - // also regular costOfOneAttempt (non-Prop) variable is initialied + // 创建子组件时，必须在构造函数参数中提供其@Prop变量的初始值，同时初始化常规变量CostOfOneAttump（非Prop） CountDownComponent({ count: this.countDownStartValue, costOfOneAttempt: 2}) } } @@ -63,6 +65,5 @@ struct CountDownComponent { 在上述示例中，当按“+1”或“-1”按钮时，父组件状态发生变化，重新执行**build**方法，此时将创建一个新的**CountDownComponent**组件。父组件的**countDownStartValue**状态属性被用于初始化子组件的**@Prop**变量，当按下子组件的“Try again”按钮时，其**@Prop**变量**count**将被更改，**CountDownComponent**重新渲染。但是**count**值的更改不会影响父组件的**countDownStartValue**值。 ->![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->创建新组件实例时，必须初始化其所有**@Prop**变量。 - +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 创建新组件实例时，必须初始化其所有**@Prop**变量。 diff --git a/zh-cn/application-dev/ui/ts-component-states-state.md b/zh-cn/application-dev/ui/ts-component-states-state.md index 0bb15182030d2521ad80647d13320a30813db0f7..3ad723169c4d2ebaebe494c0bc7bee229cdaa988 100644 --- a/zh-cn/application-dev/ui/ts-component-states-state.md +++ b/zh-cn/application-dev/ui/ts-component-states-state.md @@ -1,16 +1,22 @@ -# @State +# @State **@State**装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的**build**方法进行UI刷新。 **@State**状态数据具有以下特征： -- **支持多种类型：**允许**class**、**number**、**boolean**、**string**强类型的按值和按引用类型。允许这些强类型构成的数组，即**Array**、**Array**、**Array**、**Array。**不允许**object**和**any。** -- **支持多实例：**组件不同实例的内部状态数据独立。 -- **内部私有：**标记为**@State**的属性是私有变量，只能在组件内访问。 -- **需要本地初始化：**必须为所有**@State**变量分配初始值，将变量保持未初始化可能导致框架行为未定义。 -- **创建自定义组件时支持通过状态变量名设置初始值：**在创建组件实例时，可以通过变量名显式指定**@State**状态属性的初始值**。** -## 简单类型的状态属性示例 +- **支持多种类型：**允许**class**、**number**、**boolean**、**string**强类型的按值和按引用类型。允许这些强类型构成的数组，即**Array<class>**、**Array<string>**、**Array<boolean>**、**Array<number>。**不允许**object**和**any。** + +- **支持多实例：**组件不同实例的内部状态数据独立。 + +- **内部私有：**标记为**@State**的属性是私有变量，只能在组件内访问。 + +- **需要本地初始化：**必须为所有**@State**变量分配初始值，将变量保持未初始化可能导致框架行为未定义。 + +- **创建自定义组件时支持通过状态变量名设置初始值：**在创建组件实例时，可以通过变量名显式指定**@State**状态属性的初始值**。** + + +## 简单类型的状态属性示例 ``` @Entry @@ -33,7 +39,8 @@ struct MyComponent { } ``` -## 复杂类型的状态变量示例 + +## 复杂类型的状态变量示例 ``` // Customize the status data class. @@ -49,8 +56,7 @@ class Model { struct EntryComponent { build() { Column() { - MyComponent({count: 1, increaseBy: 2}) // MyComponent1 in this document - MyComponent({title: {value: 'Hello, World 2'}, count: 7}) //MyComponent2 in this document + MyComponent({count: 1, increaseBy: 2}) // MyComponent1 in this document MyComponent({title: {value: 'Hello, World 2'}, count: 7}) //MyComponent2 in this document } } } @@ -81,13 +87,15 @@ struct MyComponent { } ``` + 在上述示例中： -- 用户定义的组件**MyComponent**定义了**@State**状态变量**count**和**title**。如果**count**或**title**的值发生变化，则执行**MyComponent**的**build**方法来重新渲染组件； -- **EntryComponent**中有多个**MyComponent**组件实例，第一个**MyComponent**内部状态的更改不会影响第二个**MyComponent**； -- 创建**MyComponent**实例时通过变量名给组件内的变量进行初始化，如： - ``` - MyComponent({title: {value: 'Hello, World 2'}, count: 7}) - ``` +- 用户定义的组件**MyComponent**定义了**@State**状态变量**count**和**title**。如果**count**或**title**的值发生变化，则执行**MyComponent**的**build**方法来重新渲染组件； + +- **EntryComponent**中有多个**MyComponent**组件实例，第一个**MyComponent**内部状态的更改不会影响第二个**MyComponent**； +- 创建**MyComponent**实例时通过变量名给组件内的变量进行初始化，如： + ``` + MyComponent({title: {value: 'Hello, World 2'}, count: 7}) + ``` diff --git a/zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md b/zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md index d53a20f232036cad839708255e1823f31f079ff0..8d403839627e49c327a54a0897bac80fabc56753 100644 --- a/zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md +++ b/zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md @@ -1,25 +1,27 @@ -# 必选参数构造配置 +# 必选参数构造配置 -如果组件的接口定义中包含必选构造参数，则在组件后面的“**\(\)**”中必须配置参数，参数可以使用常量进行赋值。 -例如： +如果组件的接口定义中包含必选构造参数，则在组件后面的**“()”**中必须配置参数，参数可以使用常量进行赋值。 + -- **Image**组件的必选参数**src**： +例如： - ``` - Image('http://xyz/a.jpg') - ``` +- **Image**组件的必选参数**src**： + ``` + Image('http://xyz/a.jpg') + ``` -- **Text**组件的必选参数**content**： - ``` - Text('123') - ``` +- **Text**组件的必选参数**content**： + ``` + Text('123') + ``` 变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。例如，传递变量或表达式来构造**Image**和**Text**组件的参数： + ``` // imagePath, where imageUrl is a private data variable defined in the component. Image(this.imagePath) @@ -29,4 +31,3 @@ Image('http://' + this.imageUrl) // features of the corresponding language. This specification is not limited. Text(`count: ${this.count}`) ``` - diff --git a/zh-cn/application-dev/ui/ts-custom-component-initialization.md b/zh-cn/application-dev/ui/ts-custom-component-initialization.md index f636d44f4312fa6e8a4598ad6dc5a4f2d78add5c..d62a49222de2e303788c589f68659b9383b85cb5 100644 --- a/zh-cn/application-dev/ui/ts-custom-component-initialization.md +++ b/zh-cn/application-dev/ui/ts-custom-component-initialization.md @@ -1,196 +1,73 @@ -# 自定义组件成员变量初始化 +# 自定义组件成员变量初始化 组件的成员变量可以通过两种方式初始化： -- 本地初始化，例如： - ``` - @State counter: Counter = new Counter() - ``` +- 本地初始化，例如： + ``` + @State counter: Counter = new Counter() + ``` -- 在构造组件时通过构造参数初始化，例如： - - ``` - MyComponent(counter: $myCounter) - ``` +- 在构造组件时通过构造参数初始化，例如： + ``` + MyComponent(counter: $myCounter) + ``` 具体允许哪种方式取决于状态变量的装饰器： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

装饰器类型

-

本地初始化

-

通过构造函数参数初始化

-

@State

-

必须

-

可选

-

@Prop

-

禁止

-

必须

-

@Link

-

禁止

-

必须

-

@StorageLink

-

必须

-

禁止

-

@StorageProp

-

必须

-

禁止

-

@Provide

-

必须

-

可选

-

@Consume

-

禁止

-

禁止

-

@ObjectLink

-

禁止

-

必须

-

常规成员变量

-

推荐

-

可选

-
+ +| 装饰器类型 | 本地初始化 | 通过构造函数参数初始化 | +| -------- | -------- | -------- | +| @State | 必须 | 可选 | +| @Prop | 禁止 | 必须 | +| @Link | 禁止 | 必须 | +| @StorageLink | 必须 | 禁止 | +| @StorageProp | 必须 | 禁止 | +| @Provide | 必须 | 可选 | +| @Consume | 禁止 | 禁止 | +| @ObjectLink | 禁止 | 必须 | +| 常规成员变量 | 推荐 | 可选 | + 从上表中可以看出： -- **@State**变量需要本地初始化，初始化的值可以被构造参数覆盖； -- **@Prop**和**@Link**变量必须且仅通过构造函数参数进行初始化。 + +- **@State**变量需要本地初始化，初始化的值可以被构造参数覆盖； + +- **@Prop**和**@Link**变量必须且仅通过构造函数参数进行初始化。 + 通过构造函数方法初始化成员变量，需要遵循如下规则： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

从父组件中的变量（下）到子组件中的变量（右）

-

@State

-

@Link

-

@Prop

-

常规变量

-

@State

-

不允许

-

允许

-

允许

-

允许

-

@Link

-

不允许

-

允许

-

不推荐

-

允许

-

@Prop

-

不允许

-

不允许

-

允许

-

允许

-

@StorageLink

-

不允许

-

允许

-

不允许

-

允许

-

@StorageProp

-

不允许

-

不允许

-

不允许

-

允许

-

常规变量

-

允许

-

不允许

-

不允许

-

允许

-
+ +| 从父组件中的变量（下）到子组件中的变量（右） | @State | @Link | @Prop | 常规变量 | +| -------- | -------- | -------- | -------- | -------- | +| @State | 不允许 | 允许 | 允许 | 允许 | +| @Link | 不允许 | 允许 | 不推荐 | 允许 | +| @Prop | 不允许 | 不允许 | 允许 | 允许 | +| @StorageLink | 不允许 | 允许 | 不允许 | 允许 | +| @StorageProp | 不允许 | 不允许 | 不允许 | 允许 | +| 常规变量 | 允许 | 不允许 | 不允许 | 允许 | + 从上表中可以看出： -- 父组件的常规变量可以用于初始化子组件的**@State**变量，但不能用于初始化**@Link**或**@Prop**变量； -- 父组件的**@State**变量可以初始化子组件的**@Prop**、**@Link（通过$）**或常规变量，但不能初始化子组件的**@State**变量； -- 父组件的**@Link**变量可以初始化子组件的@Link或常规变量。但是初始化子组件的**@State**成员是语法错误，此外不建议初始化**@prop；** -- 父组件的**@Prop**变量可以初始化子组件的常规变量或**@Prop**变量，但不能初始化子组件的**@State**或**@Link**变量。 -- @StorageLink和@StorageProp不允许由父组件中传递到子组件。 -- 除了上述规则外，还需要遵循TS的强类型规则。 -## 示例 +- 父组件的常规变量可以用于初始化子组件的**@State**变量，但不能用于初始化**@Link**或**@Prop**变量。 + +- 父组件的**@State**变量可以初始化子组件的**@Prop**、**@Link（通过$）**或常规变量，但不能初始化子组件的**@State**变量。 + +- 父组件的**@Link**变量可以初始化子组件的@Link或常规变量。但是初始化子组件的**@State**成员是语法错误，此外不建议初始化**@prop。** + +- 父组件的**@Prop**变量可以初始化子组件的常规变量或**@Prop**变量，但不能初始化子组件的**@State**或**@Link**变量。 + +- @StorageLink和@StorageProp不允许由父组件中传递到子组件。 + +- 除了上述规则外，还需要遵循TS的强类型规则。 + + +## 示例 ``` @Entry @@ -232,4 +109,3 @@ struct CompB { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md b/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md index 1b71e4643908021ad6f0c6916a49e77a79583034..48308666b73d34cef7f83c3438da881b89edadb2 100644 --- a/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md +++ b/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md @@ -1,46 +1,20 @@ -# 自定义组件生命周期回调函数 +# 自定义组件生命周期回调函数 自定义组件的生命周期回调函数用于通知用户该自定义组件的生命周期，这些回调函数是私有的，在运行时由开发框架在特定的时间进行调用，不能从应用程序中手动调用这些回调函数。 -## 生命周期回调函数定义 - - - - - - - - - - - - - - - - - - - - - -

函数名

-

描述

-

aboutToAppear

-

函数在创建自定义组件的新实例后，在执行其build函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build函数中生效。

-

aboutToDisappear

-

函数在自定义组件析构消耗之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。

-

onPageShow

-

页面显示时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。

-

onPageHide

-

页面消失时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。

-

onBackPress

-

当用户点击返回按钮时触发，仅@Entry修饰的自定义组件生效。

-
  • 返回true表示页面自己处理返回逻辑, 不进行页面路由。
  • 返回false表示使用默认的返回逻辑。
  • 不返回值会作为false处理。
-
+## 生命周期回调函数定义 -## 示例 +| 函数名 | 描述 | +| -------- | -------- | +| aboutToAppear | 函数在创建自定义组件的新实例后，在执行其**build**函数之前执行。允许在**aboutToAppear**函数中改变状态变量，更改将在后续执行build函数中生效。 | +| aboutToDisappear | 函数在自定义组件析构消耗之前执行。不允许在**aboutToDisappear**函数中改变状态变量，特别是**@Link**变量的修改可能会导致应用程序行为不稳定。 | +| onPageShow | 页面显示时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 | +| onPageHide | 页面消失时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 | +| onBackPress | 当用户点击返回按钮时触发，仅\@Entry修饰的自定义组件生效。
- 返回true表示页面自己处理返回逻辑, 不进行页面路由。
- 返回false表示使用默认的返回逻辑。
- 不返回值会作为false处理。 | + + +## 示例 ``` @Component @@ -72,7 +46,8 @@ struct CountDownTimerComponent { 上述示例表明，生命周期函数对于允许CountDownTimerComponent管理其计时器资源至关重要，类似的函数也包括异步从网络请求加载资源。 ->![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->- 允许在生命周期函数中使用**Promise**和异步回调函数，比如网络资源获取，定时器设置等； ->- 不允许在生命周期函数中使用**async await**。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 允许在生命周期函数中使用**Promise**和异步回调函数，比如网络资源获取，定时器设置等； +> +> - 不允许在生命周期函数中使用**async await**。 diff --git a/zh-cn/application-dev/ui/ts-declarative-syntax.md b/zh-cn/application-dev/ui/ts-declarative-syntax.md index dad1bae391fca02253118853fbd67484d4aa9cb3..563d53482ae16ab992fd37fe2f6e8316e014676e 100644 --- a/zh-cn/application-dev/ui/ts-declarative-syntax.md +++ b/zh-cn/application-dev/ui/ts-declarative-syntax.md @@ -1,7 +1,5 @@ # 声明式语法 - - - **[描述规范使用说明](ts-syntax-intro.md)** - **[通用UI描述规范](ts-general-ui-description-specifications.md)** diff --git a/zh-cn/application-dev/ui/ts-declarative-ui-description-specifications.md b/zh-cn/application-dev/ui/ts-declarative-ui-description-specifications.md index ecb6cdf8fa38ff10f34844541fbd2372240db307..faef8a844ee68e0da030a1d8912689f6b30d50e8 100644 --- a/zh-cn/application-dev/ui/ts-declarative-ui-description-specifications.md +++ b/zh-cn/application-dev/ui/ts-declarative-ui-description-specifications.md @@ -1,13 +1,11 @@ -# 声明式UI描述规范 +# 声明式UI描述规范 -- **[无构造参数配置](ts-parameterless-configuration.md)** +- **[无参数构造配置](ts-parameterless-configuration.md)** -- **[必选参数构造配置](ts-configuration-with-mandatory-parameters.md)** +- **[必选参数构造配置](ts-configuration-with-mandatory-parameters.md)** -- **[属性配置](ts-attribution-configuration.md)** - -- **[事件配置](ts-event-configuration.md)** - -- **[子组件配置](ts-child-component-configuration.md)** +- **[属性配置](ts-attribution-configuration.md)** +- **[事件配置](ts-event-configuration.md)** +- **[子组件配置](ts-child-component-configuration.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-event-configuration.md b/zh-cn/application-dev/ui/ts-event-configuration.md index ba25d7c8151b3730a98a31a09979c3fd5c923d0f..78af2d2464fca6bc589b09eb41443cd62e41603b 100644 --- a/zh-cn/application-dev/ui/ts-event-configuration.md +++ b/zh-cn/application-dev/ui/ts-event-configuration.md @@ -1,40 +1,36 @@ -# 事件配置 +# 事件配置 通过事件方法可以配置组件支持的事件。 -- 使用lambda表达式配置组件的事件方法： - - ``` - // Counter is a private data variable defined in the component. - Button('add counter') - .onClick(() => { - this.counter += 2 - }) - ``` - - -- 使用匿名函数表达式配置组件的事件方法，要求使用**bind**，以确保函数体中的this引用包含的组件。 - - ``` - // Counter is a private data variable defined in the component. - Button('add counter') - .onClick(function () { - this.counter += 2 - }.bind(this)) - ``` - - -- 使用组件的成员函数配置组件的事件方法： - - ``` - myClickHandler(): void { - // do something - } - - ... - - Button('add counter') - .onClick(this.myClickHandler) - ``` - +- 使用lambda表达式配置组件的事件方法： + ``` + // Counter is a private data variable defined in the component. + Button('add counter') + .onClick(() => { + this.counter += 2 + }) + ``` + + +- 使用匿名函数表达式配置组件的事件方法，要求使用**bind**，以确保函数体中的this引用包含的组件： + ``` + // Counter is a private data variable defined in the component. + Button('add counter') + .onClick(function () { + this.counter += 2 + }.bind(this)) + ``` + + +- 使用组件的成员函数配置组件的事件方法： + ``` + myClickHandler(): void { + // do something + } + + ... + + Button('add counter') + .onClick(this.myClickHandler) + ``` diff --git a/zh-cn/application-dev/ui/ts-framework.md b/zh-cn/application-dev/ui/ts-framework.md index c6202241fa6b67626dd91ede26e778fdc97a44b2..23c1d50fc81b384c79dbb433e2a46e5579591be2 100644 --- a/zh-cn/application-dev/ui/ts-framework.md +++ b/zh-cn/application-dev/ui/ts-framework.md @@ -1,7 +1,5 @@ # 框架说明 - - - **[文件组织](ts-framework-file.md)** - **[js标签配置](ts-framework-js-tag.md)** diff --git a/zh-cn/application-dev/ui/ts-function-build.md b/zh-cn/application-dev/ui/ts-function-build.md index e417ca683348c21654cb5a21477aa6aac6a28572..91f46f8e4f2fe0a8d441d200c68b142eec54830b 100644 --- a/zh-cn/application-dev/ui/ts-function-build.md +++ b/zh-cn/application-dev/ui/ts-function-build.md @@ -1,6 +1,7 @@ -# build函数 +# build函数 + +**build**函数满足**Builder**构造器接口定义，用于定义组件的声明式UI描述。必须遵循上述**Builder**接口约束，在**build**方法中以声明式方式进行组合自定义组件或系统内置组件，在组件创建和更新场景中都会调用**build**方法。 -**build**函数满足**Builder**构造器接口定义，用于定义组件的声明式UI描述。必须遵循上述**Builder**接口约束，在**build**方法中以声明式方式进行组合自定义组件或系统内置组件，在组件的第一次创建和更新场景中都会调用**build**方法。 ``` interface Builder { @@ -8,6 +9,6 @@ interface Builder { } ``` ->![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->build方法仅支持组合组件，使用渲染控制语法。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> build方法仅支持组合组件，使用渲染控制语法。 diff --git a/zh-cn/application-dev/ui/ts-general-ui-concepts.md b/zh-cn/application-dev/ui/ts-general-ui-concepts.md index dbb942e3db100536f4c3dfcbe764c85c5cd61dd1..75e757af1fe4d18c1024623343c766e78113e9a3 100644 --- a/zh-cn/application-dev/ui/ts-general-ui-concepts.md +++ b/zh-cn/application-dev/ui/ts-general-ui-concepts.md @@ -1,8 +1,9 @@ -# 基本概念 +# 基本概念 -基于TS扩展的声明式开发范式提供了一系列基本组件，这些组件以声明方式进行组合和扩展来描述应用程序的UI界面，并且还提供了基本的数据绑定和事件处理机制，帮助开发者实现应用交互逻辑。 +基于TS扩展的声明式开发范式提供了一系列基础组件，这些组件以声明方式进行组合和扩展来描述应用程序的UI界面，并且还提供了基本的数据绑定和事件处理机制，帮助开发者实现应用交互逻辑。 -## HelloWorld基本示例 + +## HelloWorld基本示例 ``` // An example of displaying Hello World. After you click the button, Hello UI is displayed. @@ -30,14 +31,19 @@ struct Hello { } ``` -## 基本概念描述 + +## 基本概念描述 上述示例代码描述了简单页面的结构，并介绍了以下基本概念： -- **装饰器：**方舟开发框架定义了一些具有特殊含义的装饰器，用于装饰类、结构、方法和变量。例如，上例中的**@Entry**、**@Component**和**@State**都是装饰器； -- **自定义组件：**可重用的UI单元，可以与其他组件组合，如**@Component**装饰的**struct Hello**； -- **UI描述：**声明性描述UI结构，例如**build\(\)**方法中的代码块； -- **内置组件：**框架中默认内置的基本组件和布局组件，开发者可以直接调用，如**Column**、**Text**、**Divider**、**Button**等； -- **属性方法：**用于配置组件属性，如**fontSize\(\)**、**width\(\)**、**height\(\)**、**color\(\)**等； -- **事件方法：**在事件方法的回调中添加组件响应逻辑。例如，为Button组件添加onClick方法，在onClick方法的回调中添加点击响应逻辑。 +- **装饰器：**方舟开发框架定义了一些具有特殊含义的装饰器，用于装饰类、结构、方法和变量。例如，上例中的**@Entry**、**@Component**和**@State**都是装饰器。 + +- **自定义组件：**可重用的UI单元，可以与其他组件组合，如**@Component**装饰的**struct Hello**。 + +- **UI描述：**声明性描述UI结构，例如**build()**方法中的代码块。 + +- **内置组件：**框架中默认内置的基本组件和布局组件，开发者可以直接调用，如**Column**、**Text**、**Divider**、**Button**等。 + +- **属性方法：**用于配置组件属性，如**fontSize()**、**width()**、**height()**、**color()**等。 +- **事件方法：**在事件方法的回调中添加组件响应逻辑。例如，为Button组件添加onClick方法，在onClick方法的回调中添加点击响应逻辑。 diff --git a/zh-cn/application-dev/ui/ts-general-ui-description-specifications.md b/zh-cn/application-dev/ui/ts-general-ui-description-specifications.md index 664bd7b5c75d5b53f19436a29e5e116b6dbd3008..958933caf59a0b1aa032f7a8a4a59642f2dd4688 100644 --- a/zh-cn/application-dev/ui/ts-general-ui-description-specifications.md +++ b/zh-cn/application-dev/ui/ts-general-ui-description-specifications.md @@ -1,9 +1,7 @@ -# 通用UI描述规范 +# 通用UI描述规范 -- **[基本概念](ts-general-ui-concepts.md)** - -- **[声明式UI描述规范](ts-declarative-ui-description-specifications.md)** - -- **[组件化](ts-component-based.md)** +- **[基本概念](ts-general-ui-concepts.md)** +- **[声明式UI描述规范](ts-declarative-ui-description-specifications.md)** +- **[组件化](ts-component-based.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-instantiating-a-struct-without-new-keyword.md b/zh-cn/application-dev/ui/ts-instantiating-a-struct-without-new-keyword.md deleted file mode 100644 index 1e138d21cfe1b513619e45dfa8b8068568af7f6d..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/ts-instantiating-a-struct-without-new-keyword.md +++ /dev/null @@ -1,25 +0,0 @@ -# 在实例化过程中省略"new" - - - -对于**struct**的实例化，可以省略**new**。 - - -``` -// 定义 -@Component -struct MyComponent { - build() { - } -} - -// 使用 -Column() { - MyComponent() -} - -// 等价于 -new Column() { - new MyComponent() -} -``` diff --git a/zh-cn/application-dev/ui/ts-managing-application-states.md b/zh-cn/application-dev/ui/ts-managing-application-states.md index 73502ac9402555a26100924e606512726e3ae488..07afc55b98d16bceff074b1c4c90b0a39e6dd0cb 100644 --- a/zh-cn/application-dev/ui/ts-managing-application-states.md +++ b/zh-cn/application-dev/ui/ts-managing-application-states.md @@ -1,9 +1,7 @@ -# 管理应用程序的状态 +# 管理应用程序的状态 -- **[应用程序的数据存储](ts-application-states-appstorage.md)** - -- **[持久化数据管理](ts-application-states-apis-persistentstorage.md)** - -- **[环境变量](ts-application-states-apis-environment.md)** +- **[应用程序的数据存储](ts-application-states-appstorage.md)** +- **[持久化数据管理](ts-application-states-apis-persistentstorage.md)** +- **[环境变量](ts-application-states-apis-environment.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-managing-component-states.md b/zh-cn/application-dev/ui/ts-managing-component-states.md index 3432c79f2d34fe7dda48e8bb9cb83000fd90060e..1716bf3f85009d766033c4f58c1a8fecbdf49126 100644 --- a/zh-cn/application-dev/ui/ts-managing-component-states.md +++ b/zh-cn/application-dev/ui/ts-managing-component-states.md @@ -1,9 +1,7 @@ -# 管理组件拥有的状态 +# 管理组件拥有的状态 -- **[@State](ts-component-states-state.md)** - -- **[@Prop](ts-component-states-prop.md)** - -- **[@Link](ts-component-states-link.md)** +- **[@State](ts-component-states-state.md)** +- **[@Prop](ts-component-states-prop.md)** +- **[@Link](ts-component-states-link.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-managing-other-states.md b/zh-cn/application-dev/ui/ts-managing-other-states.md index a3a2768f1e056fb67ef7b8f3b688a0fd67322c6d..c8b1bac17f7fca90f9cfe4821f7cd05c004f53b9 100644 --- a/zh-cn/application-dev/ui/ts-managing-other-states.md +++ b/zh-cn/application-dev/ui/ts-managing-other-states.md @@ -1,9 +1,8 @@ -# 其他类目的状态管理 +# 其他类目的状态管理 -- **[Observed和ObjectLink数据管理](ts-other-states-observed-objectlink.md)** +- **[Observed和ObjectLink数据管理](ts-other-states-observed-objectlink.md)** -- **[@Consume和@Provide数据管理](ts-other-states-consume-provide.md)** - -- **[@Watch](ts-other-states-watch.md)** +- **[@Consume和@Provide数据管理](ts-other-states-consume-provide.md)** +- **[@Watch](ts-other-states-watch.md)** diff --git a/zh-cn/application-dev/ui/ts-other-states-consume-provide.md b/zh-cn/application-dev/ui/ts-other-states-consume-provide.md index 04cdf7f95e9249056cc011275e36d066d6c910e7..20d91eb13ec5a768f794d0cb7ffe6965c18605eb 100644 --- a/zh-cn/application-dev/ui/ts-other-states-consume-provide.md +++ b/zh-cn/application-dev/ui/ts-other-states-consume-provide.md @@ -1,62 +1,30 @@ -# @Consume和@Provide数据管理 +# @Consume和@Provide数据管理 Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。Consume在感知到Provide数据的更新后，会触发当前view的重新渲染。 -**表 1** @Provide +**表1** @Provide - - - - - - - - - - - - - - - - - - -

名称

-

说明

-

装饰器参数

-

是一个string类型的常量，用于给装饰的变量起别名。如果规定别名，则提供对应别名的数据更新。如果没有，则使用变量名作为别名。推荐使用@Provide("alias")这种形式。

-

同步机制

-

@Provide的变量类似@state，可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量，反向修改@State变量。

-

初始值

-

必须制定初始值。

-

页面重渲染场景

-

触发页面渲染的修改：

-
  • 基础类型（boolean，string，number）的改变；
  • @Observed class类型变量及其属性的修改；
  • 添加，删除，更新数组中的元素。
-
+| 名称 | 说明 | +| -------- | -------- | +| 装饰器参数 | 是一个string类型的常量，用于给装饰的变量起别名。如果规定别名，则提供对应别名的数据更新。如果没有，则使用变量名作为别名。推荐使用@Provide("alias")这种形式。 | +| 同步机制 | @Provide的变量类似@state，可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量，反向修改@State变量。 | +| 初始值 | 必须制定初始值。 | +| 页面重渲染场景 | 触发页面渲染的修改：
- 基础类型（boolean，string，number）变量的改变；
- @Observed class类型变量及其属性的修改；
- 添加，删除，更新数组中的元素。 | -**表 2** @Consume +**表2** @Consume - - - - - - - - - -

类型

-

说明

-

初始值

-

不可设置默认值。

-
+| 类型 | 说明 | +| -------- | -------- | +| 初始值 | 不可设置默认值。 | + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 使用@Provide 和@Consume时避免循环引用导致死循环。 ->![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->使用@Provide 和@Consume时避免循环引用导致死循环。 其他属性说明与Provide一致。 + ``` @Entry @Component @@ -102,4 +70,3 @@ struct CompC { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md b/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md index 3a654775f8a367741763d8785dd125d2ed8ef8cf..f37d1b09dac450a846d33720f575b4ee37423635 100644 --- a/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md +++ b/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md @@ -1,14 +1,16 @@ -# Observed和ObjectLink数据管理 - +# Observed和ObjectLink数据管理 本章将引入两个新的装饰符@Observed和@ObjectLink： -- @Observed应用于类，表示该类中的数据变更被UI页面管理，例如：@Observed class ClassA \{\}。 -- @ObjectLink应用于被@Observed所装饰类的对象，例如：@ObjectLink a: ClassA。 -## 引入动机 +- **@Observed**应用于类，表示该类中的数据变更被UI页面管理，例如：@Observed class ClassA {}。 + +- **@ObjectLink**应用于被@Observed所装饰类的对象，例如：@ObjectLink a: ClassA。 + -当开发者需要在子组件中针对父组件的一个变量（parent\_a）设置双向同步时，开发者可以在父组件中使用@State装饰变量（parsent\_a），并在子组件中使用@Link装饰相应的变量（child\_a）。这样的话，不仅可以实现父组件与单个子组件之间的数据同步，也可以实现父组件与多个子组件之间的数据同步。如下图所示，可以看到，父子组件针对ClassA类型的变量设置了双向同步，那么当子组件1中变量的属性c的值变化时，会通知父组件同步变化，而当父组件中属性c的值变化时，会通知所有子组件同步变化。 +## 引入动机 + +当开发者需要在子组件中针对父组件的一个变量（parent_a）设置双向同步时，开发者可以在父组件中使用\@State装饰变量（parent_a），并在子组件中使用@Link装饰相应的变量（child_a）。这样的话，不仅可以实现父组件与单个子组件之间的数据同步，也可以实现父组件与多个子组件之间的数据同步。如下图所示，可以看到，父子组件针对ClassA类型的变量设置了双向同步，那么当子组件1中变量的属性c的值变化时，会通知父组件同步变化，而当父组件中属性c的值变化时，会通知所有子组件同步变化。 ![](figures/zh-cn_image_0000001251090821.png) @@ -16,24 +18,28 @@ ![](figures/zh-cn_image_0000001206450834.png) -## 设置要求 -- @Observed 用于类，@ObjectLink 用于变量。 -- @ObjectLink装饰的变量类型必须为类（class type）。 - - 类要被@Observed装饰器所装饰。 - - 不支持简单类型参数，可以使用@Prop进行单向同步。 +## 设置要求 + +- @Observed 用于类，@ObjectLink 用于变量。 -- @ObjectLink装饰的变量是不可变的（immutable）。 - - 属性的改动是被允许的，当改动发生时，如果同一个对象被多个@ObjectLink变量所引用，那么所有拥有这些变量的自定义组件都会被通知去重新渲染。 +- @ObjectLink装饰的变量类型必须为类（class type）。 + - 类要被\@Observed装饰器所装饰。 + - 不支持简单类型参数，可以使用@Prop进行单向同步。 -- @ObjectLink装饰的变量不可设置默认值。 - - 必须让父组件中有一个由@State、@Link、@StorageLink、@Provide或@Consume所装饰变量参与的TS表达式进行初始化。 +- @ObjectLink装饰的变量是不可变的（immutable）。 + - 属性的改动是被允许的，当改动发生时，如果同一个对象被多个@ObjectLink变量所引用，那么所有拥有这些变量的自定义组件都会被通知去重新渲染。 -- @ObjectLink装饰的变量是私有变量，只能在组件内访问。 +- @ObjectLink装饰的变量不可设置默认值。 + - 必须让父组件中有一个由@State、@Link、@StorageLink、@Provide或@Consume所装饰变量参与的TS表达式进行初始化。 -## 示例 +- @ObjectLink装饰的变量是私有变量，只能在组件内访问。 -### 案例1 + +## 示例 + + +### 案例1 ``` @Observed @@ -109,7 +115,8 @@ struct ViewB { } ``` -### 案例2 + +### 案例2 ``` var nextID: number = 0; @@ -169,4 +176,3 @@ struct ViewB { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-other-states-watch.md b/zh-cn/application-dev/ui/ts-other-states-watch.md index cc89576b6449f5c6a488d4a5878370ad391cc5c1..40c9dd2d5047db2e43be2f6d0b6ae130cb42317b 100644 --- a/zh-cn/application-dev/ui/ts-other-states-watch.md +++ b/zh-cn/application-dev/ui/ts-other-states-watch.md @@ -1,14 +1,18 @@ -# @Watch +# @Watch @Watch用于监听状态变量的变化，语法结构为： + ``` @State @Watch("onChanged") count : number = 0 ``` + 如上给状态变量增加一个@Watch装饰器，通过@Watch注册一个回调方法onChanged， 当状态变量count被改变时， 触发onChanged回调。 -装饰器@State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp以及 @StorageLink装饰的变量可以监听其变化。 + +装饰器@State、@Prop、@Link、@ObjectLink、@Provide、@Consume、@StorageProp以及@StorageLink装饰的变量可以监听其变化。 + ``` @Entry @@ -20,7 +24,7 @@ struct CompA { updateTotal() : number { let sum = 0; this.shopBasket.forEach((i) => { sum += i; }); - // calculate new total shop basket value and apply discount if over 100RMB + // 计算新的购物篮总价值，如果超过100RMB，则适用折扣 this.totalPurchase = (sum < 100) ? sum : 0.9 * sum; return this.totalPurchase; } @@ -39,4 +43,3 @@ struct CompA { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-parameterless-configuration.md b/zh-cn/application-dev/ui/ts-parameterless-configuration.md index d1f30e5e6186706be091aff25e06ec23b57aaef0..d7bfea37a140bdb7cd23896f710e47dc2b6b4355 100644 --- a/zh-cn/application-dev/ui/ts-parameterless-configuration.md +++ b/zh-cn/application-dev/ui/ts-parameterless-configuration.md @@ -1,6 +1,8 @@ -# 无构造参数配置 +# 无参数构造配置 + + +组件的接口定义不包含必选构造参数，组件后面的**“()”**中不需要配置任何内容。例如，**Divider**组件不包含构造参数： -组件的接口定义不包含必选构造参数，组件后面的“**\(\)**”中不需要配置任何内容。例如，**Divider**组件不包含构造参数： ``` Column() { @@ -9,4 +11,3 @@ Column() { Text('item 2') } ``` - diff --git a/zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md b/zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md index 8b1fb5d11df6546731b390bbe14f86d2ccde562f..d41fbef1ad0edf7abe293ec1a0ecb3adeca30f20 100644 --- a/zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md +++ b/zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md @@ -1,7 +1,8 @@ -# 循环渲染 +# 循环渲染 开发框架提供**循环渲染（**ForEach组件）来迭代数组，并为每个数组项创建相应的组件。**ForEach**定义如下： + ``` ForEach( arr: any[], // Array to be iterated @@ -10,76 +11,42 @@ ForEach( ) ``` -## ForEach - -ForEach\(arr: any\[\],itemGenerator: \(item: any, index?: number\) =\> void, keyGenerator?: \(item: any, index?: number\) =\> string\):void - -**表 1** 参数说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

arr

-

any[]

-

是

-

-

-

必须是数组，允许空数组，空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数，例如arr.slice(1, 3)，设置的函数不得改变包括数组本身在内的任何状态变量，如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。

-

itemGenerator

-

(item: any, index?: number) => void

-

是

-

-

-

生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。

-

keyGenerator

-

(item: any, index?: number) => string

-

否

-

-

-

匿名参数，用于给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建

-
- ->![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->- 必须在容器组件内使用； ->- 生成的子组件允许在**ForEach**的父容器组件中，允许子组件生成器函数中包含**if/else**条件渲染，同时也允许**ForEach**包含在**if/else**条件渲染语句中； ->- 子项生成器函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作： -> ``` -> ForEach(anArray, item => {Text(`${++counter}. item.label`)}) -> ``` -> 正确的示例如下： -> ``` -> ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }), -> item => Text(`${item.i}. item.data.label`), -> item => item.data.id.toString()) -> ``` - -## 示例 + +## ForEach + + +ForEach(arr: any[],itemGenerator: (item: any, index?: number) => void, keyGenerator?: (item: any, index?: number) => string):void + + +**表1** 参数说明 + +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| arr | any[] | 是 | - | 必须是数组，允许空数组，空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数，例如arr.slice(1, 3)，设置的函数不得改变包括数组本身在内的任何状态变量，如**Array.splice**、**Array.sort**或**Array.reverse**这些改变原数组的函数。 | +| itemGenerator | (item: any, index?: number) => void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“**{....}**”中。 | +| keyGenerator | (item: any, index?: number) => string | 否 | - | 匿名参数，用于给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。 | + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 必须在容器组件内使用； +> +> - 生成的子组件允许在**ForEach**的父容器组件中，允许子组件生成器函数中包含**if/else**条件渲染，同时也允许**ForEach**包含在**if/else**条件渲染语句中； +> +> - 子项生成器函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作： +> ``` +> ForEach(anArray, item => {Text(`${++counter}. item.label`)}) +> ``` +> +> 正确的示例如下： +> +> ``` +> ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }), +> item => Text(`${item.i}. item.data.label`), +> item => item.data.id.toString()) +> ``` + + +## 示例 简单类型数组示例： @@ -109,7 +76,6 @@ struct MyComponent { ``` 复杂类型数组示例： - ``` class Month { year: number @@ -172,4 +138,3 @@ struct Calendar1 { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md b/zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md index 3ef816d29ec5680cf80cb7b3e25ef125d98e52ef..faab1b9af7930d197d570b8305455a69a4fee41d 100644 --- a/zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md +++ b/zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md @@ -1,14 +1,19 @@ -# 条件渲染 +# 条件渲染 使用**if/else**进行条件渲染。 ->![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->- if条件语句可以使用状态变量。 ->- 使用if可以使子组件的渲染依赖条件语句。 ->- 必须在容器组件内使用。 ->- 某些容器组件限制子组件的类型或数量。将if放置在这些组件内时，这些限制将应用于if和else语句内创建的组件。例如，Grid组件的子组件仅支持GridItem组件，在Grid组件内使用if时，则if条件语句内仅允许使用GridItem组件。 -## 示例 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - if条件语句可以使用状态变量。 +> +> - 使用if可以使子组件的渲染依赖条件语句。 +> +> - 必须在容器组件内使用。 +> +> - 某些容器组件限制子组件的类型或数量。将if放置在这些组件内时，这些限制将应用于if和else语句内创建的组件。例如，Grid组件的子组件仅支持GridItem组件，在Grid组件内使用if时，则if条件语句内仅允许使用GridItem组件。 + + +## 示例 使用if条件语句： @@ -20,8 +25,10 @@ Column() { } ``` + 使用if、else if、else条件语句： + ``` Column() { if (this.count < 0) { @@ -35,4 +42,3 @@ Column() { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md b/zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md index 27777d24226e4ec67fc3ea5f159db4ddd5deecb9..aab8292c7bb37eafc24567939ad3e42659de7243 100644 --- a/zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md +++ b/zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md @@ -1,7 +1,8 @@ -# 数据懒加载 +# 数据懒加载 开发框架提供**数据懒加载**（LazyForEach组件）从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。**LazyForEach**定义如下： + ``` LazyForEach( dataSource: IDataSource, // Data source to be iterated @@ -25,150 +26,70 @@ interface DataChangeListener { } ``` -## 接口 -### LazyForEach +## 接口 + + +### LazyForEach + +LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyGenerator?: (item: any) => string):void -LazyForEach\(dataSource: IDataSource, itemGenerator: \(item: any\) =\> void, keyGenerator?: \(item: any\) =\> string\):void +**表1** 参数说明 -**表 1** 参数说明 +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| dataSource | IDataSource | 是 | - | 实现IDataSource接口的对象，需要开发者实现相关接口。 | +| itemGenerator | (item: any) => void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“**{....}**”中。 | +| keyGenerator | (item: any) => string | 否 | - | 匿名函数，用于键值生成，为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。 | - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

默认值

-

参数描述

-

dataSource

-

IDataSource

-

是

-

-

-

实现IDataSource接口的对象，需要开发者实现相关接口。

-

itemGenerator

-

(item: any) => void

-

是

-

-

-

生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。

-

keyGenerator

-

(item: any) => string

-

否

-

-

-

匿名函数，用于键值生成，为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。

-
-**表 2** IDataSource类型说明 +**表2** IDataSource类型说明 - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

totalCount(): number

-

获取数据总数。

-

getData(index: number): any

-

获取索引对应的数据。

-

registerDataChangeListener(listener: DataChangeListener): void

-

注册改变数据的控制器。

-

unregisterDataChangeListener(listener: DataChangeListener): void

-

注销改变数据的控制器。

-
+| 名称 | 描述 | +| -------- | -------- | +| totalCount(): number | 获取数据总数。 | +| getData(index: number): any | 获取索引对应的数据。 | +| registerDataChangeListener(listener:DataChangeListener): void | 注册改变数据的控制器。 | +| unregisterDataChangeListener(listener:DataChangeListener): void | 注销改变数据的控制器。 | -**表 3** DataChangeListener类型说明 - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

onDataReloaded(): void

-

重新加载所有数据。

-

onDataAdded(index: number): void

-

通知组件index的位置有数据添加。

-

onDataMoved(from: number, to: number): void

-

通知组件数据从from的位置移到to的位置。

-

onDataDeleted(index: number): void

-

通知组件index的位置有数据删除。

-

onDataChanged(index: number): void

-

通知组件index的位置有数据变化。

-
+**表3** DataChangeListener类型说明 ->![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->- 数据懒加载必须在容器组件内使用，且仅有List、Grid以及Swiper组件支持数据的懒加载（即只加载可视部分以及其前后少量数据用于缓冲），其他组件仍然是一次加载所有的数据； ->- **LazyForEach**在每次迭代中，必须且只允许创建一个子组件； ->- 生成的子组件必须允许在**LazyForEach**的父容器组件中； ->- 允许**LazyForEach**包含在**if/else**条件渲染语句中，不允许**LazyForEach**中出现**if/else**条件渲染语句； ->- 为了高性能渲染，通过DataChangeListener对象的onDataChanged方法来更新UI时，仅itemGenerator中的UI描述的组件内使用了状态变量时，才会触发组件刷新； ->- 子项生成器函数的调用顺序不一定和数据源中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作： -> ``` -> LazyForEach(dataSource, item => {Text(`${++counter}. item.label`)}) -> ``` -> 正确的示例如下： -> ``` -> LazyForEach(dataSource, -> item => Text(`${item.i}. item.data.label`)), -> item => item.data.id.toString()) -> ``` +| 名称 | 描述 | +| -------- | -------- | +| onDataReloaded(): void | 重新加载所有数据。 | +| onDataAdded(index: number): void | 通知组件index的位置有数据添加。 | +| onDataMoved(from: number, to: number): void | 通知组件数据从from的位置移到to的位置。 | +| onDataDeleted(index: number): void | 通知组件index的位置有数据删除。 | +| onDataChanged(index: number): void | 通知组件index的位置有数据变化。 | -## 示例 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 数据懒加载必须在容器组件内使用，且仅有List、Grid以及Swiper组件支持数据的懒加载（即只加载可视部分以及其前后少量数据用于缓冲），其他组件仍然是一次加载所有的数据； +> +> - **LazyForEach**在每次迭代中，必须且只允许创建一个子组件； +> +> - 生成的子组件必须允许在**LazyForEach**的父容器组件中； +> +> - 允许**LazyForEach**包含在**if/else**条件渲染语句中，不允许**LazyForEach**中出现**if/else**条件渲染语句； +> +> - 为了高性能渲染，通过DataChangeListener对象的onDataChanged方法来更新UI时，仅itemGenerator中的UI描述的组件内使用了状态变量时，才会触发组件刷新； +> +> - 子项生成器函数的调用顺序不一定和数据源中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作： +> ``` +> LazyForEach(dataSource, item => {Text(`${++counter}. item.label`)}) +> ``` +> +> 正确的示例如下： +> +> ``` +> LazyForEach(dataSource, +> item => Text(`${item.i}. item.data.label`)), +> item => item.data.id.toString()) +> ``` + + +## 示例 ``` // Basic implementation of IDataSource to handle data listener @@ -264,4 +185,3 @@ struct MyComponent { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-rending-control-syntax.md b/zh-cn/application-dev/ui/ts-rending-control-syntax.md index f054d5dbb18d9b4ecd8dfb21ce93c1993d8b8163..ad8488be18456caacdcadbdf0baddb61cf0e3e7a 100644 --- a/zh-cn/application-dev/ui/ts-rending-control-syntax.md +++ b/zh-cn/application-dev/ui/ts-rending-control-syntax.md @@ -1,9 +1,7 @@ -# 渲染控制语法 +# 渲染控制语法 -- **[条件渲染](ts-rending-control-syntax-if-else.md)** - -- **[循环渲染](ts-rending-control-syntax-foreach.md)** - -- **[数据懒加载](ts-rending-control-syntax-lazyforeach.md)** +- **[条件渲染](ts-rending-control-syntax-if-else.md)** +- **[循环渲染](ts-rending-control-syntax-foreach.md)** +- **[数据懒加载](ts-rending-control-syntax-lazyforeach.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-restrictions-for-generators.md b/zh-cn/application-dev/ui/ts-restrictions-for-generators.md deleted file mode 100644 index edad88d45be20326f65ddd4dc49e63fe1efd1227..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/ts-restrictions-for-generators.md +++ /dev/null @@ -1,34 +0,0 @@ -# 生成器函数内使用TS语言的限制 - - - -TS语言的使用在生成器函数中存在一定的限制： - - -- 表达式仅允许在字符串(${expression})、if条件、ForEach的参数和组件的参数中使用； - -- 这些表达式中的任何一个都不能导致任何应用程序状态变量（@State、@Link、@Prop）的改变，否则会导致未定义和潜在不稳定的框架行为； - -- 允许在生成器函数体的第一行使用console.log，以便开发人员更容易跟进组件重新渲染。对日志字符串文字中表达式仍遵循上述限制。 - -- 生成器函数内部不能有局部变量。 - - -上述限制都不适用于事件处理函数（例如**onClick**）的匿名函数实现，它们也不适用于UI组件描述外的其余部分。 - - -非法示例： - - -``` -build() { - let a: number = 1 // invalid: variable declaration not allowed - console.log(`a: ${a}`) // invalid: console.log only allowed in first line of build - Column() { - Text('Hello ${this.myName.toUpperCase()}') // ok. - ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array varible in place - } - buildSpecial() // invalid: no function calls - Text(this.calcTextValue()) // this function call is ok. -} -``` diff --git a/zh-cn/application-dev/ui/ts-syntactic-sugar-chaining.md b/zh-cn/application-dev/ui/ts-syntactic-sugar-chaining.md deleted file mode 100644 index dc8d538f2a613c57eba36107c49a0aaa1fea9521..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/ts-syntactic-sugar-chaining.md +++ /dev/null @@ -1,15 +0,0 @@ -# 链式调用 - - - -允许开发者以“.”链式调用的方式配置UI结构及其属性、事件等。 - - -``` -Column() { - Image('1.jpg') - .alt('error.jpg') - .width(100) - .height(100) -}.padding(10) -``` diff --git a/zh-cn/application-dev/ui/ts-syntactic-sugar-decorator.md b/zh-cn/application-dev/ui/ts-syntactic-sugar-decorator.md deleted file mode 100644 index e01a7ab7faf86909b072c7feb1c5cb2e7e70c1ee..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/ts-syntactic-sugar-decorator.md +++ /dev/null @@ -1,48 +0,0 @@ -# 装饰器 - -装饰器**@Decorator**，被装饰的元素可以是变量声明，类定义，结构体定义，方法定义等，赋予其特殊的含义。 - - -多个装饰器实现可以叠加到目标元素，书写在同一行上或者在多行上，推荐书写在多行上。 - - -如下**@Component**和**@State**的使用，被**@Component**装饰的元素具备了组件化的含义，使用**@State**装饰的变量具备了状态数据的含义： - - -``` -@Component -struct MyComponent { - @State count: number = 0 -} -``` - - -装饰器可以书写在同一行上： - - -``` -@Entry @Component struct MyComponent { -} -``` - - -但更推荐书写在多行上： - - -``` -@Entry -@Component -struct MyComponent { -} -``` - - -## 支持的装饰器列表 - -| 装饰器 | 装饰内容 | 说明 | -| -------- | -------- | -------- | -| @Component | struct | 结构体在装饰后具有基于组件的能力，需要实现**build**方法来更新UI。 | -| @Entry | struct | 组件被装饰后作为页面的入口，页面加载时将被渲染显示。 | -| @State | 基本数据类型，类，数组 | 修饰的状态数据被修改时会触发组件的**build**方法进行UI界面更新。 | -| @Prop | 基本数据类型 | 修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，更新当前组件的UI。 | -| @Link | 基本数据类型，类，数组 | 父子组件之间的双向数据绑定。父组件的内部状态数据作为数据源。任何一方所做的修改都会反映给另一方。 | diff --git a/zh-cn/application-dev/ui/ts-syntactic-sugar-struct.md b/zh-cn/application-dev/ui/ts-syntactic-sugar-struct.md deleted file mode 100644 index 01ee970bfb58bf99202a64a4d2487785a7e83b9a..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/ts-syntactic-sugar-struct.md +++ /dev/null @@ -1,16 +0,0 @@ -# struct对象 - - - -组件可以基于**struct**实现，组件不能有继承关系，**struct**可以比**class**更加快速的创建和销毁。 - - -``` -@Component -struct MyComponent { - @State data: string = '' - - build() { - } -} -``` diff --git a/zh-cn/application-dev/ui/ts-syntactic-sugar.md b/zh-cn/application-dev/ui/ts-syntactic-sugar.md index 8247ffe1eb2d47b57736612a7d4b07f1c1f2de32..6b85b89b8b385d5ae88c9fc4141b800aad122047 100644 --- a/zh-cn/application-dev/ui/ts-syntactic-sugar.md +++ b/zh-cn/application-dev/ui/ts-syntactic-sugar.md @@ -1,11 +1,14 @@ -# 语法糖 +# 语法糖 + +## 装饰器 -## 装饰器 装饰器**@Decorator**不仅可以装饰类或结构体，还可以装饰类的属性。多个装饰器可以叠加到目标元素，定义在同一行上或者在多行上，推荐定义在多行上。 + 如下示例为**@Component**和**@State**的使用，被**@Component**装饰的元素具备了组件化的含义，使用**@State**装饰的变量具备了状态数据的含义。 + ``` @Component struct MyComponent { @@ -13,15 +16,19 @@ struct MyComponent { } ``` + 装饰器定义在同一行上的描述如下： + ``` @Entry @Component struct MyComponent { } ``` + 但更推荐定义在多行上： + ``` @Entry @Component @@ -29,119 +36,28 @@ struct MyComponent { } ``` -### 支持的装饰器列表 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

装饰器

-

装饰内容

-

说明

-

@Component

-

struct

-

结构体在装饰后具有基于组件的能力，需要实现build方法来更新UI。

-

@Entry

-

struct

-

组件被装饰后作为页面的入口，页面加载时将被渲染显示。

-

@Preview

-

struct

-

用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview装饰的自定义组件。

-

@Builder

-

方法

-

@Builder装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。

-

@Extend

-

方法

-

@Extend装饰器将新的属性函数添加到内置组件上，通过@Extend装饰器可以快速定义并复用组件的自定义样式。

-

@CustomDialog

-

struct

-

@CustomDialog装饰器用于装饰自定义弹窗。

-

@State

-

基本数据类型，类，数组

-

修饰的状态数据被修改时会触发组件的build方法进行UI界面更新。

-

@Prop

-

基本数据类型

-

修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，更新当前组件的UI。

-

@Link

-

基本数据类型，类，数组

-

父子组件之间的双向数据绑定，父组件的内部状态数据作为数据源，任何一方所做的修改都会反映给另一方。

-

@Observed

-

类

-

@Observed应用于类，表示该类中的数据变更被UI页面管理。

-

@ObjectLink

-

被@Observed所装饰类的对象

-

@ObjectLink应用于被@Observed所装饰类的对象。

-

@Consume

-

基本数据类型，类，数组

-

Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。

-

@Provide

-

基本数据类型，类，数组

-

Consume在感知到Provide数据的更新后，会触发当前view的重新渲染。

-

@Watch

-

被@State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp， @StorageLink中任意一个装饰的变量

-

@Watch用于监听状态变量的变化，应用可以注册回调方法。

-
- -## 链式调用 + +### 支持的装饰器列表 + +| 装饰器 | 装饰内容 | 说明 | +| -------- | -------- | -------- | +| @Component | struct | 结构体在装饰后具有基于组件的能力，需要实现**build**方法来更新UI。 | +| @Entry | struct | 组件被装饰后作为页面的入口，页面加载时将被渲染显示。 | +| @Preview | struct | 用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview装饰的自定义组件。 | +| @Builder | 方法 | 在@Builder装饰的方法用通过声明式UI描述，可以在一个自定义组件内快速生成多个布局内容。 | +| @Extend | 方法 | @Extend装饰器将新的属性函数添加到内置组件上，通过@Extend装饰器可以快速定义并复用组件的自定义样式。 | +| @CustomDialog | struct | @CustomDialog装饰器用于装饰自定义弹窗。 | +| @State | 基本数据类型，类，数组 | 修饰的状态数据被修改时会触发组件的**build**方法进行UI界面更新。 | +| @Prop | 基本数据类型 | 修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，更新当前组件的UI。 | +| @Link | 基本数据类型，类，数组 | 父子组件之间的双向数据绑定，父组件的内部状态数据作为数据源，任何一方所做的修改都会反映给另一方。 | +| @Observed | 类 | @Observed应用于类，表示该类中的数据变更被UI页面管理。 | +| @ObjectLink | 被@Observed所装饰类的对象 | 装饰的状态数据被修改时，在父组件或者其他兄弟组件内与它关联的状态数据所在的组件都会更新UI。 | +| @Consume | 基本数据类型，类，数组 | @Consume装饰的变量在感知到@Provide装饰的变量更新后，会触发当前自定义组件的重新渲染。 | +| @Provide | 基本数据类型，类，数组 | @Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。 | +| @Watch | 被@State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp， @StorageLink中任意一个装饰的变量 | @Watch用于监听状态变量的变化，应用可以注册回调方法。 | + + +## 链式调用 允许开发者以“.”链式调用的方式配置UI结构及其属性、事件等。 @@ -154,7 +70,8 @@ Column() { }.padding(10) ``` -## struct对象 + +## struct对象 组件可以基于**struct**实现，组件不能有继承关系，**struct**可以比**class**更加快速的创建和销毁。 @@ -168,7 +85,8 @@ struct MyComponent { } ``` -## 在实例化过程中省略"new" + +## 在实例化过程中省略"new" 对于**struct**的实例化，可以省略**new**。 @@ -191,15 +109,18 @@ new Column() { } ``` -## 生成器函数内使用TS语言的限制 + +## TS语言在生成器函数中的使用限制 TS语言的使用在生成器函数中存在一定的限制： -- 表达式仅允许在字符串\($\{expression\}\)、if条件、ForEach的参数和组件的参数中使用； -- 这些表达式中的任何一个都不能导致任何应用程序状态变量（@State、@Link、@Prop）的改变，否则会导致未定义和潜在不稳定的框架行为； -- 生成器函数内部不能有局部变量。 +- 表达式仅允许在字符串(${expression})、if条件、ForEach的参数和组件的参数中使用； + +- 这些表达式中的任何一个都不能导致任何应用程序状态变量（@State、@Link、@Prop）的改变，否则会导致未定义和潜在不稳定的框架行为； -上述限制都不适用于事件处理函数（例如**onClick**）的匿名函数实现，它们也不适用于UI组件描述外的其余部分。 +- 生成器函数内部不能有局部变量。 + +上述限制都不适用于事件处理函数（例如**onClick**）的匿名函数实现。 非法示例： @@ -214,4 +135,3 @@ build() { Text(this.calcTextValue()) // this function call is ok. } ``` - diff --git a/zh-cn/application-dev/ui/ts-syntax-intro.md b/zh-cn/application-dev/ui/ts-syntax-intro.md index 90348c240af10b24c92091e228f25725e65268e9..39619c8bd25d6d55bdd272d06ec71323e45adcb2 100644 --- a/zh-cn/application-dev/ui/ts-syntax-intro.md +++ b/zh-cn/application-dev/ui/ts-syntax-intro.md @@ -1,12 +1,14 @@ -# 描述规范使用说明 +# 描述规范使用说明 本节定义了基于TS扩展的声明式开发范式的核心机制和功能。讲述了声明式UI描述、组件化机制、UI状态管理、渲染控制语法和语法糖。 + 本节为应用开发人员开发UI提供了参考规范。有关组件的详细信息，请参考[组件说明](../reference/arkui-ts/ts-components.md)。 ->**说明：** -> ->- 所有示例都以TypeScript \(TS\)语言为例，请遵循相应语言的语法要求。 ->- 示例中的**Image**、**Button**、**Text**、**Divider**、**Row**和**Column**等组件是UI框架中预置的组件控件，仅用于解释UI描述规范。 ->- 通用属性方法和事件方法通常支持所有组件，而组件内的属性方法和事件方法仅对当前组件有效。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 所有示例都以TypeScript (TS)语言为例，请遵循相应语言的语法要求。 +> +> - 示例中的**Image**、**Button**、**Text**、**Divider**、**Row**和**Column**等组件是UI框架中预置的组件控件，仅用于解释UI描述规范。 +> +> - 通用属性方法和事件方法通常支持所有组件，而组件内的属性方法和事件方法仅对当前组件有效。 diff --git a/zh-cn/application-dev/ui/ts-types.md b/zh-cn/application-dev/ui/ts-types.md index 82f029423026436a89aced783dbd905e3e7f42bf..1ed482389c6d7cc1308f650216ac076cfd7b3b8d 100644 --- a/zh-cn/application-dev/ui/ts-types.md +++ b/zh-cn/application-dev/ui/ts-types.md @@ -2,79 +2,102 @@ ## 长度类型 -| 名称 | 类型定义 | 描述 | +| 名称 | 类型定义 | 描述 | | -------- | -------- | -------- | -| Length | string \| number | 用于描述尺寸单位，输入为number类型时，使用vp单位；输入为string类型时，需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 | +| Length | string \| number | 用于描述尺寸单位，输入为number类型时，使用vp单位；输入为string类型时，需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 | ## 角度类型 -| 名称 | 类型定义 | 描述 | +| 名称 | 类型定义 | 描述 | | -------- | -------- | -------- | -| Angle | string \| number | 用于角度单位，输入为number类型时，使用deg单位；输入为string类型时需要显示指定角度单位，支持以下两种角度单位：
- deg：如'100deg'。
- rad：如'3.14rad'。 | +| Angle | string \| number | 用于角度单位，输入为number类型时，使用deg单位；输入为string类型时需要显示指定角度单位，支持以下两种角度单位：
- deg：如'100deg'。
- rad：如'3.14rad'。 | ## 点类型 -| 名称 | 类型定义 | 描述 | +| 名称 | 类型定义 | 描述 | | -------- | -------- | -------- | -| Point | [Length, Length] | 用于描述点坐标，第一个值为x轴坐标，第二个值为y坐标。 | +| Point | [Length, Length] | 用于描述点坐标，第一个值为x轴坐标，第二个值为y坐标。 | ## 颜色类型 组件属性方法使用的颜色Color说明如下： -| 名称 | 类型定义 | 描述 | +| 名称 | 类型定义 | 描述 | | -------- | -------- | -------- | -| Color | string \| number \| Color | 用于描述颜色信息，输入为string类型时，使用rgb或者rgba进行描述；输入为number类型是，使用HEX格式颜色；输入类型为Color枚举时，使用颜色枚举值。
- 'rgb(255, 255, 255)'。
- 'rgba(255, 255, 255, 1.0)'。
- HEX格式：0xrrggbb，0xaarrggbb，'\#FFFFFF'。
- 枚举格式：Color.Black，Color.White等。 | +| Color | string \| number \| Color | 用于描述颜色信息，输入为string类型时，使用rgb或者rgba进行描述；输入为number类型是，使用HEX格式颜色；输入类型为Color枚举时，使用颜色枚举值。
- 'rgb(255, 255, 255)'。
- 'rgba(255, 255, 255, 1.0)'。
- HEX格式：0xrrggbb，0xaarrggbb，'\#FFFFFF'。
- 枚举格式：Color.Black，Color.White等。 | 当前支持的Color颜色枚举： -| 颜色名称 | 颜色值 | 颜色示意 | +| 颜色名称 | 颜色值 | 颜色示意 | | -------- | -------- | -------- | -| Black | 0x000000 | ![zh-cn_image_0000001111680230](figures/zh-cn_image_0000001111680230.png) | -| Blue | 0x0000ff | ![zh-cn_image_0000001158240091](figures/zh-cn_image_0000001158240091.png) | -| Brown | 0xa52a2a | ![zh-cn_image_0000001158360079](figures/zh-cn_image_0000001158360079.png) | -| Gray | 0x808080 | ![zh-cn_image_0000001111840132](figures/zh-cn_image_0000001111840132.png) | -| Green | 0x008000 | ![zh-cn_image_0000001111680236](figures/zh-cn_image_0000001111680236.png) | -| Orange | 0xffa500 | ![zh-cn_image_0000001158240095](figures/zh-cn_image_0000001158240095.png) | -| Pink | 0xffc0cb | ![zh-cn_image_0000001158360085](figures/zh-cn_image_0000001158360085.png) | -| Red | 0xff0000 | ![zh-cn_image_0000001111840136](figures/zh-cn_image_0000001111840136.png) | -| White | 0xffffff | ![zh-cn_image_0000001111680240](figures/zh-cn_image_0000001111680240.png) | -| Yellow | 0xffff00 | ![zh-cn_image_0000001158240097](figures/zh-cn_image_0000001158240097.png) | +| Black | 0x000000 | ![zh-cn_image_0000001219864153](figures/zh-cn_image_0000001219864153.png) | +| Blue | 0x0000ff | ![zh-cn_image_0000001174104404](figures/zh-cn_image_0000001174104404.png) | +| Brown | 0xa52a2a | ![zh-cn_image_0000001219744201](figures/zh-cn_image_0000001219744201.png) | +| Gray | 0x808080 | ![zh-cn_image_0000001174264376](figures/zh-cn_image_0000001174264376.png) | +| Green | 0x008000 | ![zh-cn_image_0000001174422914](figures/zh-cn_image_0000001174422914.png) | +| Orange | 0xffa500 | ![zh-cn_image_0000001219662661](figures/zh-cn_image_0000001219662661.png) | +| Pink | 0xffc0cb | ![zh-cn_image_0000001219662663](figures/zh-cn_image_0000001219662663.png) | +| Red | 0xff0000 | ![zh-cn_image_0000001219662665](figures/zh-cn_image_0000001219662665.png) | +| White | 0xffffff | ![zh-cn_image_0000001174582866](figures/zh-cn_image_0000001174582866.png) | +| Yellow | 0xffff00 | ![zh-cn_image_0000001174582864](figures/zh-cn_image_0000001174582864.png) | ## ColorStop类型 颜色断点类型，用于描述渐进色颜色断点。 -| 名称 | 类型定义 | 描述 | +| 名称 | 类型定义 | 描述 | | -------- | -------- | -------- | -| ColorStop | [Color, number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 | +| ColorStop | [Color, number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 | -## ResourceStr类型 +## Resource类型 -| 名称 | 类型定义 | 描述 | +资源引用类型，用于设置组件属性的值。 + +可以通过$r或者$rawfile创建Resource类型对象，详见[资源访问](ts-media-resource-type.md)。 + +- $r('belonging.type.name') + belonging：系统资源或者应用资源，相应的取值为'sys'和'app'； + + type：资源类型，支持'color'、'float'、'string'、'media'等； + + name：资源名称，在资源定义时确定。 + +- $rawfile('filename') + filename：工程中resources/rawfile目录下的文件名称。 + +| 名称 | 类型定义 | 描述 | | -------- | -------- | -------- | -| ResourceStr | string \| Resource | 用于描述资源字符串的类型。 | +| Resource | {
readonly id: [number];
readonly type: [number];
readonly params?: any[];
} | id：资源id值
type：资源类型（枚举值）
params：可选参数
通过$r或者$rawfile创建Resource类型对象并使用即可，不可以修改Resource中的各属性的值。 | -## ResourceColor类型 +## ResourceStr类型8+ -| 名称 | 类型定义 | 描述 | +| 名称 | 类型定义 | 描述 | | -------- | -------- | -------- | -| ResourceColor | Color \| number \| string \| Resource | 用于描述资源颜色类型。 | +| ResourceStr | string \| [Resource](#resource类型) | 用于描述资源字符串的类型。 | + + +## ResourceColor类型8+ + +| 名称 | 类型定义 | 描述 | +| -------- | -------- | -------- | +| ResourceColor | Color \| number \| string \| [Resource](#resource类型) | 用于描述资源颜色类型。 | + +## CustomBuilder类型8+ -## Font类型 +组件属性方法参数可使用CustomBuilder类型来自定义UI描述。 | 名称 | 类型定义 | 描述 | | -------- | -------- | -------- | -| Font | {
size?: Length;
weight?: FontWeight  \| number  \| string;
family?: string  \| Resource;
style?: FontStyle;
} | 设置文本样式：
  • size: 设置文本尺寸，Length为number类型时，使用fp单位。
  • weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
  • family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
  • style: 设置文本的字体样式。
| +| CustomBuilder | () => any | 这种方法类型必须使用@Builder装饰器修饰。具体用法见[@Builder](ts-component-based-builder.md)。 | ## 示例 @@ -135,4 +158,4 @@ struct dataTypeExample { } ``` -![zh-cn_image_0000001214437889](figures/zh-cn_image_0000001214437889.png) +![zh-cn_image_0000001219982719](figures/zh-cn_image_0000001219982719.png) diff --git a/zh-cn/application-dev/ui/ts-ui-state-management.md b/zh-cn/application-dev/ui/ts-ui-state-management.md index 98a1b5c20488ebd827e533abbd43df7c3e1115d3..25fef852ee39cb3f0ead98111ccfd49e9a018d3f 100644 --- a/zh-cn/application-dev/ui/ts-ui-state-management.md +++ b/zh-cn/application-dev/ui/ts-ui-state-management.md @@ -1,11 +1,9 @@ -# UI状态管理 +# UI状态管理 -- **[基本概念](ts-ui-state-mgmt-concepts.md)** +- **[基本概念](ts-ui-state-mgmt-concepts.md)** -- **[管理组件拥有的状态](ts-managing-component-states.md)** - -- **[管理应用程序的状态](ts-managing-application-states.md)** - -- **[其他类目的状态管理](ts-managing-other-states.md)** +- **[管理组件拥有的状态](ts-managing-component-states.md)** +- **[管理应用程序的状态](ts-managing-application-states.md)** +- **[其他类目的状态管理](ts-managing-other-states.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md b/zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md index ef4d716d46f58c8813907beb92de44b21e3d1b0f..d09ee1c4690b8d17002f8ff17a3147c59a2c7819 100644 --- a/zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md +++ b/zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md @@ -1,20 +1,27 @@ -# 基本概念 +# 基本概念 + +在声明式UI编程范式中，UI是应用程序状态的函数，开发人员通过修改当前应用程序状态来更新相应的UI界面。如下图所示，开发框架提供了多种应用程序状态管理的能力。 -在声明式UI编程范式中，UI是应用程序状态的函数，开发人员通过修改当前应用程序状态来更新相应的UI界面。开发框架提供了多种应用程序状态管理的能力。 ![](figures/CoreSpec_figures_state-mgmt-overview.png) -## 状态变量装饰器 -- **@State：**组件拥有的状态属性，当**@State**装饰的变量更改时，组件会重新渲染更新UI。 -- **@Link：**组件依赖于其父组件拥有的某些状态属性，当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件重新渲染。 -- **@Prop：**原理类似**@Link**，但是子组件所做的更改不会同步到父组件上，属于单向传递。 +## 状态变量装饰器 + +- **@State：**组件拥有的状态属性，当**@State**装饰的变量更改时，组件会重新渲染更新UI。 + +- **@Link：**组件依赖于其父组件拥有的某些状态属性，当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件重新渲染。 + +- **@Prop：**原理类似**@Link**，但是子组件所做的更改不会同步到父组件上，属于单向传递。 -## 应用程序状态数据 + +## 应用程序状态数据 **AppStorage**是整个UI应用程序状态的中心“数据库”，UI框架会针对应用程序创建单例**AppStorage**对象，并提供相应的装饰器和接口供应用程序使用。 -- **@StorageLink：@StorageLink\(name\)**的原理类似于**@Consume\(name\)**，不同的是，该给定名称的链接对象是从**AppStorage**中获得的，在**UI组件**和**AppStorage**之间建立双向绑定同步数据。 -- **@StorageProp：@StorageProp\(name\)**将UI组件属性与**AppStorage**进行单向同步，**AppStorage**中值的更改会更新组件中的属性，但UI组件无法更改**AppStorage**中的属性值。 -- **AppStorage**还提供用于业务逻辑实现的API，用于添加、读取、修改和删除应用程序的状态属性，此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。 +- **@StorageLink**：**@StorageLink(name)的原理类似于@Consume(name)，**不同的是，该给定名称的链接对象是从**AppStorage**中获得的，在**UI组件**和**AppStorage**之间建立双向绑定同步数据。 + +- **@StorageProp：@StorageProp(name)将UI组件属性与AppStorage进行单向同步，** **AppStorage**中值的更改会更新组件中的属性，但UI组件无法更改**AppStorage**中的属性值。 + +- **AppStorage**还提供用于业务逻辑实现的API，用于添加、读取、修改和删除应用程序的状态属性，此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。 diff --git a/zh-cn/application-dev/ui/ts-using-a-separate-line-for-new-component.md b/zh-cn/application-dev/ui/ts-using-a-separate-line-for-new-component.md deleted file mode 100644 index 869fc76518be8c540632fa8932e8a65f46d4d547..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/ts-using-a-separate-line-for-new-component.md +++ /dev/null @@ -1,61 +0,0 @@ -# 组件创建使用独立一行 - - - -**每行代码末尾可以省略分号";"** - - -``` -Column() { - Image('icon.png') - Text('text') -} -``` - - -等同于： - - -``` -Column() { - Image('icon.png'); - Text('text'); -} -``` - - -**每行只允许创建一个组件。if, else, else if, ForEach语句单独一行。** - - -无效示例： - - -``` -Column() { - Image('icon.png') Text('text') // invalid, creation of two components in same line -} - -if (this.condi) {Image('icon.png')} // invalid, if and creation a components in same line -``` - - -**内置容器组件、if和ForEach项生成器函数必须在单个子项的情况下使用封闭括号"{}"。** - - -无效示例： - - -``` -if (this.condi) -Image('icon.png'), // invalid, missing {} -else - Text('text'); -``` - - -``` -ForEach(this.arr, - (item) => Image('icon.png'), // invalid, missing {} - (item) => item.id.toString() -} -```