上节文章我们讲了AI绘画的UI设计

这节文章我们继续绘制UI

在这节文章我们将历史记录界面加上

import { lishijilu } from './lishijilu'
import { curves } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  // 定义一个状态变量Myimage，用于存储图像资源
  @State Myimage: ResourceStr = $r('app.media.startIcon_1')
  @State isPresent: boolean = false

  /**
   * 构建组件的UI结构
   *
   * 此方法定义了组件的布局和样式，包括使用Column、Row等容器以及Text、Image等元素
   * 通过设置不同的属性和样式，如空间、对齐方式、字体大小等，来实现特定的UI效果
   */
  build() {
    //Column容器内子元素按照垂直方向排列
    Column({ space: 10 }) {
      //轮播组件，用于展示图像
      Swiper() {
        //加载资源图片
        Image($r('app.media.img'))
        Image($r('app.media.1'))
        Image($r('app.media.2'))
        Image($r('app.media.3'))
        Image($r('app.media.4'))
        Image($r('app.media.5'))
      }
      // 设置滚动视图的宽度为100%，充满父容器的宽度
      .width('100%')
      // 设置滚动视图的高度为100，单位可能是像素或其他度量单位
      .height(100)
      // 启用循环滚动，当滚动到末尾时跳转到开头，形成无限滚动效果
      .loop(true)
      // 启用自动播放功能，滚动视图会自动滚动无需用户手动操作
      .autoPlay(true)
      // 设置自动播放的间隔时间为2000毫秒，即每2秒滚动一次
      .interval(2000)
      // 设置滚动视图的边框圆角为10，增加视觉上的柔和感和流畅性
      .borderRadius(10)

      //Row容器内子元素按照水平方向排列
      Row() {
        //定义文本元素，设置其属性以实现居中显示和特定的样式
        Text("AI绘画")// 设置元素宽度为100%，使其充满父容器的宽度
          .width('100%')// 设置字体大小为50，单位默认为像素，以控制文本的大小
          .fontSize(50)// 设置字体颜色为带有透明度的蓝色，使用十六进制颜色代码
          .fontColor("#ff13b6ea")// 设置文本对齐方式为中心对齐，以控制文本在元素中的位置
          .textAlign(TextAlign.Center)
      }

      Row() {
        //显示状态变量Myimage所指向的图像
        Image(this.Myimage)
          .width(300)
      }

      // 创建一个垂直布局的列，各元素之间间距为20
      Column({ space: 20 }) {
        // 添加一个文本输入框，设置占位符文本
        TextInput({ placeholder: "请输入内容" })
          .backgroundColor("#fff") // 设置文本输入框的背景颜色为白色
        // 创建一个水平布局的行，各元素之间间距为20
        Row({ space: 20 }) {
          // 添加一个按钮，用于触发AI绘画功能
          Button() {
            Text("AI绘画")
          }
          .width("40%") // 设置按钮宽度为父容器的40%
          .height(50) // 设置按钮高度为50
          // 添加另一个按钮，用于查看历史记录
          Button() {
            Text("历史记录")
          }
          .width("40%") // 同样设置按钮宽度为父容器的40%
          .height(50) // 设置按钮高度为50
          .bindContentCover(this.isPresent, this.Setting(), ModalTransition.DEFAULT)
          .onClick(() => {
            if (this.isPresent == false) {
              this.isPresent = !this.isPresent;
            } else {
              this.isPresent = !this.isPresent;
              this.isPresent = !this.isPresent;
            }
          })
        }
      }
      .margin({ top: 20 }) // 设置整个列布局的上边距为20
    }
    // 设置组件的内边距为10，提供内容的内部空间
    .padding(10)
    // 设置背景颜色，增强视觉效果
    .backgroundColor('#ffd6c2c2')
    // 设置组件的高度为父容器的100%，确保充满父容器
    .height('100%')
    // 设置组件的宽度为父容器的100%，确保充满父容器
    .width('100%')
  }

  /// 使用@Builder注解标记Setting函数，允许使用builder模式构建对象
  @Builder
  Setting() {
    /// 导航组件，用于创建页面导航结构
    Navigation() {
      /// 布局容器，用于按列排列子组件
      Column() {
        /// 调用lishijilu函数，显示历史记录内容
        lishijilu()
      }
      /// 设置Column组件的高度和宽度
      .height('100%').width('100%')
      /// 设置背景颜色
      .backgroundColor("#ab9f8a8a")
      /// 添加过渡动画效果，此处为平移
      .transition(TransitionEffect.translate({ y: 0 })/// 动画曲线设置为弹簧运动曲线
        .animation({
          curve: curves.springMotion(100, 100)
        }))
    }
    /// 设置导航栏标题
    .title('历史')
    /// 设置导航栏模式为Mini
    .titleMode(NavigationTitleMode.Mini)
  }
}

// 定义一个名为lishijilu的组件结构体，用于展示历史记录中的图片
@Component
export struct lishijilu {
  // 状态变量img，存储图片路径数组
  @State img: string[] = []
  
  // 初始化上下文对象
  context = getContext(this)
  
  // 定义picsBasePath变量，用于存储图片的基础路径
  picsBasePath: string = this.context.filesDir + "/pics"

  // 构建组件的UI
  build() {
    // 创建一个滚动视图，包裹内部内容
    Scroll() {
      // 创建一个列表，用于展示图片项
      List() {
        // 遍历img数组，生成每个图片项
        ForEach(this.img, (item: string, i: number) => {
          // 定义列表项组件
          ListItem() {
            // 展示图片，设置图片的样式
            Image(item)
              .margin({ top: 10, left: 20 })
              .width('90%')
              .height(200)
              .borderWidth(1)
              .borderColor('#ffc6b8a8')
              .borderRadius(30)
          }
        })
      }
      // 设置列表的车道数为2，允许同时展示两个列表项
      .lanes(2)
      // 设置列表的宽度为100%
      .width('100%')
    }
    // 设置滚动视图的高度和宽度为100%
    .height('100%')
    .width('100%')
  }
}

建立自定义组件

lishijilu

‘

// 定义一个名为lishijilu的组件结构体，用于展示历史记录中的图片
@Component
export struct lishijilu {
  // 状态变量img，存储图片路径数组
  @State img: string[] = []

  // 初始化上下文对象
  context = getContext(this)

  // 定义picsBasePath变量，用于存储图片的基础路径
  picsBasePath: string = this.context.filesDir + "/pics"

  // 构建组件的UI
  build() {
    // 创建一个滚动视图，包裹内部内容
    Scroll() {
      // 创建一个列表，用于展示图片项
      List() {
        // 遍历img数组，生成每个图片项
        ForEach(this.img, (item: string, i: number) => {
          // 定义列表项组件
          ListItem() {
            // 展示图片，设置图片的样式
            Image(item)
              .margin({ top: 10, left: 20 })
              .width('90%')
              .height(200)
              .borderWidth(1)
              .borderColor('#ffc6b8a8')
              .borderRadius(30)
          }
        })
      }
      // 设置列表的车道数为2，允许同时展示两个列表项
      .lanes(2)
      // 设置列表的宽度为100%
      .width('100%')
    }
    // 设置滚动视图的高度和宽度为100%
    .height('100%')
    .width('100%')
  }
}

// 获取当前上下文
  context = getContext(this)
  // 定义图片基础路径，用于后续的文件操作
  picsBasePath: string = this.context.filesDir + "/pics"

  // 在组件即将出现时调用的方法
  // 该方法主要用于检查并创建用于存储图片的目录
  aboutToAppear(): void {
    // 检查picsBasePath对应的目录是否存在
    let f = fileIo.accessSync(this.picsBasePath)
    // 如果目录不存在，则创建该目录
    if (!f) {
      fileIo.mkdirSync(this.picsBasePath)
    }
  }

去lishijilu页面

// 初始化上下文对象
  context = getContext(this)

  // 定义picsBasePath变量，用于存储图片的基础路径
  picsBasePath: string = this.context.filesDir + "/pics"

  // 在页面即将出现时调用此方法
  aboutToAppear(): void {
    // 读取图片基础路径下的所有文件名
    let fileNames = fileIo.listFileSync(this.picsBasePath)
    // 将文件名转换为图片的URI
    this.img = fileNames.map(fileName => {
      // 拼接图片路径并获取其URI
      return fileUri.getUriFromPath(this.picsBasePath + "/" +
        fileName) 
    })
    // 打印图片URI数组
    console.log(this.img + "")
  }

下节文章我们实现逻辑以及各个函数