Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
5ccd1a70
D
Docs
项目概览
OpenHarmony
/
Docs
12 个月 前同步成功
通知
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,发现更多精彩内容 >>
未验证
提交
5ccd1a70
编写于
10月 29, 2022
作者:
O
openharmony_ci
提交者:
Gitee
10月 29, 2022
浏览文件
操作
浏览文件
下载
差异文件
!11110 文档修改 删除废弃栅格
Merge pull request !11110 from luoying_ace/ly1024
上级
4c842045
78fbeff6
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
11 addition
and
166 deletion
+11
-166
zh-cn/application-dev/ui/Readme-CN.md
zh-cn/application-dev/ui/Readme-CN.md
+1
-2
zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md
zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md
+10
-4
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
+0
-160
未找到文件。
zh-cn/application-dev/ui/Readme-CN.md
浏览文件 @
5ccd1a70
...
@@ -22,8 +22,7 @@
...
@@ -22,8 +22,7 @@
-
[
弹性布局
](
ui-ts-layout-flex.md
)
-
[
弹性布局
](
ui-ts-layout-flex.md
)
-
[
网格布局
](
ui-ts-layout-grid.md
)
-
[
网格布局
](
ui-ts-layout-grid.md
)
-
响应式布局
-
响应式布局
-
[
栅格布局(新)
](
ui-ts-layout-grid-container-new.md
)
-
[
栅格布局
](
ui-ts-layout-grid-container-new.md
)
-
[
栅格布局
](
ui-ts-layout-grid-container.md
)
-
[
媒体查询
](
ui-ts-layout-mediaquery.md
)
-
[
媒体查询
](
ui-ts-layout-mediaquery.md
)
-
[
自定义组件的生命周期
](
ui-ts-custom-component-lifecycle-callbacks.md
)
-
[
自定义组件的生命周期
](
ui-ts-custom-component-lifecycle-callbacks.md
)
-
[
Web组件开发指导
](
ui-ts-components-web.md
)
-
[
Web组件开发指导
](
ui-ts-components-web.md
)
...
...
zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md
浏览文件 @
5ccd1a70
# 栅格布局
# 栅格布局
栅格组件
[
GridRow
](
../reference/arkui-ts/ts-container-gridrow.md
)
和
[
GridCol
](
../reference/arkui-ts/ts-container-gridcol.md
)
栅格系统作为一种辅助布局的定位工具,在平面设计和网站设计都起到了很好的作用,对移动设备的界面设计有较好的借鉴作用。总结栅格系统对于移动设备的优势主要有:
相对于
[
GridContainer
](
../reference/arkui-ts/ts-container-gridcontainer.md
)
提供了更灵活、更全面的栅格系统实现方案。GridRow为栅格容器组件,只与栅格子组件GridCol在栅格布局场景中使用。
1.
给布局提供一种可循的规律,解决多尺寸多设备的动态布局问题。
2.
给系统提供一种统一的定位标注,保证各模块各设备的布局一致性。
3.
给应用提供一种灵活的间距调整方法,满足特殊场景布局调整的可能性。
推荐使用栅格组件
[
GridRow
](
../reference/arkui-ts/ts-container-gridrow.md
)
和
[
GridCol
](
../reference/arkui-ts/ts-container-gridcol.md
)
来实现栅格布局效果,
相对于目前已废弃的
[
GridContainer
](
../reference/arkui-ts/ts-container-gridcontainer.md
)
组件,GridRow和GridCol提供了更灵活、更全面的栅格系统实现方案。GridRow为栅格容器组件,只能与栅格子组件GridCol在栅格布局场景中使用。
## 栅格容器GridRow
## 栅格容器GridRow
...
@@ -18,8 +24,8 @@
...
@@ -18,8 +24,8 @@
### 栅格系统断点
### 栅格系统断点
断点以设备宽度为基准,将应用宽度分成了几个不同的区间,即不同的断点。开发者根据需求在不同的
区间实现不同的页面布局效果。
栅格系统以设备的水平宽度(屏幕密度像素值,单位vp)作为断点依据,定义设备的宽度类型,形成了一套断点规则。开发者可根据需求在不同的断点
区间实现不同的页面布局效果。
[
栅格系统默认断点
](
ui-ts-layout-grid-container.md#系统栅格断点
)
将设备宽度分为xs、sm、md、lg四类,尺寸范围如下:
栅格系统默认断点
将设备宽度分为xs、sm、md、lg四类,尺寸范围如下:
| 断点名称 | 取值范围(vp)|
| 断点名称 | 取值范围(vp)|
| --------| ------ |
| --------| ------ |
...
...
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
已删除
100644 → 0
浏览文件 @
4c842045
# 栅格布局
栅格系统作为一种辅助布局的定位工具,在平面设计和网站设计都起到了很好的作用,对移动设备的界面设计有较好的借鉴作用。总结栅格系统对于移动设备的优势主要有:
1.
给布局提供一种可循的规律,解决多尺寸多设备的动态布局问题。
2.
给系统提供一种统一的定位标注,保证各模块各设备的布局一致性。
3.
给应用提供一种灵活的间距调整方法,满足特殊场景布局调整的可能性。
为实现栅格布局效果,声明式范式提供了
[
GridContainer
](
../reference/arkui-ts/ts-container-gridcontainer.md
)
栅格容器组件,配合其子组件的通用属性
[
useSizeType
](
../reference/arkui-ts/ts-container-grid.md
)
来实现栅格布局。
## 栅格系统
栅格系统有Column、Margin、Gutter三个概念。
![
zh-cn_image_0000001224173302
](
figures/zh-cn_image_0000001224173302.png
)
1.
Gutter:
元素之间的距离,决定了内容间的紧密程度。作为栅格布局的统一规范。为了保证较好的视觉效果,通常gutter的取值不会大于margin的取值。
2.
Margin:
内容距栅格容器边缘的距离,决定了内容可展示的总宽度。作为栅格布局的统一规范。
3.
Column:
栅格布局的主要定位工具。根据设备的不同尺寸,把栅格容器分割成不同的列数,在保证margin和gutter符合规范的情况下,根据总Column的个数计算每个Column列的宽度。
### 系统栅格断点
栅格系统以设备的水平宽度(屏幕密度像素值,vp)作为断点依据,定义设备的宽度类型,设置栅格总列数,间隔,边距,形成了一套断点规则。
不同设备水平宽度下,栅格系统默认总列数(columns),边距(margin),间隔(gutter)定义如下:
| 设备水平宽度断点范围 | 设备宽度类型 | 描述 | columns | gutter | margin |
| ----------------------- | ------ | --------- | ------- | ------ | ------ |
| 0
<
水平宽度
<
320vp | XS | 最小宽度类型设备。 | 2 | 12vp | 12vp |
| 320vp
<
=水平宽度
<
600vp | SM | 小宽度类型设备。 | 4 | 24vp | 24vp |
| 600vp
<
=水平宽度
<
840vp | MD | 中等宽度类型设备。 | 8 | 24vp | 32vp |
| 840
<
=水平分辨率 | LG | 大宽度类型设备。 | 12 | 24vp | 48vp |
> **说明:**
>
> ArkUI在API9对栅格组件做了重构,推出新的栅格组件[GridRow](../reference/arkui-ts/ts-container-gridrow.md)和[GridCol](../reference/arkui-ts/ts-container-gridcol.md),API9推荐使用新的栅格组件,参考[新栅格组件用法](ui-ts-layout-grid-container-new.md)
>
## GridContainer栅格组件使用
首先使用栅格容器组件创建栅格布局。
### 栅格容器创建与设置
通过接口
`GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})`
创建栅格容器,栅格容器内的所有子组件可以使用栅格布局。
通过参数定义栅格布局的总列数(columns),间隔(gutter),两侧边距(margin)。例如栅格容器总共分为6列,列与列间隔为10vp, 两侧边距为20vp:
```
ts
GridContainer
({
columns
:
6
,
gutter
:
10
,
margin
:
20
})
{}
```
栅格容器不设置参数,或者sizeType设置为SizeType. Auto时使用默认的栅格系统定义,如:
```
ts
GridContainer
()
{}
```
```
ts
GridContainer
({
sizeType
:
SizeType
.
Auto
})
```
上述例子中,默认在小宽度类型设备(SizeType. SM)上,栅格容器被分为4列,列与列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType. MD)上,栅格容器被分为8列,列与列的间隔为24vp,两侧边距是32vp。
也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置,如:
```
ts
GridContainer
({
sizeType
:
SizeType
.
SM
})
{
Row
()
{
Text
(
'
1
'
)
.
useSizeType
({
xs
:
{
span
:
2
,
offset
:
0
},
sm
:
{
span
:
3
,
offset
:
0
},
md
:
{
span
:
6
,
offset
:
2
},
lg
:
{
span
:
8
,
offset
:
2
},
})
}
}
```
上述例子中,不管在任何宽度类型的设备上, Text组件都使用SizeType. SM类型的栅格设置, 即占用3列,放置在第1列。
### 子组件的栅格设置
栅格容器中的组件使用通用属性useSizeType设置不同的设备宽度类型的占用列数和列偏移。其中span表示栅格容器组件占据columns的数量;offset表示列偏移量,指将组件放置在哪一个columns上。 如:
```
ts
GridContainer() {
Row() {
Text('1')
.useSizeType({
xs: { span: 2, offset: 0 },
sm: { span: 2, offset: 0 },
md: { span: 6, offset: 2 },
lg: { span: 8, offset: 2 },
})
}
}
```
其中 `sm: { span: 2, offset: 0 } ` 指在设备宽度类型为SM的设备上,Text组件占用2列,且放在栅格容器的第1列上。
![zh-cn_image_0000001218108718](figures/zh-cn_image_0000001218108719.png)
## 场景示例
使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果,不必写大量的代码兼容不同宽度类型的设备。
```
ts
@Entry
@Component
struct GridContainerExample {
build() {
Column({ space: 5 }) {
GridContainer({ columns: 6 }) {
Flex({justifyContent:FlexAlign.SpaceAround}) {
Text('1')
.useSizeType({
xs: { span: 2, offset: 0 },
sm: { span: 2, offset: 0 },
md: { span: 1, offset: 0 },
lg: { span: 1, offset: 0 },
})
.height(100).backgroundColor(0x4682B4).textAlign(TextAlign.Center)
Text('2')
.useSizeType({
xs: { span: 2, offset: 0 },
sm: { span: 2, offset: 0 },
md: { span: 4, offset: 0 },
lg: { span: 4, offset: 0 },
})
.height(100).backgroundColor(0x46F2B4).textAlign(TextAlign.Center)
Text('3')
.useSizeType({
xs: { span: 2, offset: 0 },
sm: { span: 2, offset: 0 },
md: { span: 1, offset: 0 },
lg: { span: 1, offset: 0 },
})
.height(100).backgroundColor(0x46A2B4).textAlign(TextAlign.Center)
}
}.width('80%').backgroundColor('gray')
}.width('100%').margin({ top: 15 })
}
}
```
小宽度类型设备(SizeType. SM)运行效果:
![zh-cn_image_0000001218108718](figures/zh-cn_image_0000001218108718.png)
中等宽度类型设备(SizeType. MD)运行效果:
![zh-cn_image_0000001262748569](figures/zh-cn_image_0000001262748569.png)
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录