Apply modifier to VStack inner views

Question

I want to create a ViewModifier, which when applied to a VStack it makes its style look like a List inside a Form, as presented in the image below. I have multiple custom scenarios where Lists don't behave as I need them to, reason why I need this.

To recreate the image I used to following code (I actually used TextFields, but in the example Texts will do)

Form {
    Section {
        List {
            Text("Group name")
            Text("Group hashtags")
            Text("Group description")
        }
    }
}

I know how to create modifiers for specific views, but I don't know how to retrieve the list of inner views inside the VStack in order to process them. Once I can retrieve them, I will need to apply a leading padding for the whole content, and place a divider between all views.

Of course I can already do this manually, but a modifier would be better as I can apply all the styling there, maybe also rounding the corners and applying the outer padding.

The final result should look like this:

VStack {
    Text("Group name")
    Text("Group hashtags")
    Text("Group description")
}
.modifier(ListStyleModifier())

Why the -1? I have seen multiple people having this problem. — Liviu
– Liviu, Commented Oct 16, 2021 at 22:26
There doesn't seem to be any way to enumerate the individual views inside something like a VStack. In terms of the idea of adding a style modifier, you could, for example, use the modifier to inject an environment key that would describe the style type, but you'd need custom components inside the stack to respond to them. That solution also doesn't give one access to the index of the item, making it impossible to do things like style the top and bottom items differently. This type of thing seems to be an uphill battle in SwiftUI (right now). — jnpdx
– jnpdx, Commented Oct 17, 2021 at 4:29

andrewbuilder · Accepted Answer · 2021-10-20 14:14:54Z

-1

I'd accept the advice of @jnpdx and for the current moment in time, use this...

VStack {
    Text("Group name")
        .modifier(ListStyleModifier())
    Text("Group hashtags")
        .modifier(ListStyleModifier())
    Text("Group description")
        .modifier(ListStyleModifier())
}

answered Oct 20, 2021 at 14:14

andrewbuilder

3,8242 gold badges27 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vaisakh · Accepted Answer · 2021-10-23 22:49:15Z

-1

Can you try like this, in below approach also single modifier will be there. I will also accept @jnpdx advice.

 VStack {
        Text("Group name")
        Divider()
        Text("Group hashtags")
        Divider()
        Text("Group description")
    }
    .modifier(CustomViewModifier())

// MODIFIER
struct CustomViewModifier: ViewModifier {
func body(content: Content) -> some View {
   content
    .padding()
    .frame(maxWidth: .infinity)
    .background(Color(.lightGray))
    .cornerRadius(12)
    .padding()
  }
}

answered Oct 23, 2021 at 22:49

Vaisakh

2,9174 gold badges30 silver badges44 bronze badges

Collectives™ on Stack Overflow

Apply modifier to VStack inner views

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related