Swift UI note

SwiftUI uses Declarative Syntax.

Swift uses Imperative Syntax.

Declarative Syntax lets you specify what you want to be created and the system decides how to do it.

Imperative Syntax forces you to describe exactly how you want an interface item to be created.


Zstack, Vstack, Zstack

     ZStack{

            Color.accentColor

                .ignoresSafeArea()

            HStack(spacing: 20){

                Text("Demo").scaledToFit().frame(width: 100,height: 100, alignment: .center).border(.red)

                VStack(alignment: .trailing,spacing: 30){

                    Text("Tomato Tortellini, Bottarga and Carbonara ").font(.title3)

                        .multilineTextAlignment(.center)

                    Text("Demo 2").font(.title3)

                        .multilineTextAlignment(.center)

                }

            }.frame(width: 200,height: 600)

        }.padding()


Button

Button(role: .destructive) {
print("do something!")
} label: {
HStack {
Image(systemName: "trash")
Text("")
}
}

Toggle

Toggle(isOn: $isShowing) {
Text("Hello World")
}

Stepper

NavigationView { 
VStack { 
Text("Current value: \(value)") 
Stepper("Number of guests", value: $value, in:1...20) 
} 
.padding() 
.navigationTitle("Reservation form") 
} 

Slider

VStack {
Text("Little Lemon").font(.system(size: size * 50))
Slider(value: $size)
}


Date Picker

struct ContentView: View {
@State var selectedDate = Date()
var dateClosedRange: ClosedRange<Date> {
let min = Calendar.current.date(byAdding: .day, value: -1, to: Date())!
let max = Calendar.current.date(byAdding: .day, value: 1, to: Date())!
return min...max
}
var body: some View {

NavigationView {
Form {
Section {
DatePicker(
selection: $selectedDate,
in: dateClosedRange,
displayedComponents: .date,
label: { Text("Due Date") }
)
}
}
}
}
}


Label

Label("Menu", systemImage: "fork.knife")
.labelStyle(.titleAndIcon)






Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Flutter 4.5 - Custom theme, font, image

Hình ảnh
 1, Custom theme:  return MaterialApp ( title: 'Personal Expenses' , theme: ThemeData ( primarySwatch: Colors. deepPurple , accentColor: Colors. amber ) , home: MyHomePage () , ) ; Use: color: Theme. of (context). primaryColor , 2, Custom font - Add fonts vào thư mục assets/fonts - Khai báo fonts ở pubspec.yaml ( Lưu ý: khoảng cách đầu ở  pubspec.yaml rất quan trọng, nếu thò thụt ko đúng sẽ gây ra lỗi hoặc không thể sử dụng đc dependence vừa thêm ko đúng) - Defind textTheme và appBarTheme ở main.dart theme: ThemeData ( primarySwatch: Colors. deepPurple , accentColor: Colors. amber , fontFamily: 'Quicksand' , textTheme: ThemeData . light (). textTheme .copyWith( headline6: TextStyle ( fontFamily: 'OpenSans' , fontSize: 18 , ) , ) , appBarTheme: AppBarTheme ( textTheme: ThemeData . light (). textTheme .copyWith( headline6: TextStyle ( fontFamily: 'OpenSans'...
Đọc thêm

Flutter 1.2 - Flutter Architecture

Hình ảnh
 1.2, Flutter Architecture      Không kéo thả, code UI bằng tay :v sử dụng widgets.      Tất cả mọi thứ trong màn hình đều là widgets.     Các item đều là widgets     Cả màn hình là widgets     Cả app là widgets :)) Widget Tree... Có thể đặt cờ để code iOS riêng, Android riêng.
Đọc thêm

Flutter 2.5 - First App | Building a Widget Tree

Hình ảnh
 Hello word :D - Import thư viện material package (material.dart là 1 thư viện trong sdk flutter) - Như đã đề cập: main() là 1 hàm đặc biệt, dart sẽ tự động tìm class main.dart sau đó chạy hàm này đầu tiên. - runApp(); thực hiện các công việc hậu trường :v (lấy các widget mà develop draw để hiển thị lên màn hình) nó là function thư viện flutter cung cấp :D.  - build: chịu trách nhiệm return về 1 widget để func runApp 'take it' - Trong flutter họ có định nghĩa sẵn cho chúng ta vài cái widget để sài cho tiện Trong ví dụ là MaterialApp là widget kế thừa các kiến trúc theo chuẩn design marterial, Scaffold là widget bao chứa toàn bộ code chúng ta vào trong nó ( phủ đầy giao diện chúng ta). Nói thì hơi mông lung như 1 trò đùa 😄 => Bạn nào code HTML rồi thì cứ tưởng tượng cái thẻ marterial giống như là thẻ html có thẻ head rồi nhúng css của marterial vào, còn thẻ scaffold là như thẻ body của html vậy thôi. Trong 1 thẻ widget thì sẽ có các Thộc tính đi kèm, có thể các thuộc tính đ...
Đọc thêm