##Harmony OS Next ##Ark Ts ##教育
本文适用于教育科普行业进行学习，有错误之处请指出我会修改。
📚【Swiper 组件超全指南】手把手教你玩转轮播图！✨
🎛️ 一、布局与尺寸设定 👉 设定自身尺寸：Swiper 会固定使用你设置的大小 👉 不设定尺寸时：
🔄 二、循环播放魔法
// 无限循环模式Swiper() { Text('0').backgroundColor(Color.Gray) Text('1').backgroundColor(Color.Green) Text('2').backgroundColor(Color.Pink)}.loop(true)
复制代码
🚀 三、自动轮播设置
Swiper() { //...子组件}.loop(true).autoPlay(true) // 开启自动驾驶.interval(1000) // 车速：1秒/页
复制代码
🎯 四、导航点 DIY 工坊 🔧 默认样式：底部居中小圆点 ✨ 自定义配方：
.indicator( Indicator.dot() .left(0) // 贴左边 .itemWidth(15) // 普通点尺寸 .selectedItemWidth(30) // 选中时变长条 .color(Color.Red) // 常态红色 .selectedColor(Color.Blue) // 选中变蓝)
复制代码
🏹 五、箭头样式改造
.displayArrow({ arrowSize: 18, // 箭头大小 arrowColor: Color.Blue, // 箭头颜色 backgroundSize: 24, // 底板大小 backgroundColor: Color.White }, false)
复制代码
🎮 六、三种切换方式
手指滑动🤚
点击导航点🔘
控制器切换（代码示例）：
@Entry@Componentstruct ControllerDemo { private swiperController = new SwiperController();
build() { Column() { Swiper(this.swiperController) { /*...*/ } Row({ space: 12 }) { Button('下一页 ➡️').onClick(() => this.swiperController.showNext()) Button('上一页 ⬅️').onClick(() => this.swiperController.showPrevious()) } } }}
复制代码
🌀 七、轮播方向切换
.vertical(true) // 垂直瀑布流模式🌊.vertical(false) // 默认水平滑动模式↔️
复制代码
👯 八、多页面同屏显示
.displayCount(2) // 一次显示2个小伙伴
复制代码
🎨 九、自定义动画黑科技
.customContentTransition({ timeout: 1000, transition: (proxy) => { // 这里可以玩透明度、缩放、位移... // 示例：卡片式渐隐效果 this.opacityList[proxy.index] = 1 - proxy.position/2 this.scaleList[proxy.index] = 0.75 + 0.25*(1-proxy.position/2) }})
复制代码
💡 小贴士：
推荐必开 loop+autoPlay 组合技，轮播更顺滑🍭
自定义导航点时注意颜色对比度🌈
复杂动画建议先在模拟器调试👨💻
快把这些技巧用起来，让你的轮播图 C 位出道吧！🚀🎉
📚【Grid 网格布局终极指南】打造完美九宫格 &自适应布局！✨
🔥 网格布局三板斧 ✅ 均分小能手 | ✅ 跨行跨列王 | ✅ 滚动性能怪
🌈 一、基础布局设定 👉 尺寸设定原则：
设了宽高 → 固定尺寸
没设宽高 → 智能匹配父容器
特殊场景：结合 margin 使用更灵活
🔧 二、核心排列方式
🎛️ 行列模板设置
// 三行三列经典布局Grid() { //...GridItem们}.rowsTemplate('1fr 1fr 1fr') // 垂直三等分.columnsTemplate('1fr 2fr 1fr') // 水平1:2:1比例
复制代码
🤹 跨行跨列黑科技
// 计算器布局示例layoutOptions: GridLayoutOptions = { onGetRectByIndex: (index) => { if (index === 0) return [6, 0, 1, 2] // "0"键占2列 if (index === 15) return [5, 3, 2, 1] // "="键占2行 return [默认位置] }}
Grid(undefined, this.layoutOptions) { // 按钮们...}.columnsTemplate('1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
复制代码
🧭 主轴方向控制
.maxCount(3) // 主轴最多3个元素.layoutDirection(GridDirection.Row)
复制代码
🚀 三、数据展示技巧
🎨 循环渲染模板
@State services: string[] = ['会议', '签到', '投票', '打印']
Grid() { ForEach(this.services, (item) => { GridItem() { Text(item).fontSize(16) } })}.rowsTemplate('1fr 1fr').columnsTemplate('1fr 1fr')
复制代码
📏 间距微调
.columnsGap(10) // 列间距10vp.rowsGap(15) // 行间距15vp
复制代码
🌀 四、滚动控制秘籍
🖱️ 横向滚动实现
Grid() { // 商品卡片们...}.rowsTemplate('1fr 1fr') // 只设行模板.height(200) // 固定高度触发横向滚动
复制代码
📅 日历翻页控制
private scroller: Scroller = new Scroller()
Grid(this.scroller) { // 日期格子们...}.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
Button('下一页').onClick(() => { this.scroller.scrollPage({ next: true }) // 丝滑翻页})
复制代码
⚡ 五、性能优化指南
// 懒加载+缓存优化Grid() { LazyForEach(this.dataSource, (item) => { GridItem() { // 复杂内容... } })}.cachedCount(3) // 前后预加载3屏
复制代码
💡 实战小贴士：
优先使用 rows/columnsTemplate 组合，布局最稳定🌟
跨行列布局先画草图再写代码✏️
长列表必用 LazyForEach + cachedCount🚀
复杂布局建议先做原型再细化🎨
🎯 常用场景配置表：
快用这些姿势打造你的专属网格布局吧！🎉👉 [尝试写个计算器布局练手~]
评论