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 7.1 - Navigating to a new page, GridView, Pass data by routes, Pop data

Hình ảnh
 1, Grid view: @override Widget build (BuildContext context) { return Scaffold ( appBar: AppBar ( title: const Text ( 'DeliMeal' ) , ) , body: GridView ( // cross ngang, main d ọ c. N ế u có quá nhi ề u item thì dùng GridView.buider s ẽ t ố i ư u performance h ơ n children: DUMMY_CATEGORIES .map((catData) => CategoriesItem ( catData. title , catData. color , )) .toList() , padding: const EdgeInsets . all ( 20 ) , gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent ( // xác đ ị nh chi ề u r ộ ng t ố i đa c ủ a gridview maxCrossAxisExtent: 200 , // chi ề u r ộ ng t ố i đa c ủ a 1 item childAspectRatio: 3 / 2 , // t ỉ l ệ 2 c ạ nh item crossAxisSpacing: 20 , // kho ả ng cách gi ữ a các item theo chi ề u ngang mainAxisSpacing: 20 , // kho ả ng cách gi ữ a các item theo chi ề u d ọ c ) , ) , ) ; } 2, Navigating to ...
Đọc thêm

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 5.1 - Responsive & Adaptive

 1, Cách tính height, width widget: - Khai báo 1 biến đựng widget : Ví dụ:  final appBar = AppBar ( // khai báo appBar đ ể có th ể l ấ y chi ề u cao c ủ a appbar : appBar.preferredSize title: Text ( 'Personal Expenses' ) , actions: [ // btn add ở thanh appbar IconButton ( onPressed: () { _startAddNewTransaction(context) ; } , icon: Icon (Icons. add ) , ) , ] , ) ; - Lấy chiều cao bằng cách :  appBar. preferredSize . height 2, Height, witdh màn hình: MediaQuery. of (context). size . height MediaQuery. of (context). size . width Ngoài ra còn tính đc pixel, padding,... bằng cách  MediaQuery. of (context).*something* *Nên tạo biến mediaQuery sử dụng lại để ko phải khởi tạo nhiều lần => hiệu suất kém Chỉ sử dụng mediaQuery khi thực sự cần thiết, nên tách các widget cần sử dụng đến mediaQuery sang 1 class riêng để tránh rebuild ... (giải thích rõ hơn ở bài sau). final mediaQuery = MediaQuery. of (context) ; 3, Set portrai...
Đọc thêm