- SwiftUI極簡開發
- 李智威
- 807字
- 2024-07-24 11:31:35
2.1 視圖、視圖修飾符、布局方式
在創建SwiftUI項目之前,本節先介紹SwiftUI項目模板的代碼結構。
一款應用的基礎創建過程是先基于App協議創建一個應用,然后基于Scene協議創建視圖層級結構的容器,最后在View中搭建具體的UI。項目模板的代碼結構如圖2-1所示。

圖2-1 項目模板的代碼結構
在ContentView視圖部分,代碼結構為創建一個遵循View協議的結構體,并且聲明一個遵循View協議的、具備body屬性的視圖容器,以便顯示視圖上的內容。
在圖2-1展示的示例代碼中,ContentView可以當作一個界面的框架,用于定義當前的界面。body屬性的視圖容器可以是ContentView定義的界面中顯示的內容的外層容器,body內部的元素則是界面中真實顯示的內容。接下來介紹body中的代碼,ContentView代碼塊如圖2-2所示。

圖2-2 ContentView代碼塊
在ContentView代碼塊中,可以看到有兩個視圖,分別是Image視圖和Text視圖,這是SwiftUI提供的封裝好的視圖,方便開發者快速創建圖片和文本。
Image視圖、Text視圖和其他內置的視圖,在SwiftUI框架中都被稱為視圖,如圖2-3所示。SwiftUI可以將所有用于顯示的對象元素都當作視圖來處理。

圖2-3 視圖
在SwiftUI中,視圖修飾符(Modifiers)可以對不同視圖進行修飾,例如調整圖片大小、文本大小、文本顏色等。
在上述代碼中,修飾Image視圖的imageScale(圖片縮放)修飾符可以將圖片視圖縮放至默認大小,foregroundColor(前景色)修飾符可以修改圖片視圖顯示的圖標的前景色,最外層的padding(邊距)修飾符可以將整個視圖四周進行留白處理。視圖修飾符如圖2-4所示。

圖2-4 視圖修飾符
當body屬性的視圖容器中存在多個視圖時,就需要使用布局方式(Layout)對界面中視圖的布局進行排列。VStack是一種視圖,與其他視圖不同的是,VStack也是一種布局方式,可以將內部的視圖按照垂直方向進行排布。布局方式如圖2-5所示。

圖2-5 布局方式
也可以直接修改布局方式,下面將VStack修改為HStack,HStack的效果如圖2-6所示。

圖2-6 HStack的效果
在這里,可以注意到一個細節,當容器視圖中存在多個視圖時,視圖會嚴格按照代碼的先后順序排布。如果是垂直布局,那么視圖按照代碼的先后順序從上到下排布;如果是橫向布局,那么按照代碼的先后順序從左到右排布。
- Java程序設計實戰教程
- 數據庫程序員面試筆試真題與解析
- Learning Apex Programming
- PyTorch自然語言處理入門與實戰
- Responsive Web Design with HTML5 and CSS3
- PHP 編程從入門到實踐
- Internet of Things with Intel Galileo
- 從0到1:Python數據分析
- Android開發案例教程與項目實戰(在線實驗+在線自測)
- ExtJS高級程序設計
- Internet of Things with ESP8266
- Beginning C++ Game Programming
- 微信小程序開發實戰:設計·運營·變現(圖解案例版)
- Python青少年趣味編程
- 青少年學Python(第2冊)