공부하는 이오

앱의 배경 색상에 따라 상단바에 있는 시각, 배터리, 와이파이를 나타내는 아이콘의 색상을 바꿔줘야 할 때!! SystemOverlayStyle을 사용해주면 된다. 아래처럼 build 함수 내에서 선언해주면되고, @override Widget build(BuildContext context) { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light); return Scaffold( body: Container( ~~ ), ); } 두 가지 옵션을 선택할 수 있다. SystemUiOverlayStyle.light 는 하얀색 SystemUiOverlayStyle.dark 는 검은색으로 나타난다.

In SwiftUI Flutter 문서에는 이렇게 한 줄로 설명한다. SwiftUI에서 스크린에 선이나 모양을 그리기 위해 CoreGraphics를 사용한다. CoreGraphics는 무엇일까? CoreGraphics는 Framework인데, Quartz technology의 power를 활용하여 lightweight 2D rendering을 높은 정확도의 output으로 수행한다. path-based drawing, antialiased rendering, gradients, images, color management, PDF documents, 그 이상을 다룬다. Apple Developer Documentation developer.apple.com In Flutter Flutter는 Canvas..

In SwifUI SwiftUI에서, view의 내부에서 state를 관리하기 위해 @State라는 property wrapper를 사용한다. struct ContentView: View { @State private var counter = 0; var body: some View { VStack{ Button("+") { counter+=1 } Text(String(counter)) } }} 또한, 더 복잡한 상태 관리를 위해 여러 옵션들이 있는데, 예를 들어, ObservableObject라는 protocol이 있다. In Flutter Flutter에서 local state를 관리하기 위해 StatefulWidget을 사용한다. 다음 두 종류의 class로 stateful widget을 구현한다...

Responsive and adaptive design Responsive design은 무엇일까? Responsive는 '즉각 반응하는'이라는 의미이다. Responsive web design은 반응형 웹 디자인으로, 하나의 웹 사이트가 접속하는 디스플레이 종류에 따라 반응하여 화면의 크기가 자동으로 바뀌는 디자인이다. 그렇다면 Adaptive design은 무엇일까. Adaptive design is a user interface that's adapted to different screen sizes. 다양한 스크린 크기에 맞춰 바뀌는 UI이다. Adaptive web design은 적응형 웹 디자인으로, 웹에 접근한 디바이스를 체크하여 그 디바이스에 최적화된 미리 정해둔 웹을 보여주는 디자인이다...

In SwiftUI SwiftUI에서는 스크롤하는 페이지를 만들기 위해 ScrollView를 사용한다. 아래 코드에서 persons를 스크롤하며 볼 수 있도록 했다. 지난번에 다루었던 VStack을 사용했고, stack 내부의 components는 왼쪽 정렬하기 위해 alignment를 .leading으로 설정했다. ScrollView { VStack(alignment: .leading) { ForEach(persons) { person in PersonView(person: person) } } } In Flutter Flutter에서 scroll view를 만들기 위해서는 SingleChildScrollView를 사용한다. mockPersons라는 임의로 사람들 list를 생성하고, 각 person에..

Displaying a grid SwiftUI에서 non-conditional grids를 만들 때, GridRow와 함께 Grid를 사용한다. Grid { GridRow { Text("Row 1") Image(systemName: "square.and.arrow.down") Image(systemName: "square.and.arrow.up") } GridRow { Text("Row 2") Image(systemName: "square.and.arrow.down") Image(systemName: "square.and.arrow.up") } } Flutter에서 grids를 표시하려면, GridView widget을 사용한다. GridView는 다양한 constructors를 가지고 있는데, 각각은 ..

Displaying a list view SwiftUI에서 item을 list로 보여주기 위해 List를 사용한다. Model objects를 화면에 표시하기 위해 model objects를 식별할 수 있어야 한다(Being able to identify). 이때, Identifiable protocol을 사용한다. (공식 문서의 예시 코드에서는 Identifiable protocol을 사용한 Person struct가 id를 가지고 있지 않아 오류가 날 수 있다. Identifiable을 따르기 위해서는 각각이 구별가능하도록 id를 사용해주어야 한다.) struct Person: Identifiable { var id = UUID() var name: String } struct ListWithPers..

Aligning components horizontally SwiftUI에서는 stack view가 layout에 큰 부분을 차지한다. HStack은 horizontal stack이고, VStack은 vertical stack이다. Image와 text을 수직으로 두고 싶을 때, 아래와 같이 HStack을 이용하면 된다. HStack { Image(systemName: "globe") Text("Hello, world!") } Flutter는 대신에 Row를 사용한다. Row( mainAxisAlignment: MainAxisAlignment.center, children: const [ Icon(CupertinoIcons.globe), Text('Hello, world!'), ], ), Row 위젯은 ..

Buttons SwiftUI에서 버튼을 만들기 위해서 Button struct를 이용하면 된다. Button("Do something") { // this closure gets called when your // button is tapped } Button을 만들고 iPhone 14 Pro Max 시뮬레이터로 build 한 모습니다. Flutter에서 똑같이 만들려면, CupertinoButton class를 이용하면 된다. CupertinoButton( onPressed: () { // This closure is called when your button is tapped. }, child: const Text('Do something'), ) Flutter는 다양한 버튼이 이미 정의되어 있고, ..

앞에서 Flutter와 SwiftUI의 개요와 구성에 대한 이야기를 했다면, 오늘부터는 UI development의 기초를 이야기할 예정이다! Getting started SwiftUI에서는 앱을 시작하기 위해 App을 이용한다. @main struct MyApp: App { var body: some Scene { WindowGroup { HomePage() } } } 그리고 app의 body를 View protocol을 따르는 struct에 둔다. struct HomePage: View { var body: some View { Text("Hello, World!") } } Flutter는 runApp 함수에 나의 app의 instance를 넘긴다. void main() { runApp(const M..