Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
307c5ff1
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
307c5ff1
编写于
4月 28, 2022
作者:
O
openharmony_ci
提交者:
Gitee
4月 28, 2022
浏览文件
操作
浏览文件
下载
差异文件
!3537 release分支文档+DX意见修改
Merge pull request !3537 from LiAn/OpenHarmony-3.1-Release
上级
882fe003
e2cea7ae
变更
13
隐藏空白更改
内联
并排
Showing
13 changed file
with
433 addition
and
26 deletion
+433
-26
zh-cn/application-dev/application-dev-website.md
zh-cn/application-dev/application-dev-website.md
+2
-0
zh-cn/application-dev/reference/apis/Readme-CN.md
zh-cn/application-dev/reference/apis/Readme-CN.md
+2
-0
zh-cn/application-dev/reference/apis/js-apis-WorkSchedulerExtensionAbility.md
...v/reference/apis/js-apis-WorkSchedulerExtensionAbility.md
+60
-0
zh-cn/application-dev/reference/apis/js-apis-workScheduler.md
...n/application-dev/reference/apis/js-apis-workScheduler.md
+341
-0
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
...on-dev/reference/arkui-ts/ts-basic-components-textarea.md
+2
-2
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
...n-dev/reference/arkui-ts/ts-basic-components-textinput.md
+2
-2
zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
...ication-dev/reference/arkui-ts/ts-container-tabcontent.md
+4
-4
zh-cn/application-dev/ui/ui-js-components-grid.md
zh-cn/application-dev/ui/ui-js-components-grid.md
+1
-1
zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
+2
-2
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
+8
-8
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
+6
-6
zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md
...cation-dev/ui/ui-ts-page-redirection-data-transmission.md
+1
-1
zh-cn/application-dev/website.md
zh-cn/application-dev/website.md
+2
-0
未找到文件。
zh-cn/application-dev/application-dev-website.md
浏览文件 @
307c5ff1
...
...
@@ -578,6 +578,8 @@
- 资源调度
- [@ohos.backgroundTaskManager (后台任务管理)](reference/apis/js-apis-backgroundTaskManager.md)
- [@ohos.workScheduler (延迟任务调度)](reference/apis/js-apis-workScheduler.md)
- [@ohos.WorkSchedulerExtensionAbility (延迟任务调度回调)](reference/apis/js-apis-WorkSchedulerExtensionAbility.md)
- 定制管理
- [@ohos.configPolicy (配置策略)](reference/apis/js-apis-config-policy.md)
...
...
zh-cn/application-dev/reference/apis/Readme-CN.md
浏览文件 @
307c5ff1
...
...
@@ -64,6 +64,8 @@
-
资源调度
-
[
@ohos.backgroundTaskManager (后台任务管理)
](
js-apis-backgroundTaskManager.md
)
-
[
@ohos.workScheduler (延迟任务调度)
](
js-apis-workScheduler.md
)
-
[
@ohos.WorkSchedulerExtensionAbility (延迟任务调度回调)
](
js-apis-WorkSchedulerExtensionAbility.md
)
-
定制管理
-
[
@ohos.configPolicy (配置策略)
](
js-apis-config-policy.md
)
...
...
zh-cn/application-dev/reference/apis/js-apis-WorkSchedulerExtensionAbility.md
0 → 100644
浏览文件 @
307c5ff1
# 延迟任务调度回调
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 本模块首批接口从API version 9开始支持。API 9当前为Canary版本,仅供试用,不保证接口可稳定调用。
## 导入模块
```
import WorkSchedulerExtensionAbility from '@ohos.WorkSchedulerExtensionAbility'
```
## WorkSchedulerExtensionAbility.onWorkStart
onWorkStart(work: workScheduler.WorkInfo): void
延迟任务调度开始回调。
**系统能力:**
SystemCapability.ResourceSchedule.WorkScheduler
**参数**
:
| 参数名 | 类型 | 必填 | 说明 |
| ---- | --------------------- | ---- | -------------- |
| work |
[
workScheduler.WorkInfo
](
js-apis-workScheduler.md#workinfo
)
| 是 | 指示要添加到执行队列的工作。 |
**示例:**
```
export default class MyWorkSchedulerExtensionAbility extends WorkSchedulerExtensionAbility {
onWorkStart(workInfo) {
console.log('MyWorkSchedulerExtensionAbility onWorkStart' + JSON.stringify(workInfo));
}
}
```
## WorkSchedulerExtensionAbility.onWorkStop
onWorkStop(work: workScheduler.WorkInfo): void
延迟任务调度结束回调。
**系统能力:**
SystemCapability.ResourceSchedule.WorkScheduler
**参数**
:
| 参数名 | 类型 | 必填 | 说明 |
| ---- | --------------------- | ---- | -------------- |
| work |
[
workScheduler.WorkInfo
](
js-apis-workScheduler.md#workinfo
)
| 是 | 指示要添加到执行队列的工作。 |
**示例:**
```
export default class MyWorkSchedulerExtensionAbility extends WorkSchedulerExtensionAbility {
onWorkStop(workInfo) {
console.log('MyWorkSchedulerExtensionAbility onWorkStop' + JSON.stringify(workInfo));
}
}
```
\ No newline at end of file
zh-cn/application-dev/reference/apis/js-apis-workScheduler.md
0 → 100644
浏览文件 @
307c5ff1
# 延迟任务调度
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 本模块首批接口从API version 9开始支持。API 9当前为Canary版本,仅供试用,不保证接口可稳定调用。
## 导入模块
```
import workScheduler from '@ohos.workScheduler'
```
## workScheduler.startWork
startWork(work: WorkInfo): boolean
通知WorkSchedulerService将工作添加到执行队列。
**系统能力**
:SystemCapability.ResourceSchedule.WorkScheduler
**参数**
:
| 参数名 | 类型 | 必填 | 说明 |
| ---- | --------------------- | ---- | -------------- |
| work |
[
WorkInfo
](
#workinfo
)
| 是 | 指示要添加到执行队列的工作。 |
**返回值**
:
| 类型 | 说明 |
| ------- | -------------------------------- |
| boolean | 如果工作成功添加到执行队列,则返回true,否则返回false。 |
**示例**
:
```
let workInfo = {
workId: 1,
batteryLevel:50,
batteryStatus:workScheduler.BatteryStatus.BATTERY_STATUS_LOW,
isRepeat: false,
isPersisted: true,
bundleName: "com.example.myapplication",
abilityName: "MyExtension"
}
var res = workScheduler.startWork(workInfo);
console.info("workschedulerLog res:" + res);
```
## workScheduler.stopWork
stopWork(work: WorkInfo, needCancel?: boolean): boolean
通知WorkSchedulerService停止指定工作。
**系统能力**
:SystemCapability.ResourceSchedule.WorkScheduler
**参数**
:
| 参数名 | 类型 | 必填 | 说明 |
| ---------- | --------------------- | ---- | ---------- |
| work |
[
WorkInfo
](
#workinfo
)
| 是 | 指示要停止的工作。 |
| needCancel | boolean | 是 | 是否需要取消的工作。 |
**返回值**
:
| 类型 | 说明 |
| ------- | ----------------------- |
| boolean | 如果成功,则返回true,否则返回false。 |
**示例**
:
```
let workInfo = {
workId: 1,
batteryLevel:50,
batteryStatus:workScheduler.BatteryStatus.BATTERY_STATUS_LOW,
isRepeat: false,
isPersisted: true,
bundleName: "com.example.myapplication",
abilityName: "MyExtension"
}
var res = workScheduler.stopWork(workInfo, false);
console.info("workschedulerLog res:" + res);
```
## workScheduler.getWorkStatus
getWorkStatus(workId: number, callback : AsyncCallback
\<
WorkInfo>): void
获取工作的最新状态,使用Callback形式返回。
**系统能力**
:SystemCapability.ResourceSchedule.WorkScheduler
**参数**
:
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ------------------------------------- | ---- | ---------------------------------------- |
| workId | number | 是 | work的id。 |
| callback | AsyncCallback
\<
[
WorkInfo
](
#workinfo
)
> | 是 | 指定的callback回调方法。如果指定的工作Id有效,则返回从WorkSchedulerService获取的有效工作状态;否则返回null。 |
**示例**
:
```
workScheduler.getWorkStatus(50, (err, res) => {
if (err) {
console.info('workschedulerLog getWorkStatus failed, because:' + err.data);
} else {
for (let item in res) {
console.info('workschedulerLog getWorkStatus success,' + item + ' is:' + res[item]);
}
}
});
```
## workScheduler.getWorkStatus
getWorkStatus(workId: number): Promise
\<
WorkInfo>
获取工作的最新状态,使用Promise形式返回。
**系统能力**
:SystemCapability.ResourceSchedule.WorkScheduler
**参数**
:
| 参数名 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | -------- |
| workId | number | 是 | work的id。 |
**返回值**
:
| 类型 | 说明 |
| ------------------------------- | ---------------------------------------- |
| Promise
\<
[
WorkInfo
](
#workinfo
)
> | 指定的Promise回调方法。如果指定的工作ID有效,则返回从WorkSchedulerService获取的有效工作状态;否则返回null。 |
**示例**
:
```
workScheduler.getWorkStatus(50).then((res) => {
for (let item in res) {
console.info('workschedulerLog getWorkStatus success,' + item + ' is:' + res[item]);
}
}).catch((err) => {
console.info('workschedulerLog getWorkStatus failed, because:' + err.data);
})
```
## workScheduler.obtainAllWorks
obtainAllWorks(callback : AsyncCallback
\<
void>): Array
\<
WorkInfo>
获取与当前应用程序关联的所有工作,使用Callback形式返回。
**系统能力**
:SystemCapability.ResourceSchedule.WorkScheduler
**参数**
:
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------------------- | ---- | ------------------------------- |
| callback | AsyncCallback
\<
void> | 是 | 指定的callback回调方法。返回与应用程序关联的所有工作。 |
**返回值**
:
| 类型 | 说明 |
| ----------------------------- | --------------- |
| Array
\<
[
WorkInfo
](
#workinfo
)
> | 返回与应用程序关联的所有工作。 |
**示例**
:
```
workScheduler.obtainAllWorks((err, res) =>{
if (err) {
console.info('workschedulerLog obtainAllWorks failed, because:' + err.data);
} else {
console.info('workschedulerLog obtainAllWorks success, data is:' + JSON.stringify(res));
}
});
```
## workScheduler.obtainAllWorks
obtainAllWorks(): Promise
<Array
\<
WorkInfo
>
>
获取与当前应用程序关联的所有工作,使用Promise形式返回。
**系统能力**
:SystemCapability.ResourceSchedule.WorkScheduler
**返回值**
:
| 类型 | 说明 |
| -------------------------------------- | ------------------------------ |
| Promise
<Array
\<[
WorkInfo
](
#workinfo
)
>
> | 指定的Promise回调方法。返回与应用程序关联的所有工作。 |
**示例**
:
```
workScheduler.obtainAllWorks().then((res) => {
console.info('workschedulerLog obtainAllWorks success, data is:' + JSON.stringify(res));
}).catch((err) => {
console.info('workschedulerLog obtainAllWorks failed, because:' + err.data);
})
```
## workScheduler.stopAndClearWorks
stopAndClearWorks(): boolean
停止和取消与当前应用程序关联的所有工作。
**系统能力**
:SystemCapability.ResourceSchedule.WorkScheduler
**示例**
:
```
let res = workScheduler.stopAndClearWorks();
console.info("workschedulerLog res:" + res);
```
## workScheduler.isLastWorkTimeOut
isLastWorkTimeOut(workId: number, callback : AsyncCallback
\<
void>): boolean
检查指定工作的最后一次执行是否为超时操作,使用Callback形式返回。
**系统能力**
:SystemCapability.ResourceSchedule.WorkScheduler
**参数**
:
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------------------- | ---- | ---------------------------------------- |
| workId | number | 是 | work的id。 |
| callback | AsyncCallback
\<
void> | 是 | 指定的callback回调方法。如果指定工作的最后一次执行是超时操作,则返回true;否则返回false。 |
**返回值**
:
| 类型 | 说明 |
| ------- | ---------------------------------------- |
| boolean | 指定的callback回调方法。如果指定工作的最后一次执行是超时操作,则返回true;否则返回false。 |
**示例**
:
```
workScheduler.isLastWorkTimeOut(500, (err, res) =>{
if (err) {
console.info('workschedulerLog isLastWorkTimeOut failed, because:' + err.data);
} else {
console.info('workschedulerLog isLastWorkTimeOut success, data is:' + res);
}
});
```
## workScheduler.isLastWorkTimeOut
isLastWorkTimeOut(workId: number): Promise
\<
boolean>
检查指定工作的最后一次执行是否为超时操作,使用Promise形式返回。
**系统能力**
:SystemCapability.ResourceSchedule.WorkScheduler
**参数**
:
| 参数名 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | -------- |
| workId | number | 是 | work的id。 |
**返回值**
:
| 类型 | 说明 |
| ----------------- | ---------------------------------------- |
| Promise
\<
boolean> | 指定的Promise回调方法。如果指定工作的最后一次执行是超时操作,则返回true;否则返回false。 |
**示例**
:
```
workScheduler.isLastWorkTimeOut(500)
.then(res => {
console.info('workschedulerLog isLastWorkTimeOut success, data is:' + res);
})
.catch(err => {
console.info('workschedulerLog isLastWorkTimeOut failed, because:' + err.data);
});
```
## WorkInfo
提供工作的具体信息。
**系统能力**
:以下各项对应的系统能力均为SystemCapability.ResourceSchedule.WorkScheduler
| 参数名 | 类型 | 必填 | 说明 |
| --------------- | --------------------------------- | ---- | -------------------------------- |
| workId | number | 是 | 当前工作的ID |
| bundleName | string | 是 | 延迟任务包名 |
| abilityName | string | 是 | 延迟任务回调通知的组件名(必填) |
| networkType |
[
NetworkType
](
#networktype
)
| 否 | 网络类型 |
| isCharging | boolean | 否 | 是否充电 |
| chargerType |
[
ChargingType
](
#chargingtype
)
| 否 | 充电类型 |
| batteryLevel | number | 否 | 电量 |
| batteryStatus |
[
BatteryStatus
](
#batterystatus
)
| 否 | 电池状态 |
| storageRequest |
[
StorageRequest
](
#storagerequest
)
| 否 | 存储状态 |
| isRepeat | boolean | 否 | 是否循环任务 |
| repeatCycleTime | number | 否 | 循环间隔 |
| repeatCount | number | 否 | 循环次数 |
| isPersisted | boolean | 否 | 是否持久化保存工作 |
## NetworkType
触发工作的网络类型。
**系统能力**
:以下各项对应的系统能力均为SystemCapability.ResourceSchedule.WorkScheduler
| 名称 | 默认值 | 说明 |
| ---------------------- | ---- | ----------------------- |
| NETWORK_TYPE_ANY | 0 | 表示这个触发条件是任何类型的网络连接。 |
| NETWORK_TYPE_MOBILE | 1 | 表示这个触发条件是Mobile网络连接。 |
| NETWORK_TYPE_WIFI | 2 | 表示这个触发条件是Wifi类型的网络连接。 |
| NETWORK_TYPE_BLUETOOTH | 3 | 表示这个触发条件是Bluetooth网络连接。 |
| NETWORK_TYPE_WIFI_P2P | 4 | 表示这个触发条件是Wifi P2P网络连接。 |
| NETWORK_TYPE_ETHERNET | 5 | 表示这个触发条件是有线网络连接。 |
## ChargingType
触发工作的充电类型。
**系统能力**
:以下各项对应的系统能力均为SystemCapability.ResourceSchedule.WorkScheduler
| 名称 | 默认值 | 说明 |
| ------------------------- | ---- | -------------------- |
| CHARGING_PLUGGED_ANY | 0 | 表示这个触发条件是任何类型的充电器连接。 |
| CHARGING_PLUGGED_AC | 1 | 表示这个触发条件是直流充电器连接。 |
| CHARGING_PLUGGED_USB | 2 | 表示这个触发条件是USB充连接。 |
| CHARGING_PLUGGED_WIRELESS | 3 | 表示这个触发条件是无线充电器连接。 |
## BatteryStatus
触发工作的电池状态。
**系统能力**
:以下各项对应的系统能力均为SystemCapability.ResourceSchedule.WorkScheduler
| 名称 | 默认值 | 说明 |
| -------------------------- | ---- | -------------------------- |
| BATTERY_STATUS_LOW | 0 | 表示这个触发条件是低电告警。 |
| BATTERY_STATUS_OKAY | 1 | 表示这个触发条件是从低电恢复到正常电量。 |
| BATTERY_STATUS_LOW_OR_OKAY | 2 | 表示这个触发条件是从低电恢复到正常电量或者低电告警。 |
## StorageRequest
触发工作的存储状态。
**系统能力**
:以下各项对应的系统能力均为SystemCapability.ResourceSchedule.WorkScheduler
|名称 |默认值 |说明|
| -------- | -------- | -------- |
|STORAGE_LEVEL_LOW |0 |表示这个触发条件是存储空间不足。
|STORAGE_LEVEL_OKAY |1 |表示这个触发条件是从存储空间不足恢复到正常。
|STORAGE_LEVEL_LOW_OR_OKAY |2 |表示这个触发条件是从存储空间不足恢复到正常或者存储空间不足。
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
浏览文件 @
307c5ff1
...
...
@@ -88,7 +88,7 @@ caretPosition(value: number): void
```
@Entry
@Component
struct TextAreaExample
2
{
struct TextAreaExample
1
{
@State text: string = ''
build() {
Column() {
...
...
@@ -123,7 +123,7 @@ struct TextAreaExample2 {
```
@Entry
@Component
struct TextArea
Test
{
struct TextArea
Example2
{
controller: TextAreaController = new TextAreaController()
build() {
Column() {
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @
307c5ff1
...
...
@@ -100,7 +100,7 @@ caretPosition(value: number): void
```
@Entry
@Component
struct Text
AreaExample2
{
struct Text
InputExample1
{
@State text: string = ''
build() {
...
...
@@ -134,7 +134,7 @@ struct TextAreaExample2 {
```
@Entry
@Component
struct TextInput
Test
{
struct TextInput
Example2
{
@State text: string = ''
controller: TextInputController = new TextInputController()
build() {
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
浏览文件 @
307c5ff1
...
...
@@ -26,13 +26,13 @@ TabContent()
不支持触摸热区设置。
| 名称
| 参数类型 | 默认值 | 描述
|
| ------
-- | -------- | -------- |
-------- |
| tabBar | string
\|
{
<br/>
icon?:
string,
<br/>
text?:
string
<br/>
}
<br/>
\|
[
CustomBuilder
](
../../ui/ts-types.md
#custombuilder类型8+
)
<sup>
8+
</sup>
| -
| 设置TabBar上显示内容。
<br/>
CustomBuilder:
构造器,内部可以传入组件(API8版本以上适用)。
<br/>
>
![icon-note.gif](public_sys-resources/icon-note.gif)
**说明:**
<br/>
>
如果icon采用svg格式图源,则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源,icon大小则是svg本身内置的宽高属性值大小。 |
| 名称
| 参数类型 | 默认值 | 描述
|
| ------
| ---------------------------------------- | ---- | --------------------------------
-------- |
| tabBar | string
\|
{
<br/>
icon?:
string,
<br/>
text?:
string
<br/>
}
<br/>
\|
[
CustomBuilder
](
../../ui/ts-types.md
)
<sup>
8+
</sup>
| -
| 设置TabBar上显示内容。
<br/>
CustomBuilder:
构造器,内部可以传入组件(API8版本以上适用)。
<br/>
>
![icon-note.gif](public_sys-resources/icon-note.gif)
**说明:**
<br/>
>
如果icon采用svg格式图源,则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源,icon大小则是svg本身内置的宽高属性值大小。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - TabContent组件不支持设置通用宽度属性,其宽度默认撑满Tabs父组件。
>
>
> - TabContent组件不支持设置通用高度属性,其高度由Tabs父组件高度与TabBar组件高度决定。
...
...
zh-cn/application-dev/ui/ui-js-components-grid.md
浏览文件 @
307c5ff1
#
Grid
#
栅格布局
栅格布局容器根节点,使用grid-row与grid-col进行栅格布局。具体请参考
[
Grid-container
](
../reference/arkui-js/js-components-grid-container.md
)
。
...
...
zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
浏览文件 @
307c5ff1
...
...
@@ -433,7 +433,7 @@
```
@Component
struct ContentTable {
@Builder IngredientItem(title:string,
colorValue: string,
name: string, value: string) {
@Builder IngredientItem(title:string, name: string, value: string) {
Flex() {
Text(title)
.fontSize(17.4)
...
...
@@ -531,6 +531,6 @@
针对创建简单视图,有以下示例工程可供参考:
-
[
eTSBuildCommonView
](
https://gitee.com/openharmony/app_samples/tree/master/ETSUI/
eTS
BuildCommonView
)
-
[
eTSBuildCommonView
](
https://gitee.com/openharmony/app_samples/tree/master/ETSUI/BuildCommonView
)
本示例为构建了简单页面展示食物番茄的图片和营养信息,主要为了展示简单页面的Stack布局和Flex布局。
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
浏览文件 @
307c5ff1
...
...
@@ -12,25 +12,25 @@
## 栅格系统
栅格系统有Column
s、Margins、Gutters
三个概念。
栅格系统有Column
、Margin、Gutter
三个概念。
![
zh-cn_image_0000001217236574
](
figures/zh-cn_image_0000001217236574.png
)
1.
Gutter
s
:
1.
Gutter:
用来控制元素与元素之间距离关系。可以根据设备的不同尺寸,定义不同的gutter值,作为栅格布局的统一规范。为了保证较好的视觉效果,通常gutter的取值不会大于margin的取值。
2.
Margin
s
:
2.
Margin:
离栅格容器边缘的距离。可以根据设备的不同尺寸,定义不同的margin值,作为栅格布局的统一规范。
3.
Column
s
:
3.
Column:
栅格布局的主要定位工具。根据设备的不同尺寸,把栅格容器分割成不同的列数,在保证margin和gutter符合规范的情况下,根据总Column的个数计算每个Column列的宽度。
### 系统栅格断点
系统根据不同水平宽度设备对应Column
s
的数量关系,形成了一套断点规则定义。
系统根据不同水平宽度设备对应Column的数量关系,形成了一套断点规则定义。
系统以设备的水平宽度的屏幕密度像素值作为断点依据,根据当前设备水平宽度所在的断点范围,定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述,以及对应的默认总列数(column
s),边距(gutter
),间隔(gutter)定义如下:
系统以设备的水平宽度的屏幕密度像素值作为断点依据,根据当前设备水平宽度所在的断点范围,定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述,以及对应的默认总列数(column
),边距(margin
),间隔(gutter)定义如下:
| 设备水平宽度断点范围 | 设备宽度类型 | 描述 | columns | gutter | margin |
...
...
@@ -48,7 +48,7 @@
通过接口
`GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})`
创建栅格容器,栅格容器内的所有子组件可以使用栅格布局。
-
可以通过参数定义栅格布局的总列数(columns),间隔(gutter),两侧边距(margin)。例如栅格容器总共分为6列,列
于
列间隔为10vp, 两侧边距为20vp:
-
可以通过参数定义栅格布局的总列数(columns),间隔(gutter),两侧边距(margin)。例如栅格容器总共分为6列,列
与
列间隔为10vp, 两侧边距为20vp:
```
GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
...
...
@@ -60,7 +60,7 @@
GridContainer() {}
```
上述例子中,默认在
在小宽度类型设备(SizeType.SM)上,栅格容器被分为4列,列于列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上,栅格容器被分为8列,列于
列的间隔为24vp,两侧边距是32vp。
上述例子中,默认在
小宽度类型设备(SizeType.SM)上,栅格容器被分为4列,列与列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上,栅格容器被分为8列,列与
列的间隔为24vp,两侧边距是32vp。
-
也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置,如:
...
...
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
浏览文件 @
307c5ff1
...
...
@@ -15,11 +15,11 @@
首先导入媒体查询模块,例如:
```
import mediaquery from '@ohos.mediaquery'
import mediaquery from '@ohos.mediaquery'
```
然后通过matchMediaSync接口设置媒体查询条件,并保存返回的条件监听句柄,例如:
```
listener = mediaquery.matchMediaSync('(orientation: landscape)')
listener = mediaquery.matchMediaSync('(orientation: landscape)')
```
最后通过上面保存的条件监听句柄listener去注册回调函数,在回调函数里更改页面布局或者实现业务逻辑,当匹配到媒体查询条件时会触发此回调函数,例如:
```
...
...
@@ -39,13 +39,13 @@ listener.on('change', onPortrait)
```
例如:
screen and (round-screen: true) //
当设备屏幕是圆形时条件成立
`screen and (round-screen: true)`
:
当设备屏幕是圆形时条件成立
(max-height: 800) //
当高度小于800时条件成立
`(max-height: 800)`
:
当高度小于800时条件成立
(height
<
= 800) //
当高度小于800时条件成立
`(height <= 800) `
:
当高度小于800时条件成立
screen and (device-type: tv) or (resolution
<
2) //
包含多个媒体特征的多条件复杂语句查询
`screen and (device-type: tv) or (resolution < 2)`
:
包含多个媒体特征的多条件复杂语句查询
### 媒体类型(media-type)
...
...
zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md
浏览文件 @
307c5ff1
...
...
@@ -267,6 +267,6 @@
针对页面布局与连接,有以下示例工程可供参考:
-
[
eTSDefiningPageLayoutAndConnection
](
https://gitee.com/openharmony/app_samples/tree/master/ETSUI/
eTS
DefiningPageLayoutAndConnection
)
-
[
eTSDefiningPageLayoutAndConnection
](
https://gitee.com/openharmony/app_samples/tree/master/ETSUI/DefiningPageLayoutAndConnection
)
本示例构建了食物分类列表页面和食物详情页,向开发者展示了List布局、Grid布局以及页面路由的基本用法。
zh-cn/application-dev/website.md
浏览文件 @
307c5ff1
...
...
@@ -578,6 +578,8 @@
- 资源调度
- [@ohos.backgroundTaskManager (后台任务管理)](reference/apis/js-apis-backgroundTaskManager.md)
- [@ohos.workScheduler (延迟任务调度)](reference/apis/js-apis-workScheduler.md)
- [@ohos.WorkSchedulerExtensionAbility (延迟任务调度回调)](reference/apis/js-apis-WorkSchedulerExtensionAbility.md)
- 定制管理
- [@ohos.configPolicy (配置策略)](reference/apis/js-apis-config-policy.md)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录