list5 SwiftUI : Dynamic List and identifiable 목차 Dynamic List 이번에는 List를 사용하여 Dynamic List View를 만들어 보도록 하겠습니다. 위처럼 포켓몬의 이름에 따른 타입과 그에 맞는 컬러를 매치시키시고 오른쪽 상단에 있는 navigationBarItems을 누를 때마다 랜덤 하게 포켓몬의 이름이 생성되도록 하는 것이 목표입니다. 우선 간단하게 아래와 같이 작성해보도록 하겠습니다. 우선 pokemon의 모델을 struct로 하나 만들어 주겠습니다. struct pokemonModel { let name: String let type: String let color: Color let imagename: String } 그리고 @State변수로 name과 type그리고 color를 배열시켜 주도록 합니다. struct Pok.. SWIFTUI/Controls 4년 전 SwiftUI : List (ListStyle / onDelete / onMove) 목차 List에 대해 알아보도록 합시다. List List는 단일 열에 정렬 된 데이터 행을 표시하는 컨테이너입니다. struct ContentView: View { var body: some View { List { Text("첫번째 리스트") Text("두번째 리스트") Text("세번째 리스트") } } } 정적 콘텐츠 List의 생성자에 원하는 뷰를 전달하면 하나씩 각 row에 담아 표현합니다. 여기서 뷰 하나는 row 하나에 해당합니다. TIP UIKit에서는 UITableView에서 내용을 표시할 뷰를 셀이라고 불렀다면, SwiftUI에서는 row라고 표현합니다. 다음과 같이 텍스트가 아닌 다른 이미지 뷰를 넣어 봐도 동일하게 List를 작성 할 수 있습니다. List { Text("List".. SWIFTUI/View layout 4년 전 SwiftUI : List를 이용해서 Grid형식 만들기 SwiftUI : Lazy V(H)Grid Grid에 대해 알아보도록 합시다. List와 Grid의 차이 Grid는 List와 친척이라고 생각하시면 됩니다. 일단 Grid 와 List의 차이를 간단하게 그림으로 보겠습니다. LazyV(H)Stack과의 차이는 다음 게시물에서 seons-dev.tistory.com List View를 통해 Grid형식으로 이번에는 List view를 통해서 grid형식으로 화면을 구성하도록 하려고 합니다. 일단 아래 이미지를 Assets 폴더에 넣어주겠습니다. (출처: unsplash.com/photos/8Nc_oQsc2qQ) 이미지파일을 Assets에 넣어줬으면, 이제 ContentView로 가서 아래와 같이 코드를 작성해줍니다. 일단 List 안에 HStack을 쌓아주.. SWIFTUI/View layout 4년 전 SwiftUI Project3 : List view를 사용하여 Grid 만들기 List view로 Grid 만들기 New file을 만들어 이름은 'Dish' 라고 정해주고, 아래 이미지를 Assets에 넣어줍니다. (출처: unsplash.com/photos/8Nc_oQsc2qQ) 그리고 Dish 라는 Extension값을 넣어주겠습니다. import Foundation import SwiftUI struct Dish { //Dish를 구별하기 위해 고유 ID를 저장해줌 let id = UUID() let name : String let price : Double let imageURL : String } 이제 아래에 각 요리에 대한 정보를 입력해주겠습니다. extension Dish { static func all() -> [Dish] { return [ Dish(name: ".. PROJECT/Simple 4년 전 SwiftUI Project2 : Slider Project2 : Slider Flag 배열 생성 Slider를 사용하여 프로젝트를 만들어보겠습니다. 첫 번째로, ContentView에 NavigationView를 생성해서 NavigationBarTitle을 "국기"로 정해주겠습니다, struct ContentView: View { let flag = ["🇰🇷", "🇺🇸", "🇯🇵", "🇪🇺", "🇸🇱", "🇧🇪", "🇲🇨", "🇬🇳", "🇿🇦", "🇳🇮", "🇨🇦", "🇹🇷", "🇨🇮", "🇮🇹", "🇬🇧", "🇨🇭", "🇸🇴"] var body: some View { NavigationView { VStack { } .navigationBarTitle("국기") } } } 그리고 flag의 배열에 한 번 더 배열로 감싸주겠습니다. 짝을 지어주는거.. PROJECT/Simple 4년 전 이전 1 다음