SwiftUI 100 레시피/ListView
-
SwiftUI ListView 14 - ListView 라디오 버튼 만들기SwiftUI 100 레시피/ListView 2022. 5. 26. 18:55
리스트버튼내 라디오 버튼 추가하는 방법 import SwiftUI struct ContentView: View { @State private var selectedChoice = "" let choices = ["학생", "교직원", "교수"] var body: some View { List(choices, id: \.self){choice in HStack { Text(choice) Spacer() //circle.inset.filled //조금 더 큰 내원 Image(systemName: selectedChoice == choice ? "smallcircle.fill.circle" : "circle") .onTapGesture { selectedChoice = choice }.font(.title) ..
-
SwiftUI ListView 13 - ListView 체크박스, 다중선택SwiftUI 100 레시피/ListView 2022. 5. 26. 18:52
리스트 뷰 체크박스를 생성후 체크한 항목을 하단 리스트에 표시하게 하는 방법 import SwiftUI struct ContentView: View { @State private var selectedFruits: [String] = [String()] let fruits = ["사과","수박","오렌지","복숭아","참외","포도","딸기"] var body: some View { VStack{ List(fruits, id: \.self){ fruit in VStack { HStack { Text(fruit) Spacer() ZStack { if selectedFruits.contains(fruit){ Image(systemName: "checkmark.square.fill") .font(.largeT..
-
SwiftUI ListView 12 - ListView Json 연동하여 500번까지 스크롤 만들기SwiftUI 100 레시피/ListView 2022. 5. 26. 18:49
Json과 연동하여 데이터 불러오기 서버프로그램에서 500번까지 데이터를 생성 (Server.js) url로 데이터를 불러와서 처리하는 swift 화일 생성(NumberListViewModel) ListView에서 처리(ContentView) #1. Server.js app.get(‘/data’, (req, res) => { let page = req.query.page let numbers = [] for(let index = 1 ; index Bool { return id == numbers.count - 2 } } #3. ContentView import SwiftUI struct ContentView: View { @StateObject private var numberListVM =..
-
SwiftUI ListView 11 - ListView 제목 펼칠 수 있게SwiftUI 100 레시피/ListView 2022. 5. 26. 18:42
리스트뷰 제목을 누르면 세부 항목이 나오게 하는 방법 import SwiftUI struct Place: Identifiable{ let id = UUID() let name: String let hikes: [Hike] } struct Hike: Identifiable{ let id = UUID() let name: String } private func getAllPlaceWithHikes() ->[Place]{ return[ Place(name: "서울", hikes: [Hike(name: "북한산"),Hike(name: "한강"),Hike(name: "남산")]), Place(name: "경기도", hikes: [Hike(name: "운정호수"),Hike(name: "구미공원"),Hike(name..
-
SwiftUI ListView 10 - ListView 다중선택하기SwiftUI 100 레시피/ListView 2022. 5. 26. 17:50
리스트뷰 항목을 다중선택하여 처리할 경우 편집 버튼을 만들고 편집 버튼을 누르면 다중선택이 나타나며 몇개의 항목을 선택했는지 타이틀로 표시 import SwiftUI struct Customer: Identifiable{ let id = UUID() let name : String } struct ContentView: View { @State private var customers = [ Customer(name: "재석"), Customer(name: "호동"), Customer(name: "명수"), Customer(name: "싸이"), Customer(name: "하하") ] @State private var selectedCustomerIds = Set() var body: some View ..
-
SwiftUI ListView 9 - ListView 좌우로 스왑액션(swipeActions)SwiftUI 100 레시피/ListView 2022. 5. 26. 17:46
리스트뷰의 항목을 좌우로 스왑하면 나타나는 버튼 두개의 스왑액션을 적용, 왼쪽에서 스왑할 때는 노란색 버튼이 표시, 오른쪽으로 스왑하면 푸른색 버튼이 표시 swipeActions(edge: .leading) => 왼쪽으로 스왑 swipeActions(edge: .trailing) => 오른쪽으로 스왑 import SwiftUI struct Place: Identifiable{ let id = UUID() let name:String let photo:String } func getPlaces() -> [Place]{ return[ Place(name: "Denver", photo: "denver"), Place(name: "NewYork", photo: "new york"), Place(name: "Co..
-
SwiftUI ListView 8 - 100번째까지 스크롤하기SwiftUI 100 레시피/ListView 2022. 5. 24. 15:16
리스트뷰에서 버튼을 생성, 클릭시 100번째까지 스크롤이 되게 하는 방법 import SwiftUI struct ContentView: View { var body: some View { //스크롤뷰 읽기 시작 ScrollViewReader{ proxy in VStack { Button("100번까지 스크롤하기"){ withAnimation{ proxy.scrollTo(100) } } List(1...500, id:\.self){ index in Text("\(index)") .id(index) //set id 중요 1....500 } } } //스크롤뷰 읽기 끝 } } struct ContentView_Previews: PreviewProvider { static var previews: some Vi..
-
SwiftUI ListView 7 - 리스트 row 클릭시 하단에 표시SwiftUI 100 레시피/ListView 2022. 5. 24. 15:14
리스트뷰에서 열(Row) 클릭할 경우 하단에 인덱스가 나타나도록 하는 방법 import SwiftUI struct ContentView: View { @State private var selectedIndex: Int? var body: some View { VStack{ List{ ForEach(1...10, id:\.self){ index in HStack{ Text("\(index)") Spacer() } .contentShape(Rectangle()) //열 전체가 적용될 수 있도록(없으면 번호만 눌렀을때만 작동) .onTapGesture(perform: { selectedIndex = index }) } } selectedIndex.map{ Text("\($0)") .font(.largeTitl..
-
SwiftUI ListView 6 - 이미지 및 제목, 검색SwiftUI 100 레시피/ListView 2022. 5. 24. 15:11
리스트뷰에 이미지와 제목을 넣고, 검색창을 통해 리스트뷰 제목을 검색 #1. Place 구조체를 만들고 상수로 id, name, photo 지정 #2. getPlaces() 함수를 만들고 Place에 name, phonot 값 리턴 import SwiftUI struct Place: Identifiable{ let id = UUID() let name:String let photo:String } func getPlaces() -> [Place]{ return[ Place(name: "Denver", photo: "denver"), Place(name: "NewYork", photo: "new york"), Place(name: "Costa Rica", photo: "costa-rica"), Plac..
-
SwiftUI ListView 5 - 날짜 및 시간 자동으로 생성SwiftUI 100 레시피/ListView 2022. 5. 24. 15:07
화면 아래로 드래그해서 리스트뷰에 날짜 및 시간이 자동으로 생성되게 하는 방법 날짜를 배열상태로 만든 후 네비게이션뷰에 리스트뷰 생성 아래로 드래그할 때마다 날짜 및 시간이 생성되서 리스트뷰로 출력됨 import SwiftUI struct ContentView: View { @State private var refreshDates: [Date] = [] var body: some View { NavigationView{ List(refreshDates, id: \.self){ date in Text("\(date)") }.listStyle(.plain) .refreshable { DispatchQueue.main.asyncAfter(deadline: .now() + 2.0){ let currentDate..