This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging

above

  • SwiftUI actual Combat – Copy wechat App (1)
  • SwiftUI Actual Combat – Copy wechat App (2)
  • SwiftUI Actual Combat – Copy wechat App (3)
  • SwiftUI Actual Combat – Copy wechat App (4)

A, goals,

Both Discover and my layouts are simple List layouts, so I’ll write them all at once today.

Second,List + NavigationLinklinkage

In SwiftUI, once you combine the two, the List will add a > icon to the child element by default, meaning you can click to view it.

You can use sections to break up the child elements into little chunks.

ListStyle(GroupedListStyle()) attribute is specified to the List component to achieve the wechat List effect.

In addition, listStyle supports the following styles:

  • DefaultListStyle
  • GroupedListStyle
  • InsetGroupedListStyle
  • InsetListStyle
  • PlainListStyle
  • SidebarListStyle

Back to the point, with a few changes, it’s easy to achieve the following effects:

Plus jump

 NavigationLink(
    destination: Text("Destination"),
    label: {
        HStack{
            Image(systemName: "text.justifyright").foregroundColor(.blue)
            Text("Circle of Friends").foregroundColor(.black)
        }
    })
Copy the code

Some of the following functions and the back of my page, most can be used before the knowledge point to achieve, here no longer do specific implementation.

I will pull out some functions or components in wechat that have not been described.

Three,sheet

SwiftUI does not have native support for this surfacing half mask, SwiftUI provides a popover mask, as shown below:

struct ModalView: View {
    
    @State var sheetIsPresented = false
    
    var body: some View {
        Button(action: {
            sheetIsPresented = true
        }, label: {
            Text("Open the mask.")
        }).sheet(isPresented: $sheetIsPresented, content: {
            ZStack{
                Rectangle().fill().foregroundColor(.blue)
                Button(action: {
                    sheetIsPresented = false
                }, label: {
                    Text("Return").foregroundColor(.white)
                })
            }
           
        })
    }
}
Copy the code
  • toButtonAdd a button.sheetProperties.
  • isPresentedParameter is used to control whether the mask layer is displayed.
  • contentWhat wraps is the contents of the mask.

Fourth, the actionSheet

SwiftUI offers this bottom-pop button,actionSheet

struct ActionSheetView: View {
    
    @State var actionSheetIsPresented = false
    
    var body: some View {
        Button(action: {
            actionSheetIsPresented = true
        }, label: {
            Text("Open the actionSheet")
        }).actionSheet(isPresented: $actionSheetIsPresented, content: {
            ActionSheet(title: Text("Print Color"), message: Text("Select a new color"), buttons: [
                    .default(Text("Black")) { print("Red") },
                    .default(Text("Green")) { print("Green") },
                    .default(Text("Blue")) { print("Blue") },
                .destructive(Text("Red")),
                    .cancel(Text("Cancel"))])})}Copy the code
  • toButtonAdd a button.actionSheetProperties.
  • isPresentedParameter to control whether the actionSheet is displayed or not.
  • withsheetThe difference is,contentMust be within theActionSheetComponents.
  • buttons:.defaultIs the normal option;.cancelIs to unselect;.destructiveIs the red font option.
  • cancelDefault is EnglishcancelIf you want to change to custom text, the content is usedTextCan.

Attached: Code address

Gitee.com/dkwingcn/we…