前言

精选作品展示是内容平台首页的重要组成部分，用于展示编辑推荐或算法推荐的优质内容。它通常采用横向滚动的卡片列表形式，让用户可以快速浏览多个精选内容。本文将详细介绍如何在Flutter和OpenHarmony平台上实现一个视觉精美的精选作品展示组件。

精选作品的展示需要突出作品的视觉效果，同时提供足够的信息帮助用户决定是否点击查看详情。

Flutter精选作品实现

作品数据定义

定义精选作品的数据结构。

class FeaturedArtworksSection extends StatelessWidget {
  const FeaturedArtworksSection({super.key});

  @override
  Widget build(BuildContext context) {
    final artworks = [
      {'title': '春日牡丹', 'author': '王淑英', 'likes': '3.2K'},
      {'title': '江南水乡', 'author': '李雪芬', 'likes': '2.8K'},
      {'title': '锦绣山河', 'author': '陈美华', 'likes': '2.5K'},
      {'title': '百鸟朝凤', 'author': '张秀兰', 'likes': '2.1K'},
    ];

精选作品包含标题、作者和点赞数。这些数据通常来自后端的推荐算法。

横向滚动列表

使用SizedBox和ListView实现横向滚动。

    return SizedBox(
      height: 200,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.symmetric(horizontal: 16),
        itemCount: artworks.length,
        itemBuilder: (context, index) {
          final artwork = artworks[index];
          return Container(
            width: 150,
            margin: EdgeInsets.only(right: index < artworks.length - 1 ? 12 : 0),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12),
              boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.1), blurRadius: 8)],
            ),

scrollDirection设为Axis.horizontal实现横向滚动。ListView.builder懒加载提升性能。固定宽度150确保卡片大小一致。

作品卡片内容

卡片包含图片区域和信息区域。

            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  flex: 3,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.grey[200],
                      borderRadius: const BorderRadius.vertical(top: Radius.circular(12)),
                    ),
                    child: Stack(
                      children: [
                        const Center(child: Icon(Icons.image, size: 40, color: Colors.grey)),
                        Positioned(
                          top: 8,
                          left: 8,
                          child: Container(
                            padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                            decoration: BoxDecoration(
                              color: const Color(0xFF8B4513),
                              borderRadius: BorderRadius.circular(4),
                            ),
                            child: const Text('精选', style: TextStyle(fontSize: 10, color: Colors.white)),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Padding(
                    padding: const EdgeInsets.all(10),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(artwork['title']!, style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold), maxLines: 1, overflow: TextOverflow.ellipsis),
                        Text(artwork['author']!, style: TextStyle(fontSize: 11, color: Colors.grey[600])),
                        Row(
                          children: [
                            Icon(Icons.favorite, size: 12, color: Colors.red[300]),
                            const SizedBox(width: 4),
                            Text(artwork['likes']!, style: TextStyle(fontSize: 11, color: Colors.grey[500])),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

Stack在图片上叠加"精选"标签。Expanded按比例分配图片和信息区域。点赞数使用红色心形图标增强视觉效果。

OpenHarmony鸿蒙实现

组件与数据定义

鸿蒙平台定义作品数据接口。

interface ArtworkItem {
  title: string
  author: string
  likes: string
}

@Component
struct FeaturedArtworksComponent {
  private artworks: Array<ArtworkItem> = [
    { title: '春日牡丹', author: '王淑英', likes: '3.2K' },
    { title: '江南水乡', author: '李雪芬', likes: '2.8K' },
    { title: '锦绣山河', author: '陈美华', likes: '2.5K' },
    { title: '百鸟朝凤', author: '张秀兰', likes: '2.1K' }
  ]

横向滚动实现

使用Scroll和Row实现横向滚动。

  build() {
    Scroll() {
      Row() {
        ForEach(this.artworks, (item: ArtworkItem, index: number) => {
          Column() {
            Stack() {
              Image($r('app.media.artwork_placeholder'))
                .width('100%')
                .height(110)
                .objectFit(ImageFit.Cover)
                .borderRadius({ topLeft: 12, topRight: 12 })
              
              Text('精选')
                .fontSize(10)
                .fontColor(Color.White)
                .backgroundColor('#8B4513')
                .borderRadius(4)
                .padding({ left: 6, right: 6, top: 2, bottom: 2 })
                .position({ x: 8, y: 8 })
            }
            .width('100%')
            .height(110)
            .backgroundColor('#F0F0F0')
            
            Column() {
              Text(item.title)
                .fontSize(13)
                .fontWeight(FontWeight.Bold)
                .fontColor('#333333')
                .maxLines(1)
                .textOverflow({ overflow: TextOverflow.Ellipsis })
                .width('100%')
              Text(item.author)
                .fontSize(11)
                .fontColor('#666666')
                .margin({ top: 4 })
                .width('100%')
              Row() {
                Image($r('app.media.heart_filled'))
                  .width(12)
                  .height(12)
                  .fillColor('#EF9A9A')
                Text(item.likes)
                  .fontSize(11)
                  .fontColor('#999999')
                  .margin({ left: 4 })
              }
              .width('100%')
              .margin({ top: 6 })
            }
            .width('100%')
            .padding(10)
            .alignItems(HorizontalAlign.Start)
          }
          .width(150)
          .backgroundColor(Color.White)
          .borderRadius(12)
          .margin({ right: index < this.artworks.length - 1 ? 12 : 0 })
          .onClick(() => {
            router.pushUrl({ url: 'pages/ArtworkDetail', params: { title: item.title } })
          })
        })
      }
      .padding({ left: 16, right: 16 })
    }
    .scrollable(ScrollDirection.Horizontal)
    .scrollBar(BarState.Off)
    .height(200)
    .width('100%')
  }
}

Scroll组件配合scrollable(ScrollDirection.Horizontal)实现横向滚动。scrollBar(BarState.Off)隐藏滚动条。position精确定位精选标签。

性能优化

对于大量精选作品，需要考虑图片懒加载和缓存策略。Flutter可以使用cached_network_image包，鸿蒙可以使用Image组件的缓存机制。横向列表的项目数量通常不会太多，性能问题相对较小。

总结

本文介绍了Flutter和OpenHarmony平台上精选作品展示组件的实现方法。横向滚动的卡片列表是展示精选内容的经典方式，其设计需要在视觉吸引力和信息传达之间取得平衡。欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net