在iis上部署的网站本机无法浏览解决方法,上海网站建设公,网络直播营销的方式,云主机下载HarmonyOS ArkUI(基于ArkTS) 开发布局 #xff08;上#xff09;
四 层叠布局 (Stack)
层叠布局#xff08;StackLayout#xff09;用于在屏幕上预留一块区域来显示组件中的元素#xff0c;提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠上
四 层叠布局 (Stack)
层叠布局StackLayout用于在屏幕上预留一块区域来显示组件中的元素提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠容器中的子元素依次入栈后一个子元素覆盖前一个子元素子元素可以叠加也可以设置位置。
层叠布局具有较强的页面层叠、位置定位能力其使用场景有广告、卡片层叠效果等
Entry
Component
struct Index {build() {Stack(){Column().backgroundColor(#ff6700).width(300).height(300)Column().backgroundColor(blue).width(100).height(100)}.height(100%).width(100%)}
} 后一个元素会覆盖前一个元素有点类似于小时候玩过的套娃娃是不是很有趣
alignContent 对齐方式
一共九种Top Bottom Start End Center TopStart TopEnd BottomStart BottomEnd
Stack({ alignContent: Alignment.样式 }) zIndex 设置层级
子元素(){}.zIndex( 5) 层级越高优先级越高同级后面元素比前面元素高 五 弹性布局 (Flex)
基本等价于css中的flex了
direction 布局方向
Flex({ direction: FlexDirection.Row }) 除了Row还可以是RowReverse Column ColumnReverse Entry
Component
struct Index {build() {Flex({}){Column().backgroundColor(#ff6700).width(100).height(100)Column().backgroundColor(blue).width(100).height(100)}.height(100%).width(100%)}
}
wrap 布局换行
Flex({ wrap: FlexWrap.NoWrap }) 还可以选 WrapReverse Wrap
justifyContent 主轴对齐方式
Flex({justifyContent:FlexAilgn.Start}) alignItems 交叉轴对齐方式
Flex({alignItems:ItemAlign.Auto})ItemAlign.Auto使用Flex容器中默认配置。ItemAlign.Start交叉轴方向首部对齐。ItemAlign.Center交叉轴方向居中对齐。ItemAlign.End交叉轴方向底部对齐。ItemAlign.Stretch交叉轴方向拉伸填充在未设置尺寸时拉伸到容器尺寸。temAlign. Baseline交叉轴方向文本基线对齐。
子元素可以通过 . alignSelf (值同上 的方式 设置独立的对齐方式优先于全局
alignContent 内容对齐
可以通过alignContent参数设置子元素各行在交叉轴剩余空间内的对齐方式只在多行的Flex布局中生效可选值有参考 justifyContent主轴对齐 六 相对布局 (RelativeContainer)
笔者不会等会了在补充上面是官方链接 七 栅格布局 (GridRow/GridCol)
栅格布局是一种通用的辅助定位工具对移动设备的界面设计有较好的借鉴作用
栅格容器GridRow
栅格系统以设备的水平宽度屏幕密度像素值单位vp作为断点依据定义设备的宽度类型形成了一套断点规则。开发者可根据需求在不同的断点区间实现不同的页面布局效果
断点名称取值范围vp设备描述xs[0, 320最小宽度类型设备。sm[320, 520)小宽度类型设备。md[520, 840)中等宽度类型设备。lg[840, ∞)大宽度类型设备。
breakpoints自定义修改断点的取值范围
最多支持6个断点xs, sm, md, lg, xl, xxl设备的布局设置。
breakpoints: {value: [320vp, 520vp, 840vp, 1080vp]}0 -322 xs 320 - 520 sm 以此类推
columns 布局的总列数
GridRow({ columns: 12 }) 默认12列
direction 排列方向
可选值 Row RowReverse
GridRow({ direction: GridRowDirection.Row }){}gutter 子组件间距
GridRow中通过gutter属性设置子元素在水平和垂直方向的间距。 GridRow({ gutter: 10 }){}GridRow({ gutter: { x: 10, y: 10 } }){}俩种写法上面的是等价的
子组件GridCol
GridCol组件作为GridRow组件的子组件通过给GridCol传参或者设置属性两种方式设置span占用列数offset偏移列数order元素序号的值。
span
let Gspan:Recordstring,number { xs: 1, sm: 2, md: 3, lg: 4 }
GridCol({ span: 2 }){}
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
GridCol(){}.span(2)
GridCol(){}.span(Gspan)offset
栅格子组件相对于前一个子组件的偏移列数默认为0。
order
栅格子组件的序号决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时order较小的组件在前较大的在后。
媒体查询 (ohos.mediaquery)
跟传统的ccs媒体查询不同它类似于js监听条件然后做出改变
语法[媒体类型media-type] [媒体逻辑操作media-logic-operations] [媒体特征(media-feature)]
例如 screen and (round-screen: true) 表示当设备屏幕是圆形时条件成立。 (max-height: 800px) 表示当高度小于等于800px时条件成立。 (height 800px) 表示当高度小于等于800px时条件成立。 screen and (device-type: tv) or (resolution 2) 表示包含多个媒体特征的多条件复杂语句查询当设备类型为tv或设备分辨率小于2时条件成立。 (dark-mode: true) 表示当系统为深色模式时成立。
import { mediaquery } from kit.ArkUI; //引入媒体查询
Entry
Component
struct Index {State color: string #DB7093;listener: mediaquery.MediaQueryListener mediaquery.matchMediaSync((orientation: landscape));//设置监听onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) {if (mediaQueryResult.matches as boolean) { // 若设备为横屏状态更改相应的页面布局this.color #FFD700;} else {this.color #DB7093;}}aboutToAppear() {// 绑定当前应用实例// 绑定回调函数this.listener.on(change, (mediaQueryResult: mediaquery.MediaQueryResult) {this.onPortrait(mediaQueryResult)});}aboutToDisappear() {// 解绑listener中注册的回调函数this.listener.off(change);}build() {Flex({}){Column().backgroundColor(this.color).width(100).height(100)}.height(100%).width(100%)}
}
