플러터/플러터 개념7 [Day7] UI Layouts in Flutte 3 - Flutter for SwiftUI Developers 번역 [Day7] UI Layouts in Flutte 3 - Flutter for SwiftUI Developers 번역 [목차] 1.기본위젯 2.머티리얼 위젯 3.Container 4.GridView 5.ListView 6.Stack 7.Card 8.ListTile Common layout widgets Flutter에는 다양한 레이아웃 위젯 라이브러리가 있습니다. 다음은 가장 일반적으로 사용되는 몇 가지 위젯입니다. 전체 목록을 나열하여 사용자에게 부담을 주기보다는 가능한 한 빨리 시작하고 실행할 수 있도록 하려는 의도입니다. 사용 가능한 다른 위젯에 대한 자세한 내용은 Widget catalog를 참조하거나 API reference 문서 의 검색창을 사용하세요. 또한 API 문서의 위젯 페이지에서 필요.. 2023. 11. 10. [Day6] UI Basics 3 - Flutter for SwiftUI Developers 번역 [Day6] UI Basics 3 - Flutter for SwiftUI Developers 번역 목차 * Navigating between pages * Manually pop back * Navigating to another app Navigation 이 부분에서는 앱의 페이지를 어떻게 이동하는지 설명합니다. 삽입(push)과 제거(pop) 메커니즘 등에 관해서 설명합니다. Navigating between pages(페이지간 탐색) 개발자는 내비게이션 라우트라(navigation routes)고 불리는 다양한 페이지들로 iOS앱과 macOS앱을 구축합니다. SwiftUI에서 NavigationStack이 페이지들의 스택을 표현합니다. 아래 예제에서 사람들의 목록을 나타내는 앱을 생성합니다. 사람의.. 2023. 11. 9. [Day5] UI Layouts in Flutte 2 - Flutter for SwiftUI Developers 번역 [Day5] UI Layouts in Flutte 2 - Flutter for SwiftUI Developers 번역 Lay out multiple widgets vertically and horizontally 가장 일반적인 레이아웃 패턴 중 하나는 위젯을 세로 또는 가로로 배열하는 것입니다. Row 위젯을 사용하여 위젯을 가로로 정렬하고 Column 위젯을 사용하여 위젯을 세로로 정렬할 수 있습니다. [요점] - Row과 Column은 가장 일반적으로 사용되는 두 가지 레이아웃 패턴입니다. - Row과 Column은 각각 자식 위젯의 리스트(List)를 받습니다. - 자식 위젯(List)은 그 자체로 Row, Column 또는 기타 복잡한 위젯이 될 수 있습니다. - Row과 Column이 자식 위젯.. 2023. 11. 9. [Day4] UI Layouts in Flutte 1 - Flutter for SwiftUI Developers 번역 [Day4] UI Layouts in Flutte 1 - Flutter for SwiftUI Developers 번역 Layouts in Flutter [1] [요점] 1.위젯은 UI를 빌드하는 데 사용되는 클래스입니다. 2.위젯은 레이아웃과 UI 요소 모두에 사용됩니다. 3.간단한 위젯을 구성하여 복잡한 위젯을 빌드할 수 있습니다. Flutter 레이아웃 메커니즘의 핵심은 위젯입니다. Flutter에서는 거의 모든 것이 위젯이며, 심지어 레이아웃 모델도 위젯입니다. Flutter 앱에서 볼 수 있는 이미지, 아이콘, 텍스트는 모두 위젯입니다. 하지만 눈에 보이는 위젯을 arrange(배열), constrain(제약) 및 배치를 담당하는 Row, Columns 및 grid와 같이 눈에 보이지 않는 것들도.. 2023. 11. 8. [Day3] UI Basics 2 - Flutter for SwiftUI Developers 번역 [Day3] UI Basics 2 - Flutter for SwiftUI Developers 번역 목차 - Displaying a list view - Displaying a grid - Responsive and adaptive design - Managing state - Animations #Displaying a list view SwiftUI에서는 List 기본 컴포넌트를 사용하여 item의 순서(시퀀스)를 표시합니다. 모델 객체의 시퀀스를 표시하려면 사용자가 모델 객체를 식별할 수 있는지 확인해야 합니다. 객체를 식별 가능하게 만들려면 Identifiable(식별 가능 프로토콜)을 사용합니다. struct Person: Identifiable { var name: String } var per.. 2023. 11. 7. [Day2] UI Basics 1 - Flutter for SwiftUI Developers 번역 [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.. 2023. 11. 7. [Day1] Views vs Widgets - Flutter for SwiftUI Developers 번역 [Day1] Views vs Widgets - Flutter for SwiftUI Developers 번역 2023.11.06 월 #Views vs. Widgets SwiftUI는 UI 컴포넌트를 뷰로 표현합니다. 수정자를 사용하여 뷰를 구성합니다. Text("Hello, World!") // 2023. 11. 6. 이전 1 다음
