轮播图 输入文本框 图片 视频 按钮 开关组件 递加递减

一轮播图1.核心效果左右滑动切换页面、自动循环播放、底部指示器标记当前页数。2.Swiper 核心基础属性必背1index作用设置默认展示第几张页面下标从 0 开始。例index (0) 默认显示第一张。2autoPlay作用开启自动轮播值为布尔 true/false。autoPlay (true) 自动切换autoPlay (false) 只能手动滑动。3interval作用自动切换的间隔时间单位毫秒。interval (3000) 代表 3 秒切换一次。4loop作用是否循环播放。loop (true) 滑到最后一张会切回第一张loop (false) 到末尾停止。5indicator作用控制底部小圆点指示器显示隐藏。indicator (true) 显示false 隐藏。5indicatorColor / selectedIndicatorColor指示器样式普通圆点颜色、当前激活圆点颜色。7vertical作用切换滑动方向。默认 false 左右横滑vertical (true) 上下竖滑。2.基础使用步骤外层创建 Swiper 容器配置轮播基础属性自动播放、间隔、循环。在 Swiper 内部编写轮播页面图片 / 文字卡片。自定义指示器颜色、滑动方向等美化属性。二输入文本框1.TextInput单行文本输入框用来接收用户手动输入文字2.常用核心属性1placeholder占位提示文字输入框空白时显示浅灰色提示输入内容后自动消失。 例.placeholder(请输入用户名)2text绑定输入框内的文本内容一般搭配状态变量使用。3type输入类型控制InputType.Normal普通文字默认InputType.Number仅允许输入数字InputType.Password密码模式文字自动隐藏为黑点三图片1.Image是展示图片的基础组件。2.图片引用方式本地图片项目 resources/base/media 文件夹下放图片 写法$r((app.media.图片文件名))3.核心常用属性width /height设置图片宽高尺寸支持数字、百分比objectFit图片缩放适配模式高频考点ImageFit.Cover铺满容器裁剪超出部分常用头像、轮播ImageFit.Contain完整显示整张图留白不裁剪ImageFit.Fill拉伸填满容器图片会变形ImageFit.None原图尺寸不缩放borderRadius设置圆角数值越大圆角越圆设为宽高一半可做圆形头像.shadow()视觉属性radius必填阴影模糊半径color可选默认黑色阴影颜色offsetX可选默认 0水平偏移offsetY可选默认 0垂直偏移四视频1.Video播放视频的专用组件用来播放本地视频、网络视频常见于短视频、课程播放、商品宣传视频页面。2.播放方式本地视频放在resources/base/rawfile文件夹Video({ src: $rawfile(output.mp4), controller:this.controller, previewUri:this.previewUri })3.核心配套控制器 VideoController必须先定义控制器变量才能操控视频4.视频播放五按钮1.Button用于页面点击操作点击后触发onClick事件执行代码常见登录、提交、切换、播放等功能。2.高频常用修饰属性.width() / .height()设置按钮宽高.backgroundColor()按钮背景颜色.fontSize()按钮文字大小.fontColor()按钮文字颜色.borderRadius()圆角数值越大越圆润设宽高一半为圆形按钮.shadow()给按钮添加阴影做出悬浮立体效果.stateEffect(false)关闭点击按压变暗效果.enabled(false)禁用按钮无法点击六开关1.Toggle开关选择组件外形是滑动开关只有开启 / 关闭两种状态。2.创建格式3.type开关样式常用ToggleType.Switch滑动开关isOn绑定布尔状态true 打开false 关闭4.核心属性selectedColor开关打开时滑块背景色switchBgColor开关关闭时底座底色onChange切换状态触发回调实时获取最新开关状态5.必须搭配State状态变量绑定开关否则切换不会保存状态ToggleType 不写默认也是 Switch 滑动样式不用额外修改onChange 参数 value 固定为布尔值 true/false代表开关最新状态不可点击文字变色七递加递减1.实现思路依靠State 数字变量存储数值搭配两个 Button 按钮点击时修改变量实现加减加号按钮数值1递加减号按钮数值-1递减Text 实时展示当前数字