在项目中使用的系统组件和属性总结如下：
使用的系统组件：
1.Column：纵向布局容器，用于垂直排列子组件。
2.Row：横向布局容器，用于水平排列子组件。
3.Stack：层叠布局容器，用于将子组件层叠显示。
4.Flex：弹性布局容器，用于创建灵活的布局。
5.Scroll：滚动布局容器，用于实现滚动效果。
6.Image：图片组件，用于显示图片内容。
7.Text：文本组件，用于显示文本内容。
8.LoadingProgress：加载指示器组件，用于展示加载过程中的指示器。
9.SaveButton：保存按钮组件，用于保存图片到相册。
10.Swiper：轮播图组件，用于创建轮播图效果。
11.TextInput：输入框组件，用于接收用户输入。
12.Search：搜索条组件，用于实现搜索功能。
13.Web：网页加载组件，用于加载网页内容。
使用的属性记录：
* width：设置容器或组件的宽度。
* height：设置容器或组件的高度。
* backgroundColor：设置容器或组件的背景色。
* padding：设置容器或组件的内边距。
* margin：设置容器或组件的外边距。
* visibility：根据属性值控制容器或组件的显示或隐藏。
* onClick：设置点击事件处理器。
* onAreaChange：监听容器尺寸变化。
* linearGradient：设置容器或组件的背景为线性渐变色。
* shadow：设置容器的阴影效果。
* align：设置内部组件的位置显示方式。
* constraintSize：设置容器或组件的最大宽度或高度。
* transition：为容器或组件添加过渡动画效果。
* maxLines：设置文本组件最多显示的行数。
* onChange：监听输入内容的变化。
* indicator：设置是否显示轮播指示点。
* loop：设置是否开启轮播图的循环播放。
* src：设置网页加载组件的源地址。
* javaScriptProxy：注册JS Bridge，用于与H5页面进行数据通信。
* onLoadIntercept：拦截内部跳转、重定向等链接。
以上是项目中使用的系统组件和属性记录，可以作为学习和开发项目时的参考。
【代码示例】
import { LengthMetrics } from '@kit.ArkUI'
import web_webview from '@ohos.web.webview';
@Entry
@Component
export struct Page13 {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State inviteQrCodeID: string = "inviteQrCodeID"
@State isShow: boolean = true
@State searchValue: string = ""
scripts: Array<ScriptItem> = [
// { script: this.localStorage, scriptRules: ["*"] }
];
build() {
Column() {
Column({ space: 10 }) { // 纵向布局容器
// ForEach() 可配合使用以动态渲染子组件
}
.width('90%') // 设置容器宽度为父容器的90%
.height('100%') // 设置容器高度为父容器的100%
.backgroundColor("#ffffff") // 设置容器背景色为白色
.layoutWeight(1) // 占据父容器的剩余空间
.alignItems(HorizontalAlign.Center) // 水平居中对齐
.justifyContent(FlexAlign.Center) // 垂直居中对齐
.align(Alignment.TopStart) // 内容对齐方式为顶部左端
.borderWidth({ bottom: 1 }) // 设置底部边框宽度为1
.borderColor("#E3E3E3") // 设置边框颜色
.padding({ left: '20lpx', right: '20lpx' }) // 设置左右内边距为20逻辑像素
.margin({ top: '44lpx' }) // 设置顶部外边距为44逻辑像素
.visibility(this.isShow ? Visibility.Visible : Visibility.None) // 根据isShow属性控制容器的显示或隐藏
.id(this.inviteQrCodeID) // 设置组件ID，方便后续截图保存到相册
.flexGrow(1) // 当父布局为Flex时，占据父容器的剩余空间
.gesture(LongPressGesture({ repeat: false })) // 长按手势监听，设置repeat为false表示长按时不会重复触发
.onClick(() => { // 点击事件处理器
// 处理点击逻辑
})
Row() { // 横向布局容器
// ForEach() 可用于动态渲染子组件列表
}
.width('100%') // 设置容器宽度为父容器的100%
.height('192lpx') // 设置容器高度为192逻辑像素
.justifyContent(FlexAlign.End) // 子元素在主轴方向上靠右对齐
.backgroundColor(Color.White) // 设置容器背景色为白色
.padding({ left: '28lpx', right: '28lpx' }) // 设置左右内边距为28逻辑像素
.margin({ top: '39lpx' }) // 设置顶部外边距为39逻辑像素
.transition(TransitionEffect.OPACITY.animation({ duration: 200 })) // 添加透明度过渡动画，持续时间为200毫秒
.visibility(this.isShow ? Visibility.None : Visibility.Visible) // 根据 `this.isShow` 属性来决定是否显示该容器
.onClick(() => { // 点击事件处理器
// 执行点击操作的逻辑
})
.onAreaChange((previousArea: Area, currentArea: Area) => { // 监听容器尺寸变化
// 在容器尺寸发生变化时执行相关逻辑
})
Stack({ alignContent: Alignment.Bottom }) { // 创建一个层叠布局容器，并设置内容对其方式为底部对齐
}
.width(180) // 设置容器宽度为180逻辑像素
.height(180) // 设置容器高度为180逻辑像素
.backgroundColor(0x88000000) // 设置容器背景色为半透明黑色（RGB: #000000，Alpha: 0.53）
.borderRadius(10) // 设置容器的圆角半径为10逻辑像素
.margin({ left: '25lpx', top: '6lpx', right: '25lpx' }) // 设置容器的左、顶和右外边距分别为25和6逻辑像素
.align(Alignment.Top) // 设置内部组件的位置显示方式为顶部对齐
.visibility(this.isShow ? Visibility.Visible : Visibility.None) // 根据 `this.isShow` 属性值来控制容器的显示或隐藏
.onClick(() => {
}) // 定义点击事件处理函数
.linearGradient({
// 设置容器背景色为线性渐变色，注意与 `.backgroundColor` 互斥
angle: 90, // 渐变角度为90度
colors: [// 渐变颜色配置
[0xFF0000, 0.0], // 红色，位置0%
[0xFFFF00, 0.2], // 黄色，位置20%
[0x00FF00, 0.4], // 绿色，位置40%
[0x00FFFF, 0.6], // 青绿色，位置60%
[0x0000FF, 0.8], // 蓝色，位置80%
[0xFF00FF, 1.0]// 紫色，位置100%
]
})
.shadow({
// 设置容器的阴影效果
radius: 20, // 阴影模糊半径为20逻辑像素
offsetY: 25, // 阴影垂直偏移量为25逻辑像素
offsetX: 0, // 阴影水平偏移量为0逻辑像素
color: "#bfbfbf" // 阴影颜色为浅灰色
})
Flex({ wrap: FlexWrap.Wrap }) { // 创建一个允许换行的弹性布局容器
// ForEach 通常用于内部动态渲染子组件列表
}
.width('100%') // 设置容器宽度为父容器的100%
.height('88lpx') // 设置容器高度为88逻辑像素
.margin({ top: '20lpx', bottom: '30lpx' }) // 设置容器的顶部和底部外边距分别为20和30逻辑像素
.borderWidth({ top: 1 }) // 设置容器顶部边框宽度为1逻辑像素
.borderColor("#cccccc") // 设置容器边框颜色为浅灰色
.visibility(this.isShow ? Visibility.Visible : Visibility.None) // 根据 `this.isShow` 属性值来控制容器的显示或隐藏
Scroll() { // 创建一个滚动布局容器
// 通常内部配合 Row() 或 Column() 使用以实现滚动效果
}
.width('100%') // 设置容器宽度为父容器的100%
.layoutWeight(1) // 占据父容器的剩余空间
.scrollable(ScrollDirection.Horizontal) // 设置滚动方向为水平
.scrollBar(BarState.Off) // 关闭滚动条显示
.borderWidth({ bottom: 1 }) // 设置底部边框宽度为1逻辑像素
.borderColor("#e3e3e3") // 设置边框颜色
.align(Alignment.Start) // 设置内部组件的位置显示方式为起始位置对齐
.visibility(this.isShow ? Visibility.Visible : Visibility.None) // 根据 `this.isShow` 属性值来控制容器的显示或隐藏
Image($r('app.media.app_icon'))// 图片组件
.width('120lpx')// 设置图片宽度为120逻辑像素
.height('120lpx')// 设置图片高度为120逻辑像素
.padding('10lpx')// 设置图片的内边距为10逻辑像素
.margin({ top: '25lpx' })// 设置图片的顶部外边距为25逻辑像素
.draggable(false)// 设置图片不可拖动，默认情况下不设置时可能会受外层长按手势影响
.objectFit(ImageFit.Fill)// 设置图片显示方式为填充，可能会导致图片变形
.visibility(this.isShow ? Visibility.Visible : Visibility.Hidden)// 根据 `this.isShow` 属性值来控制图片的显示或隐藏
.alt($r('app.media.app_icon'))// 设置图片加载失败时的占位图
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])// 使图片在系统安全区域内扩展，避免被状态栏遮挡
.onClick(() => { // 点击事件处理器
// 处理点击逻辑
})
Text() { // 文本组件，可结合 ForEach 和 Span 使用
ForEach(["a", "b"], (item: string, index: number) => { // 使用 ForEach 循环遍历数组 ["a", "b"]
Span(item)// 创建一个 Span 子组件，并传入当前项作为文本内容
.fontColor("#FF1919")// 设置 Span 组件的文字颜色为红色
.fontSize('24lpx')// 设置 Span 组件的字体大小为24逻辑像素
.onClick(() => {
}) // 设置 Span 组件的点击事件处理器
})
}
.width('100%') // 设置 Text 组件的宽度为100%，即填充其父容器的宽度
.height('120lpx') // 设置 Text 组件的高度为120逻辑像素
.textAlign(TextAlign.Center) // 设置 Text 组件内的文本水平居中对齐
.fontColor("#2E2E2E") // 设置 Text 组件内的文本颜色为深灰色
.fontSize('36lpx') // 设置 Text 组件内的字体大小为36逻辑像素
.backgroundColor("#F9F9F9") // 设置 Text 组件的背景色为浅灰色
.padding(20) // 设置 Text 组件的内边距为20逻辑像素
.margin({ bottom: '44lpx' }) // 设置 Text 组件的底部外边距为44逻辑像素
.lineHeight('60lpx') // 设置 Text 组件内文本的行间距（行高）为60逻辑像素
.lineSpacing(LengthMetrics.lpx(15)) // 设置 Text 组件内文本行与行之间的实际空白距离为15逻辑像素
.borderRadius(8) // 设置 Text 组件的圆角半径为8逻辑像素
.borderWidth('1lpx') // 设置 Text 组件的边框宽度为1逻辑像素
.borderColor("#bbbbbb") // 设置 Text 组件的边框颜色为浅灰色
.borderStyle(BorderStyle.Solid) // 设置 Text 组件的边框样式为实线
.visibility(this.isShow ? Visibility.Visible : Visibility.None) // 根据 `this.isShow` 的值来决定 Text 组件是否可见
.constraintSize({ maxWidth: '80%' }) // 设置 Text 组件的最大宽度为其父容器宽度的80%
.layoutWeight(1) // 设置 Text 组件在弹性布局中的权重为1，意味着它会占据剩余的空间
.transition(TransitionEffect.OPACITY.animation({ duration: 200 })) // 为 Text 组件添加一个持续200毫秒的透明度过渡动画
.maxLines(2) // 设置 Text 组件最多显示两行文本
.onClick(() => { // 设置 Text 组件的点击事件处理器
// 在此处添加点击事件的具体逻辑
})
.onAreaChange((previousArea: Area, currentArea: Area) => { // 监听 Text 组件的尺寸变化
// 在此处添加尺寸变化时的具体逻辑
})
.linearGradient({
// 设置 Text 组件的背景为线性渐变色，注意与 `.backgroundColor` 不能同时使用
angle: 90, // 设置渐变的角度为90度，从左到右
colors: [// 设置渐变的颜色配置数组
[0xFF0000, 0.0], // 红色，位于渐变起始点（0%）
[0xFFFF00, 0.2], // 黄色，位于渐变的20%位置
[0x00FF00, 0.4], // 绿色，位于渐变的40%位置
[0x00FFFF, 0.6], // 青绿色，位于渐变的60%位置
[0x0000FF, 0.8], // 蓝色，位于渐变的80%位置
[0xFF00FF, 1.0]// 紫色，位于渐变终点（100%）
]
})
LoadingProgress()// 创建一个加载指示器组件，通常用于页面加载过程中展示
.color(Color.White)// 设置加载指示器的颜色为白色
.width(100)// 设置加载指示器的宽度为100单位
.height(100) // 设置加载指示器的高度为100单位
SaveButton()// 用户点击此按钮可保存图片到相册
.onClick(() => {
}) // 设置点击事件处理器
Swiper() { // 创建一个轮播图组件，通常内部结合 ForEach 使用
}
.indicator(false) // 设置是否显示轮播指示点
.loop(false) // 设置是否开启轮播图的循环播放
TextInput({ placeholder: '请输入邀请码' })// 创建一个输入框，带有提示信息
.width('540lpx')// 设置输入框宽度为540逻辑像素
.height('76lpx')// 设置输入框高度为76逻辑像素
.placeholderColor("#CBCBCB")// 设置提示信息文字颜色为浅灰色
.maxLength(6)// 设置输入框最多可输入的字符长度为6
.fontColor("#2E2E2E")// 设置输入内容的颜色为深灰色
.fontSize('36lpx')// 设置输入框内字体大小为36逻辑像素
.padding({ left: 0 })// 设置输入框左侧内边距为0逻辑像素
.margin({ left: '105lpx', top: '28lpx' })// 设置输入框左侧和顶部的外边距分别为105和28逻辑像素
.borderRadius(0)// 设置输入框圆角为0，即直角
.backgroundColor("#ffffff")// 设置输入框背景色为白色
.inputFilter('^[0-9a-zA-Z]*$')// 设置输入过滤规则，仅允许数字和字母输入
.borderWidth({ bottom: 1 })// 设置输入框底部边框宽度为1逻辑像素
.borderColor("#CBCBCB")// 设置输入框边框颜色为浅灰色
.type(InputType.PhoneNumber)// 设置输入类型为电话号码
.caretColor('#FF1919')// 设置输入框光标颜色为红色
.onChange((value: string) => {
}) // 监听输入内容的变化
Search({ value: $$this.searchValue, placeholder: '搜索当前列表显示的单位' })// 创建一个搜索条组件，并设置初始值和提示信息
.layoutWeight(1)// 在弹性布局中占据剩余空间
.backgroundColor(Color.Transparent)// 设置搜索条背景为透明
.fontColor("#2E2E2E")// 设置搜索内容的颜色为深灰色
.placeholderColor("#CBCBCB")// 设置提示信息文字颜色为浅灰色
.borderRadius('32lpx')// 设置搜索条的圆角半径为32逻辑像素
.textFont({ size: '28lpx' })// 设置搜索条内字体大小为28逻辑像素
.onChange((value: string) => {
}) // 监听输入内容的变化
Web({ src: "https://xxx", controller: this.controller })// 创建一个加载网页的组件，并设置源地址和控制器
.width('100%')// 设置组件宽度为100%，即填充其父容器宽度
.height('100%')// 设置组件高度为100%，即填充其父容器高度
.domStorageAccess(true)// 开启DOM Storage API权限，允许本地存储功能
.javaScriptAccess(true)// 允许执行JavaScript脚本，默认允许执行
.databaseAccess(true)// 开启数据库存储API权限，默认不开启
.mixedMode(MixedMode.All)// 允许HTTP和HTTPS混合模式
.fileAccess(true)// 开启应用文件系统的访问权限，默认已开启
.imageAccess(true)// 允许自动加载图片资源，默认允许
.geolocationAccess(true)// 开启地理位置权限，默认开启
.onlineImageAccess(true)// 允许从网络加载图片资源，默认允许
.mediaPlayGestureAccess(true)// 允许有声视频播放无需用户手动点击，默认需要用户点击
.backgroundColor('#ffffff')// 设置组件背景色为白色
.javaScriptOnDocumentStart(this.scripts)// 在文档开始加载前注入JavaScript脚本
.javaScriptProxy({
// 注册JS Bridge，用于与H5页面进行数据通信
name: "xx", // 注册名称，注意避免使用关键字
object: Object(),
methodList: Object(),
controller: this.controller,
})
.onLoadIntercept((event) => {
return true
})// 拦截内部跳转、重定向等链接
.onControllerAttached(() => {
})// 在网页加载前设置自定义UA
.onPageEnd((e) => {
})// 页面加载完成后，可以设置隐藏loading布局
.onShowFileSelector((event) => {
return true
})// 网页请求拉起相机时，由系统调用返回用户选择的图片
.onVisibleAreaChange([0.0, 1.0], () => {
}) // 监听网页显示区域的变化
}
.height('100%')
.width('100%')
}
}
扫一扫
2920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
