Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make width of view equal to superview in SwiftUI

Tags:

ios13

swiftui

I have Button

enter image description here

struct ContentView : View {     var body: some View {         HStack {             Button(action: {}) {                 Text("MyButton")                     .color(.white)                     .font(Font.system(size: 17))             }             .frame(height: 56)             .background(Color.red, cornerRadius: 0)         }     } } 

But I want to pin it to supreview's edges (trailing to superview's trailing and leading). Like this:

enter image description here

HStack doesn't help me, and it's expecting. Fixed frame or width equals UIScree.size are not flexible solutions.

like image 962
Argas Avatar asked Jun 08 '19 16:06

Argas


People also ask

How do I change the width of a screen in SwiftUI?

To make a SwiftUI view take all available width, we use . frame() modifier with maxWidth and maxHeight set to .

How do I make buttons the same size in SwiftUI?

SwiftUI makes it easy to create two views that are the same size, regardless of whether you want the same height or the same width, by combining a frame() modifier with fixedSize() – there's no need for a GeometryReader or similar.

How do I make a SwiftUI view smaller?

By default SwiftUI's views take up only as much space as they need, but if you want that to change you can use a frame() modifier to tell SwiftUI what kind of size range you want to have.

How do I fill a SwiftUI view?

Luckily for us SwiftUI makes this very easy to do. TLDR: To make a view fill the screen or parent view, you can set the maxHeight and maxWidth to . infinity when using the frame view modifier.


1 Answers

You need to use .frame(minWidth: 0, maxWidth: .infinity) modifier

Add the next code

        Button(action: tap) {             Text("Button")                 .frame(minWidth: 0, maxWidth: .infinity)                 .background(Color.red)         }         .padding([.leading, .trailing], 20) 

Padding modifier will allow you to have some space form the edge.

Keep in mind that the order of modifiers is important. Because modifiers are actually functions that are wrapping the view bellow(they do not change a properties of views)

like image 89
DenFav Avatar answered Sep 22 '22 09:09

DenFav