How create Wishlist toolbar layout? (SwiftUI foundations: Build great apps with SwiftUI)

in SwiftUI foundations: Build great apps with SwiftUI

Toolbar have navigationTitle with align leading. I try to create same layout. but it fail How was it possible?

Hello commin,

Thanks for your question and interest in the SwiftUI Foundations event! Can you please share a code snippet of your attempt to replicate this layout?

Best regards,

Richard Yeh  Developer Technical Support

this is my code. (under)

.navigationTitle("Wishlist") .navigationBarTitleDisplayMode(.inline) .toolbar { ToolbarItem(placement: .topBarTrailing) { Button { } label: { Image(systemName: "plus") } } }

Hello commin,

So you can actually simulate a navigationTitle by having the toolbar wrap a custom view that styles a Text with the style modifiers, like so:

struct ExpandedNavigationTitle: View {
    /// The title to display.
    var title: LocalizedStringKey

    var body: some View {
        HStack {
            Text(title)
                .font(.system(size: 34, weight: .medium))
                .fontWidth(.expanded)
                .bold()
                .fixedSize()
            Spacer()
        }
    }
}

#Preview {
    NavigationStack {
        Text("Hello world")
            .toolbar {
                ToolbarItem(placement: .largeTitle) {
                    ExpandedNavigationTitle(title: "Title")
                }
            }
            .toolbarTitleDisplayMode(.inlineLarge)
            .navigationTitle("Title")
    }
}

ToolbarItem(placement: .title) would also work.

Please let me know if you have further questions,

Richard Yeh  Developer Technical Support

How create Wishlist toolbar layout? (SwiftUI foundations: Build great apps with SwiftUI)
 
 
Q