SwiftUI_visionOS_Note
SwiftUI_visionOS_Note
![N - Voice Record](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
N - Voice Record
.onLongPressGesture
![MagnificationGesture](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
MagnificationGesture
![Map](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
Map
While most iOS tutorials are engaging, they often don't function well on visionOS. I spend the most of time modifying them to work, either intentionally or unintentionally.
![ToDo List](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
ToDo List
.onSubmit
As of iOS 15, we can use the new .submitLabel modifier to change the color and text of the submit button on the keyboard. Even more importantly, we can also use .onSubmit to run custom functions when users click on the submit button! These features
NavigationStack
NavigationLink , It only move up and back on stack only When it’s under NavigationStack, it can moves up and down freely.Text will show screen # and when the view is initialized, it will print the which screen # got calledThis is a Swift code
![@FocusState](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
@FocusState
In practice, this will most often be associated with users clicking on TextFields. In this video, we will first learn what Focus State is and then review a few real-world implementations! As a bonus, we will also check out Apple's documentation on
.badge
.swipeActions()
Previously, we List rows were limited to only 1 swipe action - swipe to delete. Now, however, we can totally customize these rows and add a whole bunch of buttons to them. We will implement a few different variations of list row actions, each with
AsyncImage
Asynchronously download image from URLWhen the view appear, AsyncImage will read the data and put it inside the container. It will fetch the data every time we run the view.Image is bigger than the frame size, so other outside part will be cut off.No
![.buttonStyle & .controlSize](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
.buttonStyle & .controlSize
For the button Style, which one should I use?.buttonStyle(BorderlessButtonStyle())or.buttonStyle(.borderless)
System Material
These System Materials are very commonly used as backgrounds for a subtle, yet professional look to your apps. As you'll see, the colors are not totally opaque and allow some natural color to bleed through.
TextSelection()
This is great for chat apps or any content-based app where users might want to share some text with a friend. Sharing is not only a great feature for your users, but will help drive organic growth as users share with others.
![@EnvironmentObject](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
@EnvironmentObject
The @EnvironmentObject is a super-useful property wrapper that lets us put an observable object into the environment of our SwiftUI application. By doing this, all of these views in the view hierarchy will then have access to this object. This is
![@AppStorage](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
@AppStorage
We can save the small piece of data when the app is closed.Once we close the app on HomeView, we will never see the OnboardingView again.Important: @AppStorage writes your data to UserDefaults, which is not secure storage. As a result, you should
@StateObject & @ObservableObject
Why is important?→ @StateObject → INIT→ @ObservedObejct → SubviewToday, I learned about ObservableObject and StateObject. These are property wrappers that observe other classes and update them in the view.Whenever the view is updated and reloaded,
Custom model
Custom data types are frequently needed in our applications. They allow us to incorporate multiple data points into a single model. For instance, a User's data may need to encompass more than just their name. By creating a custom data type, we can
Tap gesture
The .onTapGesture modifier functions much like a button and can even be customized to recognize multiple taps instead of just one (double-tap, triple-tap, etc.).count: number of taps to perform the actionjust like instagram.
SAFE CODING: if let & guard
In Swift, variables can be declared as optional using the '?' symbol, indicating they may be nil. To safely check and unwrap these optional variables, 'if let' and 'guard' statements are recommended. These methods are safer than explicitly
onAppear & onDisappear
#modifierThe onAppear and onDisappear modifiers are extremely convenient methods that let us call functions when specific components appear or disappear from the screen. These are often used for managing animations and loading data in SwiftUI
![toolbar](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
toolbar
add: Markups & Documentation
by writing // MARK: TITLE, it leaves a flag on minimap.and we can comment it like thisand we can fold it by pressing option+command+arrowwe can simplify the code by extracting subviews from the bodyWe can comment what this code is forUse
Adapting Dark Mode in visionOS??
VisionOS’s default colour scheme is “Default”We can change how it seems under preview by adding.preferredColorScheme(.light)or we can use the adaptive colour in assetsor we can create an enviroment variable to make it locally adaptive@Environment(\.c
![Slider](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
Slider
Today, I explored Slider and TabView. While I had previously relied on NavigationStack for view composition, TabView simplifies navigation between different pages.Slider provides a user-friendly way to select from a range of values. It allows for
![TabView()](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
TabView()
![Stepper](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
Stepper
what is Strideable?We will create a rectangle that changes the size by clicking the stepperStepper enables users to increase or decrease a value by clicking the + and - signs.The view element can be edited or modified smoothly using withAnimation.I'm
![ColorPicker()](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
ColorPicker()
![DatePicker()](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
DatePicker()
The DatePicker is a native SwiftUI component for selecting date and/or time.You can implement it using various initializers and customize it with different DatePickerStyles.Additionally, a DateFormatter can be used to effectively display dates in
![Picker()](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
Picker()
![toggle()](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
toggle()
![TextEditor()](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
TextEditor()
![.contextMenu()](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
.contextMenu()
#swiftui #visionos #applevisionpro #visionpro
![TextField()](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
TextField()
![function](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
function
Let’s say we want to print this lines of string on the screen. It’s okay to use if this is on only one screen. But what if it’s on multiple pages?() are used with functions.() are known as the function’s call site: “a place where a function is
![.actionSheet()](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
.actionSheet()
.actionSheet() is not supported in VisionOS. Use .confirmationDialog() instead.In a popup screen, it's possible to list more than two buttons to modify the view.Vision Pro can be preordered starting from January 19 at 5AM PST.#visionOS
![Alert](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
Alert
![Loop, While & Skip](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
Loop, While & Skip
We can repeat and fix in array, dictionary, or setHeres an array of string, and print each string like following codeWe call the value of os from platforms.it will print 4 lines of textwe can loop over the fixed amount of number1...12 is "range"we
![How to use List()](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
How to use List()
#toolbarApple developer (List of Style)#visionOS #applevisionpro #swiftUI #appdevelopmentThis video provides the opportunity to experience a spatial video on my Quest 2. The immersion was remarkable, similar to viewing a 3D movie up close with 3D
![NavigationStack & NavigationLink](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
NavigationStack & NavigationLink
![.sheet() vs .transition() vs .animation](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
.sheet() vs .transition() vs .animation
Previous .transition() note, we only used a single button to toggle the screen.This time we will use @Binding and other button on the new screen to toggle.For your information, it appears really impressive.
![.sheet() & .fullScreenCover()](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
.sheet() & .fullScreenCover()
We didn’t assign anything on that “X” button, so we can’t go back to the screen.Someone told me, "you should learn AI instead of VisionOS."However, I'm interested in building experiences, which is why I'm focusing on MR.
![Transition](https://blogpro.so/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimages%2Fpage-cover%2Fnasa_eva_during_skylab_3.jpg&w=3840&q=75)
Transition
Use .transition to animate an object's entry and exit.❓When should we use .animation and .transition?💛 Playing with the .asymmetric transition effect can be fun.🫥 So, which one do we use the most?#visionOS #applevisionpro #swiftUI #appdevelopment
![Adding Animation](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
Adding Animation
2023-12-29 In SwiftUI, animations can be added using withAnimation(). A button and a rounded rectangle can be created, with a boolean variable isAnimated used to change the value of elements. The withAnimation() function provides animation features
![Animation curves & timing](https://blogpro.so/_next/image?url=https%3A%2F%2Flmtjmyucqrtedzdzmevs.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fimages%2Fblogpro-default.webp&w=3840&q=75)
Animation curves & timing
In most cases, we use Animation.default.However, it's enjoyable to experiment with different types of animations.👿 How can I animate all six squares using a single button?#visionOS #applevisionpro #swiftUI #studying
Subscribe to our newsletter
Get the latest news and updates from our team