[Day2] UI Basics 1 - Flutter for SwiftUI Developers 번역
목차
- Getting started
- Adding Buttons
- Aligning components horizontally
- Aligning components horizontally
#UI Basics 1
이 섹션에서는 Flutter에서 UI 개발의 기본 사항과 SwiftUI와 비교하는 방법을 다룹니다. 여기에는 앱 개발을 시작하고, 정적 텍스트를 표시하고, 버튼을 만들고, 온-프레스 이벤트에 반응하고, 목록, 그리드를 표시하는 방법 등이 포함됩니다.
#Getting started
SwiftUI에서는 App을 사용하여 앱을 시작합니다.
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
HomePage()
}
}
}
또 다른 일반적인 방법은 다음과 같이 View 프로토콜을 준수하는 struct 내에 앱 body를 배치하는 것입니다:
struct HomePage: View {
var body: some View {
Text("Hello, World!")
}
}
Flutter 앱을 시작하려면 앱 인스턴스를 runApp 함수에 전달합니다.
( 아래에서 MyApp() )
void main() {
runApp(const MyApp());
}
App은 widget입니다.build method는 위젯이 나타내는 사용자 인터페이스의 일부를 설명합니다. \일반적으로 CupertinoApp와 같은 WidgetApp 클래스로 앱을 시작하는 것이 일반적입니다.
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
// Returns a CupertinoApp that, by default,
// has the look and feel of an iOS app.
return const CupertinoApp(
home: HomePage(),
);
}
}
HomePage에서 사용되는 위젯은 Scaffold class와 함께 시작할 수 있습니다.
Scaffold는 app을 위해서 기본적인 레이아웃 구조를 구현합니다.
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text(
'Hello, World!',
),
),
);
}
}
플러터가 어떻게 Center widget을 사용하는지 봐야합니다.
SwiftUI는 view의 contents를 기본적으로 중앙에 렌더링 합니다.
Flutter는 항상 그렇지 않죠.
Scaffold는 자신의 body에 있는 위젯을 중앙으로 렌더링 하지 않습니다.
위의 텍스트를 중앙에 위치시키고 싶으면 Center 위젯으로 감싸세요.
위젯과 위젯의 기본적인 동작에 대해서 배우고 싶으면 이 부분을 참고하세요.
CenterClass : https://api.flutter.dev/flutter/widgets/Center-class.html
Layout Widget: https://docs.flutter.dev/ui/widgets/layout
#Adding Buttons
SwiftUI에서는 Button 구조체를 사용하여 버튼을 생성합니다.
Button("Do something") {
// this closure gets called when your
// button is tapped
}
Flutter에서 동일한 결과를 얻으려면 CupertinoButton 클래스를 사용하십시오:
CupertinoButton(
onPressed: () {
// This closure is called when your button is tapped.
},
child: const Text('Do something'),
)
Flutter에서는 사전 정의된 스타일로 다양한 버튼에 액세스할 수 있습니다.
CupertinoButton 클래스는 Cupertino 라이브러리에서 제공됩니다.
Cupertino 라이브러리의 위젯은 Apple의 디자인 시스템을 사용합니다.
#Aligning components horizontally
SwiftUI에서 stack views는 레이아웃을 디자인하는 데 큰 역할을 합니다. 두 개의 별도 구조로 스택을 만들 수 있습니다:
1. 수평 스택 보기용: HStack
2. 수직 스택 보기용: VStack
다음 SwiftUI 보기는 가로 스택 보기에 지구본 이미지와 텍스트를 추가합니다:
HStack {
Image(systemName: "globe")
Text("Hello, world!")
}
Flutter는 HStack이 아닌 Row를 사용합니다:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(CupertinoIcons.globe),
Text('Hello, world!'),
],
),
Row 위젯은 children 매개변수에 List<Widget>이 필요합니다.
mainAxisAlignment 프로퍼티는 여분의 공간이 있는 자식들을 배치하는 방법을 Flutter에 알려줍니다.
MainAxisAlignment.center는 자식을 축의 중앙에 배치합니다. Row의 경우 주축은 가로 축입니다.
#Aligning components vertically
다음 예제는 위의 예제를 기반으로 합니다.
SwiftUI에서는 VStack을 사용하여 컴포넌트를 수직으로 배치합니다.
VStack {
Image(systemName: "globe")
Text("Hello, world!")
}
Flutter는 이전 예제와 동일한 Dart 코드를 사용하지만 Row를 Column으로 바꾼다는 점이 다릅니다:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(CupertinoIcons.globe),
Text('Hello, world!'),
],
),
출처: https://docs.flutter.dev/get-started/flutter-for/swiftui-devs#ui-basics
'플러터 > 플러터 개념' 카테고리의 다른 글
[Day6] UI Basics 3 - Flutter for SwiftUI Developers 번역 (0) | 2023.11.09 |
---|---|
[Day5] UI Layouts in Flutte 2 - Flutter for SwiftUI Developers 번역 (1) | 2023.11.09 |
[Day4] UI Layouts in Flutte 1 - Flutter for SwiftUI Developers 번역 (0) | 2023.11.08 |
[Day3] UI Basics 2 - Flutter for SwiftUI Developers 번역 (0) | 2023.11.07 |
[Day1] Views vs Widgets - Flutter for SwiftUI Developers 번역 (2) | 2023.11.06 |