jsp网站,一个公司的网站怎么做的,wordpress4.6.9,前端面试题2022一、公共样式类属性
ArkUI框架提供的基础组件直接或者间接的继承自 CommonMethod #xff0c; CommonMethod 中定义的属性样式属于公共样式。下面就来学习这些样式
1.1.尺寸设置
宽高设置
设置组件的宽高#xff0c;缺省时使用组件自身内容的宽高#xff0c;比如充满父布…一、公共样式类属性
ArkUI框架提供的基础组件直接或者间接的继承自 CommonMethod CommonMethod 中定义的属性样式属于公共样式。下面就来学习这些样式
1.1.尺寸设置
宽高设置
设置组件的宽高缺省时使用组件自身内容的宽高比如充满父布局可以使用 string 值“100%”当组件同时设置 size 和 width / height 时以最后设置的值为准。
Entry
Component
struct TextExample {build() {Column({space:10}){Text().size({width:220, height:25}) //设置宽高.width(120) //设置宽度会覆盖上面的宽度.height(25) //设置高度会覆盖上面的高度.backgroundColor(#8EE5EE) //设置背景色Text().width(100%) //设置宽度.height(10) //设置高度.backgroundColor(#CD5555) //设置背景色Text().width(200) //设置宽度.height(200) //设置宽度.size({width:120, height:25}) //设置宽高、覆盖前边的值.backgroundColor(#8B0000) //设置背景}.size({width:100%, height:100%})}
}预览效果如下 如果子组件的宽高大于父组件的宽高默认情况下子组件会绘制出父组件的可视范围此时可以设置 clip(true) 方法限制子组件超出父组件的范围样例如下所示
Entry
Component
struct TextExample02 {build() {Column({space:50}){Column(){Text(高度超出父组件).width(120).height(120) //高度超出父组件.fontColor(Color.White).backgroundColor(#00EE76)}.width(300).height(100).backgroundColor(#8B8386)Column(){Text(高度超出父组件).width(120).height(120).fontColor(Color.White).backgroundColor(#8B7E66)}.width(300).height(100).backgroundColor(#FF6A6A).clip(true) // 设置父组件对于超出范围的子组件做剪切处理}.width(100%).height(100%).padding(20)}
}预览效果如下 宽高比设置
设置组件的宽高比aspectRatio width / height在设备适配上比较实用。
Entry
Component
struct AspectRationExample {build() {Column({space:10}){Row({space:10}){//1:1Text().width(50).height(50).backgroundColor(#FF4040)//1:1Text().width(50).backgroundColor(#FF4040).aspectRatio(1) //设置宽高比//1.5:1Text().width(50).backgroundColor(#FF4040).aspectRatio(1.5) //设置宽高比// 0.5:1 50: 100Text().width(50).backgroundColor(#FF4040).aspectRatio(0.5) //设置宽高比//和上面的效果一样//Text().width(50).height(100).backgroundColor(#FF4040)// 宽和高的比例50100 宽是高的0.5倍Text().height(100).backgroundColor(#FF4040).aspectRatio(0.5)}.padding(10).size({width:100%, height:120})}.padding(10).size({width:100%, height:100%})}
}预览效果如下 边距设置
盒模型作为前端布局中最简单也最重要的一项布局方式CSS盒模型本质上是一个盒子封装周围的HTML元素它包括外边距margin、边框border、内边距padding、实际内容content四个属性。CSS盒模型标准模型 IE模型 盒模型包括
内容content元素中显示的文本图片等实际内容。内边距padding内容和边框之间的空白区域。边框border围绕内容和内边距的线条或图案。外边距margin边框和其他元素之间的空白区域。
标准模型和IE模型的区别计算宽度和高度的不同
标准盒模型盒子总宽度/高度 width/height padding border margin。 即 width/height 只是内容高度不包含 padding 和 border 值 IE盒子模型盒子总宽度/高度 width/height margin (内容区宽度/高度 padding border) margin。 即 width/height 包含了 padding 和 border 值
在HarmonyOS4.0中盒模型也是类似的代码如下
Entry
Component
struct BoxExample {build() {Row(){ // 创建一个水平布局的Row组件Text(盒子模型) // 显示文本内容为“盒子模型”.height(100vp) // 设置高度为视口宽度的百分之百.width(100vp) // 设置宽度为视口宽度的百分之百.margin({left:10vp, top:30vp, right:50vp, bottom:70pv}) // 设置外边距.border({width:10px, style: BorderStyle.Solid, color: #0000ff}) // 设置边框样式.padding(30) // 设置内边距.backgroundColor(#00ff00) // 设置背景颜色为绿色.textAlign(TextAlign.Center) // 设置文本水平居中对齐}.backgroundColor(#ff0000) // 设置Row组件的背景颜色为红色}
}预览效果如下 在双向预览中查看盒模型构成如下 设置组件的内边距/外边距当只设置一个值时表示对四个方向的边距同时生效参数类型为 Padding / Margin 时可单独设置边距若设置为百分比时上下左右内外距均以父容器的 width 作为基础值。案例代码如下
Entry
Component
struct BoxExample02 {build() {Row(){Column(){Row(){Text().width(100%) //设置宽度充满父组件.height(100%) //设置高度充满父组件.backgroundColor(#EE799F) //设置背景色}.padding(20) //设置四个边距.backgroundColor(#FFF0F5) //设置背景色.size({width:80, height:80}) //设置宽和高尺寸Row(){Text().width(100%) //设置宽度充满父组件.height(100%) //设置高度充满父组件.backgroundColor(#EE799F) //设置背景色}.padding({left:5, top: 20, right:5,bottom:20}) //设置四个边距.backgroundColor(#FFF0F5) //设置背景色.size({width:80, height:80}) //设置宽和高尺寸.margin(30) //设置外边距否则两个Row容器会挤在一起}.size({width:100%,height:100%}).backgroundColor(#54FF9F)}}
}预览效果如下 权重设置
设置组件的布局权重该属性仅在 Row、Column、Flex 布局中生效表示在父容器主轴方向上的尺寸按照权重比进行分配默认值为 0。
Entry
Component
struct WeightSettings {build() {Column({space:20}){Row(){ //下面两个Text子组件全都设置了权重则子组件的宽度按照权重比例分配Text().height(30).backgroundColor(#F4A460).layoutWeight(1)Text().height(30).backgroundColor(#5F9EA0).layoutWeight(1)}Row(){ //子组件全都设置了权重则子组件的宽度按照权重比例分配子组件设置的宽度无效Text().width(80).height(30).backgroundColor(#F4A460).layoutWeight(1)Text().width(150).height(30).backgroundColor(#5F9EA0).layoutWeight(1)}Row(){ // 除去无权重子组件的宽度剩余子组件的宽度按照权重比例分配Text().width(150).height(30).backgroundColor(#228B22)Text().width(150).height(30).backgroundColor(#F4A460).layoutWeight(1)Text().width(120).height(30).backgroundColor(#5F9EA0).layoutWeight(2)}}.size({width:100%, height:100%}).padding({top:20, bottom:20})}
}本样例中 Row 的每个子组件都设置了权重为 1 表示均分父组件的宽度此时子组件设置的 width 是不起作用的样例运行结果如下图所示预览效果如下 尺寸约束
设置组件的约束尺寸从而在组件布局时对其尺寸进行限制constraintSize() 的优先级高于 width() 和 height()若设置的 minWidth 大于 maxWidth则 minWidth 生效minHeight 与 maxHeight 同理。
Entry
Component
struct SizeConstraints {build() {Column({space:20}){Text() // 目标参照组件.width(220).height(40).backgroundColor(#aabbcc)Text() // 设置约束尺寸.width(220).height(40).constraintSize({minWidth: 120,minHeight: 20}).backgroundColor(#bbccaa)Text() // 设置过最大约束尺寸,实际宽和高超过了则按照约束显示.width(220).height(40).constraintSize({maxWidth: 120,maxHeight: 20}).backgroundColor(#bbccaa)}.size({width:100%,height:100%})}
}预览效果如下 1.2.位置设置
对齐方式
设置元素内容的对齐方式当设置的 width 和 height 大小超过元素本身内容大小时生效。
Entry
Component
struct PositionSetting {build() {Column({space:20}){Text(align) //默认样式.fontSize(20).backgroundColor(#90EE90)Text(align) //组件尺寸默认等于内容尺寸.fontSize(20).backgroundColor(#90EE90).align(Alignment.TopStart) //组件尺寸默认等于内容尺寸不符合要求Text(align).fontSize(20).backgroundColor(#90EE90).align(Alignment.TopStart) //设置内容对齐方式.size({width: 200, height: 60}) //组件尺寸大于内容尺寸符合条件}.size({width:100%, height:100%}).padding(20)}
}预览效果如下 布局方向
设置子组件在水平方向上的布局方式Direction 定义了一下 3 种布局方式
Ltr元素从左到右布局。Rtl元素从右到左布局。Auto默认值使用系统默认布局方向。
案例代码如下
Entry
Component
struct DirectionExample {build() {Column({space:20}){Row({space:10}){ //不设置子组件的对齐方式时采用默认值Text(1).height(50).width(25%).fontSize(18).backgroundColor(#AABBCC)Text(2).height(50).width(25%).fontSize(18).backgroundColor(#8B658B)Text(3).height(50).width(25%).fontSize(18).backgroundColor(#008B8B)}.width(90%).backgroundColor(#E0FFFF)Row({space:10}){ //不设置子组件的对齐方式时采用默认值Text(1).height(50).width(25%).fontSize(18).backgroundColor(#AABBCC)Text(2).height(50).width(25%).fontSize(18).backgroundColor(#8B658B)Text(3).height(50).width(25%).fontSize(18).backgroundColor(#008B8B)}.width(90%).backgroundColor(#E0FFFF).direction(Direction.Rtl)}.width(100%).height(100%).padding(20)}预览效果如下 绝对定位
设置当前组件在父组件中的位置参照点为父容器顶点位置。在布局容器中设置该属性不影响父容器布局仅在绘制时进行位置调整。
Entry
Component
struct DirectionExample {build() {Column({space:20}){Row({space:10}){ //不设置子组件的对齐方式时采用默认值Text(1).height(50).width(25%).fontSize(18).backgroundColor(#AABBCC)Text(2).height(50).width(25%).fontSize(18).backgroundColor(#8B658B)Text(3).height(50).width(25%).fontSize(18).backgroundColor(#008B8B)}.width(90%).backgroundColor(#E0FFFF)Row({space:10}){ //不设置子组件的对齐方式时采用默认值Text(1).height(50).width(25%).fontSize(18).backgroundColor(#8B0000).position({x:200,y:0}) //使用绝对定位设置组件位置Text(2).height(50).width(25%).fontSize(18).backgroundColor(#8B658B)Text(3).height(50).width(25%).fontSize(18).backgroundColor(#008B8B)}.width(90%).backgroundColor(#E0FFFF).direction(Direction.Rtl)}.width(100%).height(100%).padding(20)}
}postion 属性会更改子组件的布局结构预览效果如下第二行的第一个text组件设置了位置 相对定位
设置当前组件在父组件中的位置参照点为自身顶点位置。设置该属性不影响父容器布局仅在绘制时进行位置调整。
Entry
Component
struct DirectionExample {build() {Column({space:20}){Row({space:10}){ //不设置子组件的对齐方式时采用默认值Text(1).height(50).width(25%).fontSize(18).backgroundColor(#AABBCC)Text(2).height(50).width(25%).fontSize(18).backgroundColor(#8B658B)Text(3).height(50).width(25%).fontSize(18).backgroundColor(#008B8B)}.width(90%).backgroundColor(#E0FFFF)Row({space:10}){Text(1).height(50).width(25%).fontSize(18).backgroundColor(#8B0000).offset({x:10,y:50}) //使用相对定位(相对之前的位置参照点为自身顶点位置)设置组件位置Text(2).height(50).width(25%).fontSize(18).backgroundColor(#8B658B)Text(3).height(50).width(25%).fontSize(18).backgroundColor(#008B8B)}.width(90%).backgroundColor(#E0FFFF).direction(Direction.Rtl)}.width(100%).height(100%).padding(20)}
}offset 属性只更改组件自身的布局结构。下面的text组件1,设置了相对定位预览效果如下 锚点设置
设置元素在位置定位时的锚点以自身顶点位置作为基准点进行偏移。设置该属性不影响父容器布局仅在绘制时进行位置调整。
Entry
Component
struct DirectionExample {build() {Column({space:20}){Row({space:10}){ //不设置子组件的对齐方式时采用默认值Text(1).height(50).width(25%).fontSize(18).backgroundColor(#AABBCC)Text(2).height(50).width(25%).fontSize(18).backgroundColor(#8B658B)Text(3).height(50).width(25%).fontSize(18).backgroundColor(#008B8B)}.width(90%).backgroundColor(#E0FFFF)Row({space:20}){Text(1).height(50).width(25%).fontSize(18).backgroundColor(#8B0000).markAnchor({x:20,y:20}) //以自身顶点位置作为基准点进行偏移Text(2).height(50).width(25%).fontSize(18).backgroundColor(#8B658B)Text(3).height(50).width(25%).fontSize(18).backgroundColor(#008B8B)}.width(90%).backgroundColor(#E0FFFF)}.width(100%).height(100%).padding(20)}
}markAnchor 属性只更改组件自身的布局结构预览效果如下 约束条件可以参考相对定位容器里面的内容
设置子组件在父组件 RelativeContainer 中的对齐方式分为水平对齐规则和竖直对齐规则分别说明如下
水平对齐规则 left 设置左对齐参数。middle 设置中间对齐的参数。right 设置右对齐参数。 竖直对齐规则 top 设置顶部对齐的参数。bottom 设置底部对齐的参数。center 设置中心对齐的参数。
参考相对容器布局里面的内容。
1.3.背景设置
背景色设置
设置组件的背景颜色 ResourceColor 类型支持 Color | number | string | Resource 四种
Color颜色枚举值。numberHEX格式颜色支持rgb。示例0xffffff。stringrgb或者rgba格式颜色。示例‘#ffffff’, ‘#ff000000’, ‘rgb(255, 100, 255)’, ‘rgba(255, 100, 255, 0.5)’。Resource使用引入资源的方式引入系统资源或者应用资源中的颜色。
案例代码如下
Entry
Component
struct ColorExample {build() {Row({space:20}) {Text().height(30)//string//// rgb或者rgba格式颜色。// 示例#ffffff, #ff000000, rgb(255, 100, 255), rgba(255, 100, 255, 0.5)。.backgroundColor(#CD3333).layoutWeight(1)Text().height(30)//number HEX格式颜色支持rgb.backgroundColor(2055151).layoutWeight(1)Text().height(30)//颜色枚举值.backgroundColor(Color.Pink).layoutWeight(1)Text().height(30).layoutWeight(1)//Resource 使用引入资源的方式引入系统资源或者应用资源中的颜色.backgroundColor($r(sys.color.ohos_id_color_warning_dark))}.width(100%).padding(30)}
}预览效果如下 背景图设置
设置组件的背景图片repeat 参数可以设置图片的填充模式例如代码下所示
Entry
Component
struct ColorExample02 {build() {Column(){Text(背景图片设置).fontSize(30) //字体大小.fontColor(Color.Red) //字体颜色.size({width:220, height:100}) //设置宽和高.backgroundImage($r(app.media.WATCHGT4)) //设置组件的背景图片.textAlign(TextAlign.Center).fontWeight(FontWeight.Bold)}.width(100%).padding(30)}
}预览效果如下 1.4.边框设置
边框样式
设置组件的边框样式支持设置边框颜色、边框粗细、边框圆角以及边框的展示样式。同时设置 border 和 borderXXX 以最后设置的值为准。
Entry
Component
struct BorderExample {build() {// 创建一个Column组件设置间距为20Column({space:20}){// 创建一个Text组件设置高度为80宽度为160Text().height(80).width(160)// 通过参数设置边框样式.border({color:Color.Orange, // 边框颜色为橙色width:5, // 边框宽度为5radius: 0, // 边框圆角半径为0即直角style: BorderStyle.Solid // 边框样式为实线})// 创建另一个Text组件设置高度为80宽度为160Text().height(80).width(160)// 通过属性设置边框样式.borderWidth(5) // 边框宽度为5.borderColor(Color.Orange) // 边框颜色为橙色.borderRadius(15) // 边框圆角半径为15.borderStyle(BorderStyle.Dotted) // 边框样式为点状线}// 设置Column组件的宽度为100%内边距为30.width(100%).padding(30)}
}预览代码如下 1.5显隐设置
显示和隐藏设置
设置组件的显示和隐藏 Visibility 类型说明如下
Visible默认值组件显示在页面上。Hidden组件在屏幕上占位但是不显示。None组件在屏幕上不显示也不占用位置。
简单样例如下图所示
Entry
Component
struct VisibilityExample {build() {Column({space:20}){Row(){Text().height(30).width(120).backgroundColor(#AABBCC).layoutWeight(1)Text().height(30).width(120).backgroundColor(#2E8B57).visibility(Visibility.Visible) //设置为Hidden虽然不在界面显示但是还占着位置.layoutWeight(1)Text().height(30).backgroundColor(#CD8C95).layoutWeight(1)}Row(){Text().height(30).width(120).backgroundColor(#AABBCC).layoutWeight(1)Text().height(30).width(120).backgroundColor(#2E8B57).visibility(Visibility.Hidden) //设置默认值Visible.layoutWeight(1)Text().height(30).backgroundColor(#CD8C95).layoutWeight(1)}Row(){Text().height(30).width(120).backgroundColor(#AABBCC).layoutWeight(1)Text().height(30).width(120).backgroundColor(#2E8B57).visibility(Visibility.None) //设置为None就不会在界面上显示.layoutWeight(1)Text().height(30).backgroundColor(#CD8C95).layoutWeight(1)}}.width(100%).padding(30)}
}预览效果如下 显示优先级设置
设置当前组件在布局容器中显示的优先级当父容器空间不足时低优先级的组件会被隐藏该属性仅在Row 、Column、和 Flex(单行) 容器组件中生效。
class ChildInfo {text: string ;priority: number 0;
}class ContainerInfo {label: string ;size: string ;
}Entry
Component
struct DisplayPriorityExample {State currentIdx: number 0private children: ChildInfo[] [{ text: 1\n(优先项:2), priority: 2 },{ text: 2\n(优先项:1), priority: 1 },{ text: 3\n(优先项:3), priority: 3 },{ text: 4\n(优先项:5), priority: 5 },{ text: 5\n(优先项:4), priority: 4 }]// 显示容器大小private container: ContainerInfo[] [{ label: Big container, size: 100% },{ label: Middle container, size: 50% },{ label: Small container, size: 25% }]build() {Column({space:20}){Flex({justifyContent: FlexAlign.SpaceBetween}){ForEach(this.children,(item:ChildInfo){Text(item.text).width(60).height(160).fontSize(20).fontColor(Color.White).textAlign(TextAlign.Center).backgroundColor(#CD8C95).displayPriority(item.priority)//使用displayPriority给子组件绑定显示优先级,数字越大优先级越高})}.width(this.container[this.currentIdx].size) //通过变量设置Flex父容器宽度.backgroundColor(#778899)Button(this.container[this.currentIdx].label) //切换父容器大小.backgroundColor(#66CDAA).onClick((){//点击后修改currentIdx的值为 (currentIdx1)/3 取余数 1this.currentIdx (this.currentIdx 1) % this.container.length})}.width(100%).padding(20)}
}当父容器空间不足的时候。只会展示优先级高的子组件优先级底的子组件会自动隐藏如下 1.6.多态样式
多种状态样式设置
设置组件在不同状态下的显示样式目前只支持通用属性 StateStyle 有以下几种状态
normal设置组件默认情况下的显示样式。pressed设置组件按下时的显示样式。disabled设置组件不可用时的显示样式。focused设置组件获取焦点时的显示样式。clicked设置组件点击时的显示样式。
案例代码如下
Entry
Component
struct StateStylesExample {build() {Column({space:20}){Button(按钮1).width(200).height(50)Button(按钮2).width(200).height(50).stateStyles({normal:{.backgroundColor(Color.Blue) //设置默认情况下的显示样式},pressed:{.backgroundColor(Color.Red) //设置手指按下的显示样式}})}.width(100%).padding({top:30,bottom:30})}
}会发现上面的代码给按钮2设置点击的时候会变成红色预览效果如下 Styles样式设置
Styles 作用是提取组件的公共样式方便其他组件复用样式它可以定义在组件内部或者组件外部当定义在组件外部时需要添加 funcition 关键字简单样例如下所示
Styles function buttonGlobalNormalStyles(){ //组件外定义按钮默认的样式.backgroundColor(#43CD80).width(200).height(50)
}Styles function buttonGlobalPressedStyles(){ //组件外定义按钮摁下的样式.backgroundColor(#FF7F50).width(200).height(50)
}Entry
Component
struct StylesExample {Styles buttonNormalStyles(){ //组件内定义按钮默认的样式.backgroundColor(#8B8682).width(200).height(50)}Styles buttonPressedStyles(){ //组件内定义按钮摁下的样式.backgroundColor(#FF6347).width(200).height(50)}build() {Column({space:20}){Button(默认样式).width(200).height(50)Button(组件外样式).stateStyles({normal:buttonGlobalNormalStyles, //使用组件外定义的按钮默认的样式pressed:buttonGlobalPressedStyles //使用组件外定义的按钮摁下的样式})Button(组件内样式).stateStyles({normal:this.buttonNormalStyles, //使用组件内定义的按钮默认的样式pressed:this.buttonPressedStyles //使用组件内定义的按钮摁下的样式})}.width(100%).padding({top:30,bottom:30})}
}预览效果如下 Extend样式设置
在 UI 构建中如果组件设置的属性都是相同的比如 Text 组件的 fontColor、fontSize 等设置都一致那么可以使用 Extend 对 Text 组件进行扩展提取相同的属性部分这样可以有效降低代码量。简单样例如下所示
Extend(Text) // 使用Extend装饰器扩展Text组件的样式
function textStyle(size:number20, color:ResourceColorColor.Orange,bgColor:ResourceColorColor.Pink){.fontSize(size) // 设置字体大小为参数指定的大小.fontColor(color) // 设置字体颜色为参数指定的颜色.backgroundColor(bgColor) // 设置背景颜色为参数指定的颜色.fontStyle(FontStyle.Italic) // 设置字体样式为斜体.fontWeight(FontWeight.Bold) // 设置字体粗细为粗体.width(220) // 设置宽度为220.height(110) // 设置高度为110.textAlign(TextAlign.Center) // 设置文本对齐方式为居中
}Entry // 使用Entry装饰器标识为入口文件
Component // 使用Component装饰器标识为组件
struct ExtendExample { // 定义名为ExtendExample的结构体build() { // 定义build方法Column({space:20}){ // 使用Column组件设置间距为20Text(Extend).textStyle() // 使用Text组件并应用textStyle函数定义的样式Text(Extend).textStyle(35, #2F4F4F, #FFE4E1) // 使用Text组件并应用textStyle函数定义的样式传入自定义的参数}.width(100%) // 设置宽度为100%.height(100%) // 设置高度为100%.padding(10) // 设置内边距为10}
}Extend 装饰器不能定义在 struct 内部暂时无法在其它页面引入 Extend 样式。预览效果如下 1.7.渐变颜色
设置组件的渐变样式参数如下 angle设置渐变的角度。 direction设置渐变方向是angle的抽象 colors渐变颜色数组 repeating是否重复渲染。
示例代码如下
.linearGradient({angle: 180, // 设置渐变角度colors: [[#BDE895, 0.1], [#95DE7F, 0.6], [#7AB967, 1]] // 设置渐变颜色
})组件渐变色方向旋转 180° 在 [0 ~ 0.1] 区间渐变色为 #BDE895在 [0.1, 0.6] 区间渐变色由 #BDE895 线性渐变成 #95DE7F 在 [0.6, 1.0] 区间渐变色由 #95DE7F 线性渐变成 #7AB967 。如下图 案例代码如下
Entry
Component
struct LinearGradientExample {build() {// 创建一个Column组件设置间距为30Column({space:30}){// 创建一个Text组件设置宽度为240高度为50布局权重为1Text().size({width:240, height: 50}).layoutWeight(1)// 设置线性渐变样式.linearGradient({angle:90, // 渐变角度为90度colors: [[#EE6363,0.1],[#CD5555,0.6],[#8B3A3A,1]] // 渐变颜色和位置})// 创建另一个Text组件设置宽度为240高度为50布局权重为1Text().size({width:240, height: 50}).layoutWeight(1)// 设置线性渐变样式.linearGradient({angle:135, // 渐变角度为135度colors: [[#8470FF,0.1],[#7B68EE,0.4],[#6A5ACD,0.7],[#483D8B,1]] // 渐变颜色和位置})}// 设置Column组件的宽度为100%高度为100%内边距为20.width(100%).height(100%).padding(20)}
}预览效果如下
