目录

案例介绍

在社交媒体应用中，发布功能是用户创建内容的重要入口。本案例将展示如何实现动态内容的发布功能，包括文本输入和多媒体内容选择。

代码实现

@Entry
@Component
struct SocialFeedPage {
  @State screenWidth: number = 0
  
  build() {
    Column() {
      // 发布内容输入框
      Column() {
        Flex({ alignItems: ItemAlign.Center }) {
          Image('/assets/avatar_me.jpg')
            .width(40)
            .height(40)
            .borderRadius(20)
            .margin({ right: 10 })
          
          TextInput({ placeholder: '分享你的想法...' })
            .width('85%')
            .height(40)
            .backgroundColor('#F0F0F0')
            .borderRadius(20)
            .padding({ left: 15, right: 15 })
        }
        .width('100%')
        .padding({ left: 15, right: 15, top: 10, bottom: 10 })
        
        Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
          Flex({ alignItems: ItemAlign.Center }) {
            Image('/assets/photo.png')
              .width(20)
              .height(20)
              .margin({ right: 5 })
            
            Text('图片')
              .fontSize(14)
              .fontColor('#666666')
          }
          
          Flex({ alignItems: ItemAlign.Center }) {
            Image('/assets/video.png')
              .width(20)
              .height(20)
              .margin({ right: 5 })
            
            Text('视频')
              .fontSize(14)
              .fontColor('#666666')
          }
          
          Flex({ alignItems: ItemAlign.Center }) {
            Image('/assets/location.png')
              .width(20)
              .height(20)
              .margin({ right: 5 })
            
            Text('位置')
              .fontSize(14)
              .fontColor('#666666')
          }
        }
        .width('100%')
        .padding({ left: 15, right: 15, bottom: 10 })
      }
      .width('100%')
      .backgroundColor(Color.White)
      .margin({ bottom: 10 })
      
      // 已选择的图片预览
      if (this.selectedImages.length > 0) {
        Flow() {
          ForEach(this.selectedImages, (image, index) => {
            FlowItem() {
              Stack({ alignContent: Alignment.TopEnd }) {
                Image(image)
                  .width(80)
                  .height(80)
                  .objectFit(ImageFit.Cover)
                  .borderRadius(8)
                
                Image('/assets/delete.png')
                  .width(20)
                  .height(20)
                  .margin(5)
                  .onClick(() => {
                    this.selectedImages.splice(index, 1)
                  })
              }
            }
            .margin(5)
          })
        }
        .width('100%')
        .padding(10)
        .backgroundColor(Color.White)
      }
      
      // 发布按钮
      Button('发布')
        .width('90%')
        .height(44)
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .backgroundColor('#FF6B00')
        .margin({ top: 20 })
        .onClick(() => {
          // 处理发布逻辑
          this.handlePublish()
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
  
  @State selectedImages: string[] = []
  
  // 处理发布逻辑
  private handlePublish() {
    // 验证输入内容
    if (this.content.trim() === '' && this.selectedImages.length === 0) {
      AlertDialog.show({
        title: '提示',
        message: '请输入要分享的内容或选择图片',
        confirm: {
          value: '确定',
          action: () => {}
        }
      })
      return
    }
    
    // 创建新的动态
    const newPost = {
      id: Date.now(),
      user: {
        id: 1,
        name: '我',
        avatar: '/assets/avatar_me.jpg'
      },
      content: this.content,
      images: this.selectedImages,
      time: '刚刚',
      likes: 0,
      comments: 0,
      shares: 0
    }
    
    // 添加到动态列表
    this.posts.unshift(newPost)
    
    // 清空输入
    this.content = ''
    this.selectedImages = []
    
    // 提示发布成功
    AlertDialog.show({
      title: '提示',
      message: '发布成功',
      confirm: {
        value: '确定',
        action: () => {}
      }
    })
  }
}

代码详解

发布界面实现

1. 输入框设计：

   Flex({ alignItems: ItemAlign.Center }) {
     Image('/assets/avatar_me.jpg')
     TextInput({ placeholder: '分享你的想法...' })
       .backgroundColor('#F0F0F0')
       .borderRadius(20)
   }
   

   • 显示用户头像
   • 使用TextInput组件实现输入框
   • 设置圆角和背景色

2. 功能按钮：

   Flex({ justifyContent: FlexAlign.SpaceAround }) {
     Flex({ alignItems: ItemAlign.Center }) {
       Image('/assets/photo.png')
       Text('图片')
     }
     // 视频和位置按钮
   }
   

   • 提供图片、视频、位置等功能按钮
   • 使用图标和文字组合

图片预览实现

1. 预览区域：

   if (this.selectedImages.length > 0) {
     Flow() {
       ForEach(this.selectedImages, (image, index) => {
         FlowItem() {
           Stack({ alignContent: Alignment.TopEnd }) {
             Image(image)
             Image('/assets/delete.png')
               .onClick(() => {
                 this.selectedImages.splice(index, 1)
               })
           }
         }
       })
     }
   }
   

   • 使用Flow组件展示已选图片
   • 提供删除按钮
   • 支持移除已选图片

发布逻辑实现

1. 发布验证：

   if (this.content.trim() === '' && this.selectedImages.length === 0) {
     AlertDialog.show({
       title: '提示',
       message: '请输入要分享的内容或选择图片'
     })
     return
   }
   

   • 验证是否有内容或图片
   • 使用AlertDialog提示用户

2. 创建新动态：

   const newPost = {
     id: Date.now(),
     user: {
       id: 1,
       name: '我',
       avatar: '/assets/avatar_me.jpg'
     },
     content: this.content,
     images: this.selectedImages,
     time: '刚刚',
     likes: 0,
     comments: 0,
     shares: 0
   }
   

   • 创建新的动态对象
   • 包含必要的信息和初始数据

总结

本案例展示了如何实现动态内容的发布功能。通过合理的界面设计和交互逻辑，实现了文本输入和图片选择功能。Flow组件的应用使图片预览展示更加灵活，整体功能的实现为用户提供了良好的发布体验。