ArkTS는 텍스트, 버튼, 입력 필드, 목록 등 다양한 종류의 컴포넌트를 지원합니다. 이러한 컴포넌트를 활용하여 다채로운 사용자 인터페이스를 구축할 수 있습니다.

다양한 컴포넌트 예제 코드

아래는 ArkTS를 사용하여 생성된 컴포넌트의 몇 가지 예시입니다:

• 텍스트 컴포넌트:

Text("안녕하세요, 세계!")
// 글자 크기 설정
.fontSize(40)
// 폰트 두께 설정
.fontWeight(FontWeight.Medium)

• 버튼 컴포넌트:

Button("클릭하세요")
// 버튼 색상 설정
.backgroundColor(ColorPalette.Primary)
// 버튼 클릭 이벤트 설정
.onClick(() => {
  // 버튼 클릭 이벤트 처리 함수
  console.log("버튼이 클릭되었습니다!")
})

• 입력 필드 컴포넌트:

TextInput()
// 입력 필드 안내 텍스트 설정
.placeholder("이름을 입력하세요")
// 입력 필드 초기값 설정
.initialValue("홍길동")

• 목록 컴포넌트:

List() {
  // 목록 항목
  ListItem("항목 1")
  ListItem("항목 2")
  ListItem("항목 3")
}

이러한 컴포넌트들을 조합하여 원하는 사용자 인터페이스를 구축할 수 있습니다. ArkTS는 매우 유연한 프레임워크로, 다양한 종류의 사용자 인터페이스를 생성할 수 있도록 지원합니다.

컴포넌트와 이벤트 처리 예제 코드

1. 버튼 컴포넌트와 이벤트 처리 예제

// 커스텀 컴포넌트 시작을 나타내는 데코레이터
@Component
// 커스텀 컴포넌트 정의
struct MainView {
  // 상태 변수 데코레이터, 문자열 타입, 초기값: "안녕하세요"
  @State displayText: string = "안녕하세요";
  
  // UI 구성을 위한 build 함수
  build() {
    // 가로 레이아웃 컴포넌트
    Row() {
      // 세로 레이아웃 컴포넌트 중첩
      Column() {
        // 텍스트 컴포넌트
        Text(this.displayText)
          // 글자 크기 설정
          .fontSize(48)
          // 폰트 두께 설정
          .fontWeight(FontWeight.Bold)
      }
      // 페이지 너비 비율 설정
      .width('100%')
      // 추가 텍스트 컴포넌트
      Text("추가 텍스트 컴포넌트")
        // 글자 크기 설정
        .fontSize(28)
        // 글자 색상 설정
        .color(ColorPalette.Accent)
    }
    // 페이지 높이 비율 설정
    .height('100%')
    // 버튼 컴포넌트 추가
    Button("상호작용 버튼")
      // 버튼 색상 설정
      .backgroundColor(ColorPalette.Secondary)
      // 버튼 클릭 이벤트 설정
      .onClick(() => {
        // 버튼 클릭 이벤트 처리 함수
        console.log("버튼이 눌렸습니다!")
      })
  }
}

이 예제에서는 컴포넌트에 버튼을 추가했습니다. 이 버튼은 "상호작용 버튼"이라는 텍스트를 표시하며, 보라색 배경을 가집니다. 사용자가 이 버튼을 클릭하면, 콘솔에 "버튼이 눌렸습니다!"가 출력됩니다. 컴포넌트 내에 원하는 수만큼 이벤트 처리 함수를 추가할 수 있습니다. ArkTS는 클릭 이벤트, 마우스 오버 이벤트, 키보드 이벤트 등 다양한 종류의 이벤트를 지원합니다. 이러한 이벤트들을 활용하여 다양한 상호작용이 가능한 사용자 인터페이스를 구축할 수 있습니다.

2. 추가 컴포넌트와 이벤트 처리 예제

다음은 ArkTS를 사용하여 생성된 이벤트 처리 함수의 몇 가지 예시입니다:

• 버튼 클릭 이벤트:

Button("상호작용")
  // 버튼 배경색 설정
  .backgroundColor(ColorPalette.Primary)
  // 버튼 클릭 이벤트 설정
  .onClick(() => {
    // 버튼 클릭 이벤트 처리 함수
    console.log("버튼 상호작용 발생!")
  })

• 입력 필드 입력 이벤트:

TextInput()
  // 입력 필드 안내 텍스트 설정
  .placeholder("텍스트를 입력하세요")
  // 입력 필드 초기값 설정
  .initialValue("시작 텍스트")
  // 입력 필드 입력 이벤트 설정
  .onChange((value: string) => {
    // 입력 필드 입력 이벤트 처리 함수
    console.log("입력된 값: " + value)
  })

• 목록 항목 클릭 이벤트:

List() {
  // 목록 항목
  ListItem("첫 번째 항목")
    // 목록 항목 클릭 이벤트 설정
    .onClick(() => {
      // 목록 항목 클릭 이벤트 처리 함수
      console.log("첫 번째 항목 선택됨!")
    })
  ListItem("두 번째 항목")
    // 목록 항목 클릭 이벤트 설정
    .onClick(() => {
      // 목록 항목 클릭 이벤트 처리 함수
      console.log("두 번째 항목 선택됨!")
    })
  ListItem("세 번째 항목")
    // 목록 항목 클릭 이벤트 설정
    .onClick(() => {
      // 목록 항목 클릭 이벤트 처리 함수
      console.log("세 번째 항목 선택됨!")
    })
}

이러한 이벤트 처리 함수들을 활용하여 다채로운 상호작용이 가능한 사용자 인터페이스를 구축할 수 있습니다.

ArkUI 프레임워크는 매우 유연한 UI 프레임워크로, 다양한 종류의 사용자 인터페이스를 생성할 수 있도록 지원합니다.