70. [HarmonyOS NEXT 实战案例九] 旅游景点网格布局（下）

[HarmonyOS NEXT 实战案例九] 旅游景点网格布局（下）

项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ， 欢迎fork & star

效果演示

1. 概述

在上一篇教程中，我们学习了如何使用GridRow和GridCol组件实现基本的旅游景点网格布局。本篇教程将在此基础上，深入探讨如何优化布局、添加交互功能，以及实现更多高级特性，打造一个功能完善的旅游景点应用。

本教程将涵盖以下内容：

• 响应式布局优化
• 景点卡片优化
• 景点详情页实现
• 景点筛选和排序功能
• 收藏和分享功能
• 高级动效和交互优化

2. 响应式布局优化

2.1 使用断点适配不同设备

在上一篇教程中，我们已经使用GridRow的columns属性实现了基本的响应式布局。现在，我们将进一步优化，使用自定义断点和更精细的列配置：

GridRow({
  columns: { xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 6 },
  gutter: { x: 16, y: 16 },
  breakpoints: [
    { value: 320, reference: BreakpointsReference.WindowSize },  // xs
    { value: 600, reference: BreakpointsReference.WindowSize },  // sm
    { value: 840, reference: BreakpointsReference.WindowSize },  // md
    { value: 1080, reference: BreakpointsReference.WindowSize }, // lg
    { value: 1440, reference: BreakpointsReference.WindowSize }, // xl
    { value: 1920, reference: BreakpointsReference.WindowSize }  // xxl
  ]
}) {
  // 景点卡片内容
}

这样配置后，我们可以更精确地控制不同屏幕宽度下的列数：

• 320px以下：1列
• 320px-600px：1列
• 600px-840px：2列
• 840px-1080px：2列
• 1080px-1440px：3列
• 1440px-1920px：4列
• 1920px以上：6列

2.2 使用GridCol的span属性实现特色景点

我们可以使用GridCol的span属性，为特色景点创建更大的卡片：

ForEach(this.spots, (spot: SpotType, index: number) => {
  GridCol({
    span: index === 0 ? { xs: 1, sm: 2, md: 2, lg: 2 } : { xs: 1, sm: 1, md: 1, lg: 1 },
    offset: index === 1 && index < 3 ? { md: 0, lg: 1 } : { md: 0, lg: 0 }
  }) {
    this.SpotCard(spot)
  }
})

这样配置后，第一个景点（索引为0）的卡片在小屏幕及以上尺寸会占据2列，其他景点卡片占据1列，形成突出特色景点的效果。同时，我们还使用offset属性在大屏幕上为第二个景点添加了偏移，使布局更加平衡。

3. 景点卡片优化

3.1 添加阴影和悬浮效果

为景点卡片添加阴影和悬浮效果，提升用户体验：

Column() {
  // 景点卡片内容
}
.width('100%')
.backgroundColor(Color.White)
.borderRadius(8)
.shadow({
  radius: 6,
  color: '#1A000000',
  offsetX: 0,
  offsetY: 2
})
.stateStyles({
  pressed: {
    scale: { x: 0.98, y: 0.98 },
    opacity: 0.9,
    translate: { x: 0, y: 2 }
  },
  normal: {
    scale: { x: 1, y: 1 },
    opacity: 1,
    translate: { x: 0, y: 0 }
  }
})
.animation({
  duration: 200,
  curve: Curve.EaseOut
})

这段代码为景点卡片添加了以下效果：

• 白色背景和圆角
• 轻微的阴影效果
• 按下时的缩放和位移动画

3.2 添加景点热度指标

为景点卡片添加热度指标，显示更多信息：

// 在景点图片上添加热度指标
Stack() {
  Image(spot.image)
    .width('100%')
    .height(160)
    .borderRadius({ topLeft: 8, topRight: 8 })
    .objectFit(ImageFit.Cover)
  
  // 价格标签
  Text(spot.price === 0 ? '免费' : `¥${spot.price}`)
    .fontSize(12)
    .fontColor(Color.White)
    .backgroundColor(spot.price === 0 ? '#4CAF50' : '#FF5722')
    .borderRadius(4)
    .padding({ left: 6, right: 6, top: 2, bottom: 2 })
    .position({ x: 8, y: 8 })
  
  // 热度指标
  if (spot.popularity > 8) {
    Row() {
      Image($r('app.media.ic_hot'))
        .width(16)
        .height(16)
        .margin({ right: 4 })
      
      Text('热门景点')
        .fontSize(12)
        .fontColor(Color.White)
    }
    .padding({ left: 8, right: 8, top: 4, bottom: 4 })
    .backgroundColor('#FF5722AA')
    .borderRadius({ bottomLeft: 8, topRight: 8 })
    .position({ x: 0, y: 0 })
  }
  
  // 世界遗产标识
  if (spot.tags.includes('世界遗产')) {
    Row() {
      Image($r('app.media.ic_world_heritage'))
        .width(16)
        .height(16)
        .margin({ right: 4 })
      
      Text('世界遗产')
        .fontSize(12)
        .fontColor(Color.White)
    }
    .padding({ left: 8, right: 8, top: 4, bottom: 4 })
    .backgroundColor('#1976D2AA')
    .borderRadius(4)
    .position({ x: 8, y: 40 })
  }
}

这段代码在景点图片上添加了热度指标和世界遗产标识，使用户能够更快地识别热门景点和世界遗产。

3.3 添加景点推荐理由

在景点卡片中添加推荐理由，提供更多信息：

// 在景点信息中添加推荐理由
Column() {
  // 景点名称和评分
  // ...
  
  // 景点位置
  // ...
  
  // 景点标签
  // ...
  
  // 推荐理由
  if (spot.recommendReason) {
    Row() {
      Text('推荐理由：')
        .fontSize(12)
        .fontColor('#666666')
        .fontWeight(FontWeight.Bold)
      
      Text(spot.recommendReason)
        .fontSize(12)
        .fontColor('#666666')
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }
    .width('100%')
    .margin({ top: 8 })
  }
}

这段代码在景点卡片中添加了推荐理由，使用户能够了解为什么这个景点值得一游。

4. 景点详情页实现

4.1 添加状态变量和点击事件

首先，添加状态变量和点击事件处理：

@State showDetail: boolean = false;
@State currentSpot: SpotType | null = null;

// 在景点卡片上添加点击事件
Column() {
  // 景点卡片内容
}
.onClick(() => {
  this.currentSpot = spot;
  this.showDetail = true;
})

4.2 实现景点详情页

build() {
  Stack() {
    Column() {
      // 原有的旅游景点网格布局
    }
    
    if (this.showDetail && this.currentSpot) {
      this.SpotDetailPage()
    }
  }
  .width('100%')
  .height('100%')
}

@Builder
private SpotDetailPage() {
  Column() {
    // 顶部图片和导航栏
    Stack() {
      // 景点大图
      Image(this.currentSpot.image)
        .width('100%')
        .height(280)
        .objectFit(ImageFit.Cover)
      
      // 渐变遮罩
      Column()
        .width('100%')
        .height(280)
        .backgroundImage({
          source: $r('app.media.gradient_overlay'),
          repeat: ImageRepeat.NoRepeat
        })
      
      // 顶部导航栏
      Row() {
        Image($r('app.media.ic_back_white'))
          .width(24)
          .height(24)
          .onClick(() => {
            this.showDetail = false;
          })
        
        Blank()
        
        Row() {
          Image($r('app.media.ic_share'))
            .width(24)
            .height(24)
            .margin({ right: 16 })
          
          Image($r('app.media.ic_favorite'))
            .width(24)
            .height(24)
            .fillColor(this.isSpotFavorite(this.currentSpot.id) ? '#FF5722' : Color.White)
            .onClick(() => {
              this.toggleFavorite(this.currentSpot.id);
            })
        }
      }
      .width('100%')
      .padding({ left: 16, right: 16, top: 16 })
      .position({ x: 0, y: 0 })
      
      // 景点名称和基本信息
      Column() {
        Text(this.currentSpot.name)
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.White)
        
        Row() {
          Image($r('app.media.ic_location_white'))
            .width(16)
            .height(16)
            .margin({ right: 4 })
          
          Text(this.currentSpot.location)
            .fontSize(14)
            .fontColor(Color.White)
            .opacity(0.9)
          
          Blank()
          
          Row() {
            Image($r('app.media.ic_star'))
              .width(16)
              .height(16)
              .margin({ right: 4 })
            
            Text(this.currentSpot.rating.toString())
              .fontSize(14)
              .fontColor('#FFB300')
          }
        }
        .width('100%')
        .margin({ top: 8 })
        
        // 标签
        Row() {
          ForEach(this.currentSpot.tags, (tag: string) => {
            Text(tag)
              .fontSize(12)
              .fontColor(Color.White)
              .backgroundColor('#FFFFFF33')
              .borderRadius(4)
              .padding({ left: 6, right: 6, top: 2, bottom: 2 })
              .margin({ right: 8, top: 8 })
          })
        }
        .width('100%')
        .flexWrap(FlexWrap.Wrap)
      }
      .width('100%')
      .padding(16)
      .position({ x: 0, y: '60%' })
    }
    .width('100%')
    .height(280)
    
    // 景点详情内容
    Scroll() {
      Column() {
        // 价格和开放时间
        Row() {
          Column() {
            Text('门票价格')
              .fontSize(14)
              .fontColor('#666666')
            
            Text(this.currentSpot.price === 0 ? '免费' : `¥${this.currentSpot.price}`)
              .fontSize(18)
              .fontWeight(FontWeight.Bold)
              .fontColor(this.currentSpot.price === 0 ? '#4CAF50' : '#FF5722')
              .margin({ top: 4 })
          }
          .alignItems(HorizontalAlign.Center)
          .layoutWeight(1)
          
          Divider()
            .vertical(true)
            .height(40)
            .color('#EEEEEE')
          
          Column() {
            Text('开放时间')
              .fontSize(14)
              .fontColor('#666666')
            
            Text(this.getOpeningHours(this.currentSpot.id))
              .fontSize(18)
              .fontWeight(FontWeight.Bold)
              .fontColor('#333333')
              .margin({ top: 4 })
          }
          .alignItems(HorizontalAlign.Center)
          .layoutWeight(1)
          
          Divider()
            .vertical(true)
            .height(40)
            .color('#EEEEEE')
          
          Column() {
            Text('建议游玩')
              .fontSize(14)
              .fontColor('#666666')
            
            Text(this.getSuggestedDuration(this.currentSpot.id))
              .fontSize(18)
              .fontWeight(FontWeight.Bold)
              .fontColor('#333333')
              .margin({ top: 4 })
          }
          .alignItems(HorizontalAlign.Center)
          .layoutWeight(1)
        }
        .width('100%')
        .padding({ top: 16, bottom: 16 })
        .backgroundColor(Color.White)
        .borderRadius(8)
        .margin({ bottom: 12 })
        
        // 景点介绍
        Column() {
          Text('景点介绍')
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
            .fontColor('#333333')
            .margin({ bottom: 12 })
          
          Text(this.currentSpot.description)
            .fontSize(14)
            .fontColor('#666666')
            .lineHeight(24)
        }
        .width('100%')
        .padding(16)
        .backgroundColor(Color.White)
        .borderRadius(8)
        .margin({ bottom: 12 })
        
        // 交通信息
        Column() {
          Text('交通信息')
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
            .fontColor('#333333')
            .margin({ bottom: 12 })
          
          Text(this.getTransportInfo(this.currentSpot.id))
            .fontSize(14)
            .fontColor('#666666')
            .lineHeight(24)
        }
        .width('100%')
        .padding(16)
        .backgroundColor(Color.White)
        .borderRadius(8)
        .margin({ bottom: 12 })
        
        // 周边景点推荐
        Column() {
          Text('周边景点推荐')
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
            .fontColor('#333333')
            .margin({ bottom: 12 })
          
          // 使用GridRow和GridCol实现周边景点网格
          GridRow({
            columns: { xs: 2, sm: 3, md: 4, lg: 4 },
            gutter: { x: 12, y: 12 }
          }) {
            ForEach(this.getNearbySpots(this.currentSpot.id), (spot: SpotType) => {
              GridCol() {
                this.NearbySpotCard(spot)
              }
            })
          }
          .width('100%')
        }
        .width('100%')
        .padding(16)
        .backgroundColor(Color.White)
        .borderRadius(8)
        .margin({ bottom: 12 })
        
        // 用户评价
        Column() {
          Row() {
            Text('用户评价')
              .fontSize(18)
              .fontWeight(FontWeight.Bold)
              .fontColor('#333333')
            
            Blank()
            
            Text(`${this.getReviewCount(this.currentSpot.id)}条评价 >`)
              .fontSize(14)
              .fontColor('#1976D2')
          }
          .width('100%')
          .margin({ bottom: 12 })
          
          // 用户评价列表
          ForEach(this.getTopReviews(this.currentSpot.id), (review: ReviewType) => {
            this.ReviewItem(review)
          })
        }
        .width('100%')
        .padding(16)
        .backgroundColor(Color.White)
        .borderRadius(8)
        .margin({ bottom: 24 })
      }
      .width('100%')
      .padding({ left: 16, right: 16 })
    }
    .scrollBar(BarState.Off)
    .scrollable(ScrollDirection.Vertical)
    .width('100%')
    .layoutWeight(1)
    .backgroundColor('#F5F5F5')
    
    // 底部操作栏
    Row() {
      Button('查看地图')
        .width('48%')
        .height(40)
        .fontSize(16)
        .fontColor('#1976D2')
        .backgroundColor('#E3F2FD')
        .borderRadius(20)
      
      Button('立即预订')
        .width('48%')
        .height(40)
        .fontSize(16)
        .fontColor(Color.White)
        .backgroundColor('#FF5722')
        .borderRadius(20)
    }
    .width('100%')
    .padding({ left: 16, right: 16, top: 12, bottom: 12 })
    .backgroundColor(Color.White)
    .justifyContent(FlexAlign.SpaceBetween)
  }
  .width('100%')
  .height('100%')
}

这段代码实现了一个完整的景点详情页，包括：

• 顶部大图和导航栏，带有返回按钮、分享按钮和收藏按钮
• 景点名称、位置、评分和标签
• 价格、开放时间和建议游玩时间
• 景点介绍、交通信息
• 周边景点推荐，使用GridRow和GridCol实现
• 用户评价
• 底部操作栏，包含查看地图和立即预订按钮

4.3 周边景点卡片实现

@Builder
private NearbySpotCard(spot: SpotType) {
  Column() {
    Image(spot.image)
      .width('100%')
      .aspectRatio(1)
      .borderRadius(8)
      .objectFit(ImageFit.Cover)
    
    Text(spot.name)
      .fontSize(14)
      .fontWeight(FontWeight.Medium)
      .fontColor('#333333')
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .margin({ top: 8 })
    
    Row() {
      Image($r('app.media.ic_star'))
        .width(12)
        .height(12)
        .margin({ right: 4 })
      
      Text(spot.rating.toString())
        .fontSize(12)
        .fontColor('#FFB300')
      
      Text(` · ${spot.price === 0 ? '免费' : `¥${spot.price}`}`)
        .fontSize(12)
        .fontColor(spot.price === 0 ? '#4CAF50' : '#FF5722')
    }
    .margin({ top: 4 })
  }
  .width('100%')
  .onClick(() => {
    this.currentSpot = spot;
  })
}

4.4 用户评价项实现

// 评价类型定义
interface ReviewType {
  id: number;
  userName: string;
  avatar: Resource;
  rating: number;
  content: string;
  date: string;
}

@Builder
private ReviewItem(review: ReviewType) {
  Column() {
    Row() {
      Image(review.avatar)
        .width(40)
        .height(40)
        .borderRadius(20)
      
      Column() {
        Text(review.userName)
          .fontSize(14)
          .fontWeight(FontWeight.Medium)
          .fontColor('#333333')
        
        Row() {
          ForEach([1, 2, 3, 4, 5], (i: number) => {
            Image(i <= review.rating ? $r('app.media.ic_star_filled') : $r('app.media.ic_star_outline'))
              .width(12)
              .height(12)
              .margin({ right: 2 })
          })
          
          Text(review.date)
            .fontSize(12)
            .fontColor('#999999')
            .margin({ left: 8 })
        }
        .margin({ top: 4 })
      }
      .alignItems(HorizontalAlign.Start)
      .margin({ left: 12 })
      .layoutWeight(1)
    }
    .width('100%')
    
    Text(review.content)
      .fontSize(14)
      .fontColor('#666666')
      .lineHeight(22)
      .margin({ top: 8, bottom: 16 })
  }
  .width('100%')
}

4.5 辅助方法实现

// 判断景点是否已收藏
private isSpotFavorite(spotId: number): boolean {
  // 模拟数据，实际应用中应该从本地存储或服务器获取
  return this.favoriteSpots.includes(spotId);
}

// 切换收藏状态
private toggleFavorite(spotId: number): void {
  if (this.favoriteSpots.includes(spotId)) {
    this.favoriteSpots = this.favoriteSpots.filter(id => id !== spotId);
  } else {
    this.favoriteSpots.push(spotId);
  }
}

// 获取开放时间
private getOpeningHours(spotId: number): string {
  // 模拟数据，实际应用中应该从服务器获取
  const openingHours = {
    1: '8:00-17:00',
    2: '全天开放',
    3: '8:30-17:00',
    4: '7:30-16:30',
    5: '8:00-17:30',
    6: '8:00-18:00',
    7: '全天开放',
    8: '8:00-18:00'
  };
  return openingHours[spotId] || '暂无信息';
}

// 获取建议游玩时间
private getSuggestedDuration(spotId: number): string {
  // 模拟数据，实际应用中应该从服务器获取
  const durations = {
    1: '1-2天',
    2: '半天',
    3: '3-4小时',
    4: '1-2天',
    5: '1-2天',
    6: '1-2天',
    7: '1天',
    8: '半天'
  };
  return durations[spotId] || '暂无信息';
}

// 获取交通信息
private getTransportInfo(spotId: number): string {
  // 模拟数据，实际应用中应该从服务器获取
  const transportInfo = {
    1: '1. 公交：乘坐877路、879路等公交车到达八达岭长城站。\n2. 火车：从北京北站乘坐S2线到达八达岭站。\n3. 自驾：沿京藏高速公路行驶，在八达岭出口下高速。',
    2: '1. 公交：乘坐游1路、游2路等公交车环湖游览。\n2. 地铁：乘坐地铁1号线到龙翔桥站或地铁2号线到龙翔桥站。\n3. 自驾：导航至杭州西湖景区停车场。',
    3: '1. 地铁：乘坐地铁1号线或2号线到天安门东站或天安门西站。\n2. 公交：乘坐1路、2路、52路等公交车到天安门站。\n3. 自驾：导航至故宫博物院停车场。',
    4: '1. 火车：乘坐火车到达黄山北站或黄山站。\n2. 汽车：从黄山市区乘坐公交车到达汤口镇，再换乘景区交通车。\n3. 自驾：导航至黄山风景区游客中心。',
    5: '1. 飞机：乘坐飞机到达张家界荷花机场。\n2. 火车：乘坐火车到达张家界站。\n3. 汽车：从张家界市区乘坐公交车到达景区门口。',
    6: '1. 飞机：乘坐飞机到达九黄机场。\n2. 汽车：从成都、绵阳等地乘坐长途汽车到达九寨沟。\n3. 自驾：沿G213国道行驶到达九寨沟。',
    7: '1. 飞机：乘坐飞机到达丽江三义机场。\n2. 火车：乘坐火车到达丽江站。\n3. 汽车：从丽江站乘坐公交车到达古城区。',
    8: '1. 轮渡：从厦门轮渡码头乘坐轮渡到达鼓浪屿。\n2. 地铁：乘坐地铁1号线到达轮渡站。\n3. 公交：乘坐公交车到达轮渡站。'
  };
  return transportInfo[spotId] || '暂无交通信息';
}

// 获取周边景点
private getNearbySpots(spotId: number): SpotType[] {
  // 模拟数据，实际应用中应该从服务器获取
  // 简单实现：返回除当前景点外的其他景点（最多4个）
  return this.spots.filter(spot => spot.id !== spotId).slice(0, 4);
}

// 获取评价数量
private getReviewCount(spotId: number): number {
  // 模拟数据，实际应用中应该从服务器获取
  const reviewCounts = {
    1: 2358,
    2: 3421,
    3: 5642,
    4: 1987,
    5: 2145,
    6: 1876,
    7: 2543,
    8: 1432
  };
  return reviewCounts[spotId] || 0;
}

// 获取热门评价
private getTopReviews(spotId: number): ReviewType[] {
  // 模拟数据，实际应用中应该从服务器获取
  const reviews: { [key: number]: ReviewType[] } = {
    1: [
      { id: 1, userName: '旅行者A', avatar: $r('app.media.avatar1'), rating: 5, content: '长城真的太壮观了，站在上面俯瞰群山，感觉非常震撼。建议穿舒适的鞋子，带足水，因为爬长城还是比较累的。', date: '2023-07-15' },
      { id: 2, userName: '旅行者B', avatar: $r('app.media.avatar2'), rating: 4, content: '八达岭长城是最受欢迎的长城段落，人比较多，但设施完善，适合带老人和孩子。秋天来的话，可以看到漂亮的红叶。', date: '2023-06-22' }
    ],
    2: [
      { id: 3, userName: '旅行者C', avatar: $r('app.media.avatar3'), rating: 5, content: '西湖真的名不虚传，湖光山色，美不胜收。建议租自行车环湖一圈，可以欣赏到不同角度的西湖美景。', date: '2023-08-05' },
      { id: 4, userName: '旅行者D', avatar: $r('app.media.avatar4'), rating: 5, content: '断桥残雪、平湖秋月、三潭印月等景点都很美，建议安排一整天的时间慢慢游览。', date: '2023-07-28' }
    ],
    // 其他景点的评价...
  };
  return reviews[spotId] || [];
}

这些辅助方法提供了景点详情页所需的各种数据，包括开放时间、建议游玩时间、交通信息、周边景点、评价数量和热门评价。在实际应用中，这些数据应该从服务器获取。

5. 景点筛选和排序功能

5.1 添加筛选选项

// 筛选选项状态变量
@State filterOptions: {
  locations: string[];
  tags: string[];
  minRating: number;
  maxPrice: number;
  sortBy: string;
} = {
  locations: [],
  tags: [],
  minRating: 0,
  maxPrice: 1000,
  sortBy: 'default'
};

@State showFilter: boolean = false;

// 筛选面板构建器
@Builder
private FilterPanel() {
  Column() {
    // 标题
    Row() {
      Text('筛选')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
      
      Blank()
      
      Button('重置')
        .backgroundColor('transparent')
        .fontColor('#666666')
        .fontSize(14)
        .onClick(() => {
          this.resetFilter();
        })
    }
    .width('100%')
    .padding({ top: 16, bottom: 16 })
    
    // 地区筛选
    Text('地区')
      .fontSize(16)
      .fontWeight(FontWeight.Medium)
      .margin({ bottom: 12 })
    
    Flex({ wrap: FlexWrap.Wrap }) {
      ForEach(['北京', '杭州', '安徽', '湖南', '四川', '云南', '厦门'], (location: string) => {
        Text(location)
          .fontSize(14)
          .fontColor(this.filterOptions.locations.includes(location) ? Color.White : '#666666')
          .backgroundColor(this.filterOptions.locations.includes(location) ? '#1976D2' : '#F5F5F5')
          .borderRadius(16)
          .padding({ left: 12, right: 12, top: 6, bottom: 6 })
          .margin({ right: 8, bottom: 8 })
          .onClick(() => {
            if (this.filterOptions.locations.includes(location)) {
              this.filterOptions.locations = this.filterOptions.locations.filter(l => l !== location);
            } else {
              this.filterOptions.locations.push(location);
            }
          })
      })
    }
    .margin({ bottom: 16 })
    
    // 标签筛选
    Text('标签')
      .fontSize(16)
      .fontWeight(FontWeight.Medium)
      .margin({ bottom: 12 })
    
    Flex({ wrap: FlexWrap.Wrap }) {
      ForEach(['历史', '文化', '自然', '风景', '世界遗产', '古镇', '海岛'], (tag: string) => {
        Text(tag)
          .fontSize(14)
          .fontColor(this.filterOptions.tags.includes(tag) ? Color.White : '#666666')
          .backgroundColor(this.filterOptions.tags.includes(tag) ? '#1976D2' : '#F5F5F5')
          .borderRadius(16)
          .padding({ left: 12, right: 12, top: 6, bottom: 6 })
          .margin({ right: 8, bottom: 8 })
          .onClick(() => {
            if (this.filterOptions.tags.includes(tag)) {
              this.filterOptions.tags = this.filterOptions.tags.filter(t => t !== tag);
            } else {
              this.filterOptions.tags.push(tag);
            }
          })
      })
    }
    .margin({ bottom: 16 })
    
    // 最低评分筛选
    Text('最低评分')
      .fontSize(16)
      .fontWeight(FontWeight.Medium)
      .margin({ bottom: 12 })
    
    Row() {
      Slider({
        min: 0,
        max: 5,
        step: 0.5,
        value: this.filterOptions.minRating
      })
        .blockColor('#1976D2')
        .trackColor('#E0E0E0')
        .selectedColor('#64B5F6')
        .showSteps(true)
        .showTips(true)
        .onChange((value: number) => {
          this.filterOptions.minRating = value;
        })
        .layoutWeight(1)
      
      Text(this.filterOptions.minRating.toFixed(1))
        .fontSize(16)
        .fontColor('#1976D2')
        .margin({ left: 16 })
    }
    .width('100%')
    .margin({ bottom: 16 })
    
    // 最高价格筛选
    Text('最高价格')
      .fontSize(16)
      .fontWeight(FontWeight.Medium)
      .margin({ bottom: 12 })
    
    Row() {
      Slider({
        min: 0,
        max: 500,
        step: 50,
        value: this.filterOptions.maxPrice
      })
        .blockColor('#1976D2')
        .trackColor('#E0E0E0')
        .selectedColor('#64B5F6')
        .showSteps(true)
        .showTips(true)
        .onChange((value: number) => {
          this.filterOptions.maxPrice = value;
        })
        .layoutWeight(1)
      
      Text(`¥${this.filterOptions.maxPrice}`)
        .fontSize(16)
        .fontColor('#1976D2')
        .margin({ left: 16 })
    }
    .width('100%')
    .margin({ bottom: 16 })
    
    // 排序方式
    Text('排序方式')
      .fontSize(16)
      .fontWeight(FontWeight.Medium)
      .margin({ bottom: 12 })
    
    Column() {
      this.SortOption('默认排序', 'default')
      this.SortOption('评分从高到低', 'rating-desc')
      this.SortOption('价格从低到高', 'price-asc')
      this.SortOption('价格从高到低', 'price-desc')
    }
    .margin({ bottom: 16 })
    
    // 底部按钮
    Row() {
      Button('取消')
        .width('48%')
        .height(40)
        .backgroundColor('#F5F5F5')
        .fontColor('#666666')
        .borderRadius(20)
        .onClick(() => {
          this.showFilter = false;
        })
      
      Button('确定')
        .width('48%')
        .height(40)
        .backgroundColor('#1976D2')
        .fontColor(Color.White)
        .borderRadius(20)
        .onClick(() => {
          this.applyFilter();
          this.showFilter = false;
        })
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
  .width('100%')
  .padding(16)
  .backgroundColor(Color.White)
  .borderRadius({ topLeft: 16, topRight: 16 })
}

// 排序选项构建器
@Builder
private SortOption(text: string, value: string) {
  Row() {
    Text(text)
      .fontSize(14)
      .fontColor('#666666')
    
    Blank()
    
    Radio({ value: value, group: 'sortBy' })
      .checked(this.filterOptions.sortBy === value)
      .onChange((isChecked: boolean) => {
        if (isChecked) {
          this.filterOptions.sortBy = value;
        }
      })
  }
  .width('100%')
  .height(40)
  .padding({ left: 8, right: 8 })
  .borderRadius(4)
  .backgroundColor(this.filterOptions.sortBy === value ? '#E3F2FD' : 'transparent')
  .margin({ bottom: 8 })
}

// 重置筛选选项
private resetFilter(): void {
  this.filterOptions = {
    locations: [],
    tags: [],
    minRating: 0,
    maxPrice: 1000,
    sortBy: 'default'
  };
}

// 应用筛选
private applyFilter(): void {
  // 筛选逻辑在getFilteredSpots方法中实现
}

// 获取筛选后的景点列表
private getFilteredSpots(): SpotType[] {
  let filtered = this.spots;
  
  // 按地区筛选
  if (this.filterOptions.locations.length > 0) {
    filtered = filtered.filter(spot => this.filterOptions.locations.includes(spot.location));
  }
  
  // 按标签筛选
  if (this.filterOptions.tags.length > 0) {
    filtered = filtered.filter(spot => spot.tags.some(tag => this.filterOptions.tags.includes(tag)));
  }
  
  // 按评分筛选
  if (this.filterOptions.minRating > 0) {
    filtered = filtered.filter(spot => spot.rating >= this.filterOptions.minRating);
  }
  
  // 按价格筛选
  if (this.filterOptions.maxPrice < 1000) {
    filtered = filtered.filter(spot => spot.price <= this.filterOptions.maxPrice);
  }
  
  // 排序
  switch (this.filterOptions.sortBy) {
    case 'rating-desc':
      filtered.sort((a, b) => b.rating - a.rating);
      break;
    case 'price-asc':
      filtered.sort((a, b) => a.price - b.price);
      break;
    case 'price-desc':
      filtered.sort((a, b) => b.price - a.price);
      break;
    default:
      // 默认排序，保持原顺序
      break;
  }
  
  return filtered;
}

这段代码实现了景点筛选和排序功能，包括：

• 地区筛选：用户可以选择一个或多个地区
• 标签筛选：用户可以选择一个或多个标签
• 最低评分筛选：用户可以设置最低评分要求
• 最高价格筛选：用户可以设置最高价格要求
• 排序方式：用户可以选择默认排序、评分从高到低、价格从低到高或价格从高到低

6. 收藏和分享功能

6.1 收藏功能实现

// 收藏景点ID列表
@State favoriteSpots: number[] = [];

// 收藏按钮构建器
@Builder
private FavoriteButton(spotId: number) {
  Image(this.isSpotFavorite(spotId) ? $r('app.media.ic_favorite_filled') : $r('app.media.ic_favorite_outline'))
    .width(24)
    .height(24)
    .fillColor(this.isSpotFavorite(spotId) ? '#FF5722' : '#666666')
    .onClick(() => {
      this.toggleFavorite(spotId);
      if (this.isSpotFavorite(spotId)) {
        this.showToast('已添加到收藏');
      } else {
        this.showToast('已取消收藏');
      }
    })
}

// 显示提示信息
private showToast(message: string): void {
  // 实际应用中应该使用Toast组件
  AlertDialog.show({
    message: message,
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 3,
    cancel: () => {
      // 取消回调
    }
  });
}

6.2 分享功能实现

// 分享按钮构建器
@Builder
private ShareButton(spot: SpotType) {
  Image($r('app.media.ic_share'))
    .width(24)
    .height(24)
    .onClick(() => {
      this.shareSpot(spot);
    })
}

// 分享景点
private shareSpot(spot: SpotType): void {
  // 实际应用中应该调用系统分享API
  AlertDialog.show({
    title: '分享',
    message: `分享景点：${spot.name}\n位置：${spot.location}\n评分：${spot.rating}`,
    primaryButton: {
      value: '确定',
      action: () => {
        console.info('用户确认分享');
      }
    },
    secondaryButton: {
      value: '取消',
      action: () => {
        console.info('用户取消分享');
      }
    }
  });
}

7. 高级动效和交互优化

7.1 下拉刷新功能

@State refreshing: boolean = false;

// 在SpotGrid方法中添加下拉刷新
@Builder
private SpotGrid() {
  Refresh({
    refreshing: this.refreshing,
    offset: 120,
    friction: 100
  }) {
    Scroll() {
      // 原有的景点网格内容
    }
    .scrollBar(BarState.Off)
    .scrollable(ScrollDirection.Vertical)
    .width('100%')
    .layoutWeight(1)
  }
  .onRefreshing(() => {
    // 模拟刷新数据
    setTimeout(() => {
      // 随机调整景点顺序，模拟刷新效果
      this.spots = this.shuffleArray([...this.spots]);
      this.refreshing = false;
      this.showToast('刷新成功');
    }, 2000);
  })
}

// 随机打乱数组
private shuffleArray<T>(array: T[]): T[] {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

7.2 景点卡片动画效果

@Builder
private SpotCard(spot: SpotType) {
  Column() {
    // 景点卡片内容
  }
  .width('100%')
  .backgroundColor(Color.White)
  .borderRadius(8)
  .shadow({
    radius: 6,
    color: '#1A000000',
    offsetX: 0,
    offsetY: 2
  })
  .stateStyles({
    pressed: {
      scale: { x: 0.98, y: 0.98 },
      opacity: 0.9,
      translate: { x: 0, y: 2 }
    },
    normal: {
      scale: { x: 1, y: 1 },
      opacity: 1,
      translate: { x: 0, y: 0 }
    }
  })
  .animation({
    duration: 200,
    curve: Curve.EaseOut
  })
  .gesture(
    LongPressGesture()
      .onAction(() => {
        this.showSpotActions(spot);
      })
  )
}

// 显示景点操作菜单
private showSpotActions(spot: SpotType): void {
  ActionSheet.show({
    title: spot.name,
    message: spot.description,
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -10 },
    sheets: [
      {
        title: '查看详情',
        action: () => {
          this.currentSpot = spot;
          this.showDetail = true;
        }
      },
      {
        title: this.isSpotFavorite(spot.id) ? '取消收藏' : '添加收藏',
        action: () => {
          this.toggleFavorite(spot.id);
          if (this.isSpotFavorite(spot.id)) {
            this.showToast('已添加到收藏');
          } else {
            this.showToast('已取消收藏');
          }
        }
      },
      {
        title: '分享',
        action: () => {
          this.shareSpot(spot);
        }
      }
    ]
  });
}

7.3 景点详情页过渡动画

// 在build方法中添加过渡动画
build() {
  Stack() {
    Column() {
      // 原有的旅游景点网格布局
    }
    
    if (this.showDetail && this.currentSpot) {
      this.SpotDetailPage()
        .transition({
          type: TransitionType.Push,
          direction: TransitionDirection.Left
        })
    }
  }
  .width('100%')
  .height('100%')
}

8. 完整代码

由于完整代码较长，这里只展示了部分关键代码。完整代码包含了本教程中介绍的所有功能，包括响应式布局优化、景点卡片优化、景点详情页实现、景点筛选和排序功能、收藏和分享功能、高级动效和交互优化等。

9. 总结

本教程详细讲解了如何优化旅游景点网格布局，添加交互功能，以及实现更多高级特性。通过使用HarmonyOS NEXT的GridRow和GridCol组件的高级特性，我们实现了响应式布局，使应用能够适应不同屏幕尺寸的设备。同时，我们还添加了景点卡片优化、景点详情页、景点筛选和排序功能、收藏和分享功能、高级动效和交互优化等功能，打造了一个功能完善的旅游景点应用。