SwiftUI 新屬性MenuPickerStyle 教程含源碼

實戰需求

SwiftUI 新屬性MenuPickerStyle，允許Picker在菜單中顯示其選項。這種風格將在主頁面進行遮蓋處理。本文將演示一下MenuPickerStyle的基礎使用

本文價值與收獲

看完本文后，您將能夠作出下面的界面

新屬性MenuPickerStyle

看完本文您將掌握的技能

掌握Picker基礎使用
掌握MenuPickerStyle基礎使用
實現菜單彈出效果

基礎知識

MenuPickerStyle

一種選擇器樣式，當用戶按下按鈕時將選項顯示為菜單，而當嵌套在較大菜單中時將顯示為子菜單。

struct MenuPickerStyle

總覽

如果有五個以上的選項，請使用此樣式。少于五個選項時，請考慮使用。InlinePickerStyle按鈕本身指示所選的選項。您可以在選項集中包含其他控件，例如自定義選項列表的按鈕。要將這種樣式應用于選擇器或包含選擇器的視圖，請使用修飾符。pickerStyle(_??

代碼

import SwiftUI

struct ContentView: View {
    var body: some View {
        Picker_Intro()
    }
}

struct Picker_Intro : View {
    @State private var fState = 1
    @State var items = ["李白","杜甫","蘇軾","王維"]
    var body: some View {
        VStack(spacing: 20) {
            Text("SwiftUI Picker")
            .font(.largeTitle)
            Text("MenuPickerStyle 效果")
                .font(.title)
                .foregroundColor(.gray)
           
            Picker(selection: $fState, label: Text("選擇詩人:\(self.items[self.fState])")) {
                ForEach(self.items.indices){index in
                    Text("\(self.items[index])").tag(index)
               
                }
                
            }.pickerStyle(MenuPickerStyle())
            
        }
        
    }
    
}

技術交流

QQ:3365059189
SwiftUI技術交流QQ群:518696470

本文鏈接：https://blog.csdn.net/iCloudEnd/article/details/107817969

智能推薦

SwiftUI Scrollview sheet組合使用（教程含源碼）

實戰需求 SwiftUI Scrollview sheet組合使用本文價值與收獲看完本文后，您將能夠作出下面的界面看完本文您將掌握的技能掌握 Identifiable 掌握 UUID 掌握 ObservableObject 掌握 GridItem 掌握 ScrollView 掌握 LazyVGrid 掌握 onTapGesture 基礎知識 Identifiable 一類類型，其實例持有具...

SwiftUI sheet 和 form picker組合使用（教程含源碼）

實戰需求 SwiftUI sheet 和 form 組合使用本文價值與收獲看完本文后，您將能夠作出下面的界面看完本文您將掌握的技能掌握 sheet 掌握 form 掌握 picker 基礎知識 sheet 在給定條件為真時顯示工作表。 isPresented 是否顯示工作表的綁定。 onDismiss 工作表關閉時執行的關閉。 content 返回表內容的閉包。 Form 用于對用于數據輸...

SwiftUI Toolbar如何使用NavigationLink 教程含源碼 ToolbarItem

實戰需求 SwiftUI Toolbar如何使用NavigationLink 本文價值與收獲看完本文后，您將能夠作出下面的界面看完本文您將掌握的技能掌握 background 掌握 NavigationLink 掌握 toolbar 掌握 ToolbarItem 基礎知識 background(_:alignment:) 將給定視圖分層放置在該視圖之后。參量 b...

SwiftUI ScrollView 添加頭部圖像整合sheet （教程含源碼）

實戰需求 SwiftUI ScrollView 添加頭部圖像整合sheet 本文價值與收獲看完本文后，您將能夠作出下面的界面看完本文您將掌握的技能掌握 sheet 掌握 scrollview 掌握 background 和 GeometryReader 掌握 PreferenceKey 基礎知識 background(_:alignment:) 將給定視圖分層放置在該視圖之后。參量 bac...

SwiftUI TabView 編程切換Tab （教程含源碼）

實戰需求 SwiftUI TabView 編程切換Tab 本文價值與收獲看完本文后，您將能夠作出下面的界面看完本文您將掌握的技能掌握 NavigationView 掌握 NavigationBarHidden 掌握 TabView 基礎知識 NavigationView 用于呈現視圖堆棧的視圖，這些視圖表示導航層次結構中的可見路徑。主題創建導航視圖 init(content: () -&...