Groups style list view in swiftui

26 Views Asked by At

Hi I am trying to archive this type of UI. But after running my code I am getting lots of issue.

Here I am using list view with style GroupedListStyle(). I am taking 3 sections.

isuues I am getting

Lots of space between sections. section should have some corner radious A black color separator should be there in between two sections top portion of navigation has different color. can I make the color default to entire UI. How to change secone section back ground color as the requirement UI

Expected UI enter image description here

Currently developed UI enter image description here

import SwiftUI

struct CurrencyData: Identifiable {
    var id = UUID()
    var date: String
    var currency: String
}

struct CurrencyHistoryView: View {
    var dataArray: [CurrencyData] = [
        CurrencyData(date: "22Aug-3sept", currency: "1365"),
        CurrencyData(date: "23Aug-3sept", currency: "1475"),
        CurrencyData(date: "24Aug-3sept", currency: "1585"),
        CurrencyData(date: "25Aug-3sept", currency: "1695"),
        CurrencyData(date: "26Aug-3sept", currency: "1705"),
        CurrencyData(date: "27Aug-3sept", currency: "1815"),
        CurrencyData(date: "28Aug-3sept", currency: "1925")
    ]
    var body: some View {
        GeometryReader { _ in
            ZStack {
                Color.black
                //                ScrollViewReader { _ in
                //                    ScrollView(showsIndicators: false) {
                VStack {
                    SaudiaNavigationView(viewModel: SaudiaNavigationViewModel(isHeaderPinned: true, title: "", subTitle: "", backgroundColor: Theme.BackgroundColor.whiteBackgroundL2, shouldShowProfileDetails: true, onScrollLightColor: Theme.BackgroundColor.navigationScrollBackground, onScrollDarkColor: Theme.BackgroundColor.navigationScrollBackground, normalLightColor: Theme.BackgroundColor.whiteBackgroundL2, normalDarkColor: Theme.BackgroundColor.whiteBackgroundL2, rightButtonType: .Default, onBackButtonTap: {

                    }))
                    .frame(height: 44)
                    //                            ScrollViewReader { _ in
                    //                                ScrollView(showsIndicators: false) {
                    // Header View

                    //                        Rectangle().fill(Color.black).frame(height: 2)

                    List {
                        Section {
                            VStack(spacing: 2) {
                                VStack {
                                    Spacer()
                                    VStack {
                                        HStack(alignment: .center, spacing: 9) {
                                            SAGenericText(textString: "RUH", textColor: Color.SAColor.colorBlack100White90, textFont: SAFontConstants.getFont(for: .medium, with: .size40))
                                            Image(Theme.ImageIcon.flightIcon)
                                                .resizable()
                                                .renderingMode(.template)
                                                .frame(width: 28, height: 28, alignment: .center)
                                                .flipsForRightToLeftLayoutDirection(true)
                                            SAGenericText(textString: "DXB", textColor: Color.SAColor.colorBlack100White90, textFont: SAFontConstants.getFont(for: .medium, with: .size40))
                                        }

                                        SAGenericText(textString: "Round Trip", textColor: Theme.TextColor.textBlack70, textFont: SAFontConstants.getFont(for: .regular, with: .size16))
                                    }

                                    Spacer()
                                }
                                .frame(width: UIScreen.main.bounds.width, height: 250, alignment: .center)
                                .background(Color(UIColor.white))
                                .cornerRadius(10)
                            }
                        }
                        Section {
                            VStack {
                            VStack {
                                SAGenericText(textString: "No Flights are availabe for 23 Aug - 3 Nov", textColor: Theme.TextColor.textBlack100White90, textFont: SAFontConstants.getFont(for: .regular, with: .size16))
                                SAGenericText(textString: "Select alternative dates", textColor: Theme.TextColor.textBlack70, textFont: SAFontConstants.getFont(for: .regular, with: .size16))
                            }
                        }
                        }
                        .frame(width: UIScreen.main.bounds.width, height: 150, alignment: .center)

                        Section {
                            ForEach(dataArray) { array in
                                NavigationLink(destination: Text("")) {
                                    VStack {
                                        HStack(alignment: .center) {
                                            SAGenericText(textString: array.date, textColor: Color.SAColor.colorBlack100White90, textFont: SAFontConstants.getFont(for: .regular, with: .size14))
                                            Spacer()

                                            HStack(alignment: .bottom, spacing: 6) {
                                                SAGenericText(textString: "from SAR", textColor: Color.SAColor.colorBlack100WithWhite50, textFont: SAFontConstants.getFont(for: .regular, with: .size14))
                                                    .padding(.bottom, 1)
                                                SAGenericText(textString: array.currency, textFont: SAFontConstants.interSemiBoldLargeText!)
                                            }
                                        }
                                        .padding(.top, 5)
                                        .padding(.bottom, 10)
                                        Rectangle().fill(Color.SAColor.colorBlack55White50).frame(height: 1)
                                    }
                                }
                            }
                            .listRowSeparator(.hidden)
                            .listRowBackground(Color.white)
                        }
                    }
                    .listStyle(GroupedListStyle())
                    .environment(\.defaultMinListHeaderHeight, 0)
                    .cornerRadius(7)
                    .padding(.top, -6)
                    .listRowSeparator(.hidden)
                }
            }
            Spacer()
//                configureEditSearchButton()
                            }
                        }

Ui should be as expected. But unable to archive . Anyone please help

0

There are 0 best solutions below