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