How do I create this type of list?

On the Apple Watch, if you go to Settings -> Wake Screen and then scroll down to ON SCREEN RAISE SHOW LAST APP. Underneath it is a list/table where the items are grouped, the first and last items have a rounded rectangle whereas the items in the middle are just rectangles. I would like to use this UI element as well when I present the user a list that functions like a radio button list. Do you know what this UI element is called? Is it just a List but with a specific list style? Thanks.

Replies

From what I see, I just think the list is a in a Group which radius has been set to about 12 in IB.


- create a group

- in IB, define it radius as custom, value 12 (attributes inspector)

- insert the list inside

I just tried it in SwiftUI:


struct CardOrder: View {
    @State private var order = 0
  
    var body: some View {
      Group {
        List {
          HStack {
            Text("Item 0")
              .font(.system(size: 12))
              .onTapGesture {
                self.setOrder(i: 0)
            }
            
            Spacer()
            
            if(order == 0) {
              Image(systemName: "checkmark")
                .foregroundColor(Color.green)
            }
            
          }
          
          HStack {
            Text("Item 1")
              .font(.system(size: 12))
              .onTapGesture {
                self.setOrder(i: 1)
            }
            Spacer()
            
            if(order == 1) {
              Image(systemName: "checkmark")
                .foregroundColor(Color.green)
            }
          }
          
          HStack {
            Text("Item 2")
              .font(.system(size: 12))
              .onTapGesture {
                self.setOrder(i: 2)
            }
            Spacer()
            
            if(order == 2) {
              Image(systemName: "checkmark")
                .foregroundColor(Color.green)
            }
          }
        }
      }
      .cornerRadius(12)


But it didn't look any different to if I didn't put the List inside the Group.

I was not speaking of a SwiftUI design (not sur the Settings app was coded in SwiftUI).


And, so far, SwiftUI is still les flexible than Storyboard based designs.


That may be the reason.


However, everything needed seem to be present in your code.


Did you try to set the list type into

.listStyle(GroupedListStyle())
'GroupedListStyle' is unavailable in watchOS

A sure solution would be to revert to a storyboard instead of SwiftUI…


But that may not be what you want.