ContentView.swift
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | //// ContentView.swift// SwiftUIProject//// Created by Cairocoders//import SwiftUIstruct ContentView: View { @State var selection = 1 var body: some View { VStack { ZStack(alignment: .bottomTrailing) { Image("coffee").resizable().frame(height: 350) HStack(spacing: 15){ Text("Kapeng Barako") .foregroundColor(.white) }.padding() } Text("Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit") DropdownPicker(title: "Size", selection: $selection, options: ["Small", "Medium", "Large", "X-Large"]) Button("Place Order") { } .foregroundColor(.white) .frame(width: 300, height: 50) .background(Color.orange) .cornerRadius(10) Spacer() }.padding() }}struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() }}struct DropdownPicker: View { var title: String @Binding var selection: Int var options: [String] @State private var showOptions: Bool = false var body: some View { ZStack { // current selection HStack { Text(title) Spacer() Text(options[selection]) .foregroundColor(Color.black.opacity(0.6)) Image(systemName: "chevron.right") .resizable() .aspectRatio(contentMode: .fit) .frame(width: 10, height: 10) } .font(Font.custom("Avenir Next", size: 16).weight(.medium)) .padding(.horizontal, 12) .padding(.vertical, 8) .background(Color.white) .onTapGesture { // show the dropdown options withAnimation(Animation.spring().speed(2)) { showOptions = true } } // Drop down options if showOptions { VStack(alignment: .leading, spacing: 4) { Text(title) .font(Font.custom("Avenir Next", size: 16).weight(.semibold)) .foregroundColor(.white) HStack { Spacer() ForEach(options.indices, id: \.self) { i in if i == selection { Text(options[i]) .font(.system(size: 12)) .padding(.vertical, 8) .padding(.horizontal, 12) .background(Color.white.opacity(0.2)) .cornerRadius(4) .onTapGesture { // hide dropdown options - user selection didn't change withAnimation(Animation.spring().speed(2)) { showOptions = false } } } else { Text(options[i]) .font(.system(size: 12)) .onTapGesture { // update user selection and close options dropdown withAnimation(Animation.spring().speed(2)) { selection = i showOptions = false } } } Spacer() } } .padding(.vertical, 2) .transition(AnyTransition.move(edge: .top).combined(with: .opacity)) } .padding(.horizontal, 12) .padding(.vertical, 8) .background(Color.black) .foregroundColor(.white) .transition(.opacity) } } }} |
