Passing Variables into other Variables and across files with SwiftUI - ipados

I want this file(file2) to revvieve edge input results of file1, modify them as desired then send them along to file 3 (charts) for realtime feedback. how do I pass variables into other variables as well across files while keeping the information live and modifiable?
Paste bin: Paste Bin Folder
`
/*
I want this file(file2) to revvieve edge input results of file1, modify them as desired then send them along to file 3 (charts) for realtime feedback. how do I pass variables into other variables as well across files while keeping the information live and modifiable?
*/
import PlaygroundSupport
import Foundation
import SwiftUI
import UniformTypeIdentifiers
struct sliderHalf: View {
#State private var showingPopover = false
#State private var edge = 50.0
#State private var math = 50.0
#State private var physics = 50.0
#State private var isEditing = false
var body: some View {
VStack(alignment: .leading) {
Divider()
VStack(alignment: .leading) {
Button {
showingPopover = true
} label: {
ZStack(alignment: .leading){
RoundedRectangle(cornerRadius: 4.0)
.aspectRatio(4.5, contentMode: ContentMode.fit)
.shadow(radius: 3)
.foregroundColor(.blue)
HStack(alignment: .center){
Image("Hornet").resizable()
.aspectRatio(contentMode: .fit).padding(.leading, 2).padding(.trailing, 2)
.frame(
maxWidth: 50,
maxHeight: 50, alignment: .leading).shadow(radius: 3)
Text("Lab Math")
}.foregroundColor(.white)
// Label("Overlay HUD", systemimage: "cloud")
// .foregroundColor(.white)
.padding(.leading, 2)
}
.buttonStyle(.plain)
.popover(isPresented: $showingPopover) {
VStack(alignment: .leading){
Text("Crystalline")
.font(.subheadline)
Text("Proportional")
.font(.subheadline)
Text("Congruent")
.font(.subheadline)
Divider()
Text("Edge")
.font(.subheadline)
VStack(alignment: .center){
Slider(
value: $edge,
in: 0...100,
onEditingChanged: { editing in
isEditing = editing
}
)
Text("\(edge)")
.foregroundColor(isEditing ? .yellow : .white)
}
Text("Math")
.font(.subheadline)
VStack(alignment: .center){
Slider(
value: $math,
in: 0...100,
onEditingChanged: { editing in
isEditing = editing
}
)
Text("\(math)")
.foregroundColor(isEditing ? .yellow : .white)
}
Text("Physics")
.font(.subheadline)
VStack(alignment: .center){
Slider(
value: $physics,
in: 0...100,
onEditingChanged: { editing in
isEditing = editing
}
)
Text("\(physics)")
.foregroundColor(isEditing ? .yellow : .white)
}
} .frame(width: 300, height: 400) .shadow(radius: 3)
.padding(5)
.background(Color.blue.opacity(1.0))
// .padding()
} .foregroundColor(.white)
} .frame(
maxWidth: 200,
maxHeight: .infinity, alignment: .topLeading).padding(8)
}
HStack(alignment: .top){
VStack(alignment: .leading){
Text("Legend")
.italic()
Divider().frame(width:100)
VStack(alignment: .leading){
Text("File 1")
.font(.subheadline)
VStack(alignment: .leading){
RoundedRectangle(cornerRadius: 2.0)
.aspectRatio(1, contentMode: ContentMode.fill)
.shadow(radius: 3)
.shadow(radius: 3)
.foregroundColor(.indigo)
}.frame(maxWidth: 10, maxHeight: 10, alignment: .topLeading)
}
Text("File 2")
.font(.subheadline)
VStack(alignment: .leading){
VStack(alignment: .leading){
RoundedRectangle(cornerRadius: 2.0)
.aspectRatio(1, contentMode: ContentMode.fill)
.shadow(radius: 3)
.shadow(radius: 3)
.foregroundColor(.brown)
}.frame(maxWidth: 10, maxHeight: 10, alignment: .topLeading)
}
Text("File 3")
.font(.subheadline)
VStack(alignment: .leading){
VStack(alignment: .leading){
RoundedRectangle(cornerRadius: 2.0)
.aspectRatio(1, contentMode: ContentMode.fill)
.shadow(radius: 3)
.shadow(radius: 3)
.foregroundColor(.black)
}.frame(maxWidth: 10, maxHeight: 10, alignment: .topLeading)
}
}
}.padding()
}.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading).background(Color.brown)
}
}
`
DART Edge Live Data Passing and Editing Interface
I have tried other methods to pass data that cater to specific scenarios such as pdf rendering or grabbing image of the day, etc but I need something specific to math and science where variables can be manipulated live while updating other variables. I’m looking for the most optimal method to pass and manipulate data so I can pass the whole math lab via a scenario down the road such as cloud scaling. If it is specific to math or science I don’t quite have SwiftUI down with things like: State, Static, ObservableObject, Object, Published, etc.
I am developing solely on iPad Pro 6th gen Swift Playgrounds.

Related

Limit the number of dots in Page Tab View Swiftui

I am trying to use the PageTabview option to allow a user to move through a series of pages whose data is coming from a JSON file. I want to be able to limit the number of visible dots to 5 or 6 even if there are many values in the field. What I don't want is to have 25 dots if there are twenty-five values in the field. How would I do that? I want to be able to show indicator like an arrow that tells the user there is more to come...Thank you.
My code is below:
struct TopicsExperienceCards: View {
#Binding var closeExperience: Bool
let etype: EItype
var body: some View {
//start of content of zstack layout
ZStack {
VStack(spacing: 20) {
HStack{
Rectangle()
.fill(Color.white)
.frame(width: 300, height: 1, alignment: .center)
Spacer()
Button(action: {
closeExperience = false })
{
Image(systemName:"xmark")
.foregroundColor(Color(etype.accentcolor))
.padding()
}
} //HSTACK
TabView {
ForEach(etype.experience,id: \.self) { item in
// Display the content of a card //
VStack (alignment:.center, spacing:0){
Text(item)
.padding()
.frame(width:300, height:300, alignment:.center)
Divider()
Spacer()
Text("Room for an image")
Spacer()
Spacer()
}//VSTACK
//End of display of content of the card //
} //: FOREACH
} //: TABVIEW
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
.onAppear {
setupAppearance() }
} //VSTACK
} //: ZStack
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
.background(Color.white)
.overlay(
RoundedRectangle(cornerRadius: 16)
.strokeBorder()
.foregroundColor(Color(etype.accentcolor)))
.cornerRadius(16.0)
.padding()
}
}
struct TopicsExperienceCards_Previews: PreviewProvider {
static let etypes: [EItype] = Bundle.main.decode("eibasestructure.json")
static var previews: some View {
TopicsExperienceCards(closeExperience:.constant(true),etype:etypes[1])
}
}
enter image description here
System dots view is limited to around 10 dots, maybe depending on the device. You can't change this value.
Instead of that you can hide system one, and create your own view with dots. As an example you can follow this article, so at the end you'll have something like this:
#State var currentIndex = 0
var body: some View {
//start of content of zstack layout
ZStack {
printUI(currentIndex)
VStack(spacing: 20) {
HStack{
Rectangle()
.fill(Color.white)
.frame(width: 300, height: 1, alignment: .center)
Spacer()
Button(action: {
closeExperience = false })
{
Image(systemName:"xmark")
.foregroundColor(Color.red)
.padding()
}
} //HSTACK
TabView(selection: $currentIndex.animation()) {
ForEach(etype.experience.indices,id: \.self) { i in
let item = etype.experience[i]
// Display the content of a card //
VStack (alignment:.center, spacing:0){
Text(item)
.padding()
.frame(width:300, height:300, alignment:.center)
Divider()
Spacer()
Text("Room for an image")
Spacer()
Spacer()
}//VSTACK
//End of display of content of the card //
} //: FOREACH
} //: TABVIEW
.tabViewStyle(PageTabViewStyle())
.onAppear {
setupAppearance()
}
Fancy3DotsIndexView(numberOfPages: etype.experience.count, currentIndex: currentIndex)
.padding()
.background(Color.green)
.clipShape(Capsule())
} //VSTACK
} //: ZStack
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
.background(Color.white)
.overlay(
RoundedRectangle(cornerRadius: 16)
.strokeBorder()
.foregroundColor(Color.red)
)
.cornerRadius(16.0)
.padding()
}
Result:

How fix Stacks to top and bottom using SwiftUI

how are you ?
I need to fit all the content of first zstack (I use two zstack to add a transparent layer over first zstack background) to window size and if the user scroll down, shows additional stacks added below.
I add Spacer() to push the last HStack to bottom and before stacks to the top (in middle must be a dynamic blank space) of window without result.
Can help me please ?
Thanks
ScrollView(.vertical) {
ZStack {
bgColors[weatherDescription]
ZStack {
LinearGradient(gradient: Gradient(colors: [Color(hex: 0x212121, alpha: 0.5), Color(hex: 0x212121, alpha: 0.5)]), startPoint: .top, endPoint: .bottom)
VStack(alignment: .leading) {
Text("Hello!")
.foregroundColor(Color.white)
.fontWeight(.heavy)
.font(.largeTitle)
.padding(.top, 20)
.padding(.bottom, 1)
Text("Hello!")
.foregroundColor(Color.white)
.font(.title)
.padding(.bottom, 1)
Text("Hello!")
.foregroundColor(Color.white)
.font(.title3)
.padding(.bottom, 20)
HStack(alignment: .center, content: {
Text("TEXT1")
.foregroundColor(Color.white)
.font(.title3).fontWeight(.bold)
.frame(maxWidth: .infinity, alignment: .leading)
Text("TEXT2")
.foregroundColor(Color.white)
.font(.title3).fontWeight(.bold)
.frame(maxWidth: .infinity, alignment: .trailing)
}).frame(maxWidth: .infinity)
Spacer()
HStack(alignment: .center, spacing: 30, content: {
Text("Text1")
.foregroundColor(Color.white)
.font(.system(size: 90))
Text("Text2")
.foregroundColor(Color.white)
.font(.caption)
.animation(.easeIn)
}).frame(width: .infinity, alignment: .bottom)
}.padding() // vstack
}.edgesIgnoringSafeArea(.top) // zstack
}.edgesIgnoringSafeArea(.top) // zstack
// ADITIONALS STACKS VISIBLES ONLY WHEN SCROLL DOWN
}
You just used so many codes, I edited them to less code, here for example you just used so many foregroundColor which you can see in my code I used just one time on parent View.
Also we can not use ScrollView like you used it! ScrollView needs Content to Scroll, you have less Content.
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
LinearGradient(gradient: Gradient(colors: [Color.red, Color.purple]), startPoint: .top, endPoint: .bottom)
.ignoresSafeArea()
VStack(alignment: .leading, spacing: 30) {
Text("Hello!")
.fontWeight(.heavy)
.font(.largeTitle)
Text("Hello!")
.font(.title)
Text("Hello!")
.font(.title3)
HStack {
Text("TEXT1")
.font(.title3)
.fontWeight(.bold)
Spacer()
Text("TEXT2")
.font(.title3)
.fontWeight(.bold)
}
Spacer()
HStack {
Text("Text1")
.font(.system(size: 90))
Spacer()
Text("Text2")
.font(.caption)
}
}
.padding()
}
.foregroundColor(Color.white)
.animation(.easeIn)
}
}

ScrollView text alignment SwiftUI

I have a vertical ScrollView with a ForEach loop that has HStack's inside with Text, Image, and Two Text's. I'd like to keep each row's items in alignment with each other. I've attempted to wrap in a VStack with alignment .leading but did nothing. The issue I'm having is the text doesn't line up. Still very new to SwiftUI so any help would be appreciated.
ScrollView(.vertical) {
ForEach(self.daily.forecast, id: \.date) { forecast in
HStack (spacing : 10){
Text(forecast.date ?? "")
.fontWeight(.bold)
Spacer()
RequestImage(Url("IMAGE_URL"))
.aspectRatio(contentMode: .fit)
.frame(width: 30, height: 30)
.clipped()
Spacer()
Text("\(forecast.maxTemp)")
.fontWeight(.bold)
Text("\(forecast.minTemp)")
.fontWeight(.bold)
}
}
}
.padding(.all, 15)
.onAppear() {
authorize {_ in
loadForecast()
}
}
UPDATED:
I was able to get a bit closer but things still aren't aligned to where I'd like them to be.
ScrollView(.vertical) {
ForEach(self.daily.forecast, id: \.date) { forecast in
HStack (spacing : 10){
Text(date)
.font(.title3)
.fontWeight(.bold)
.frame(minWidth: 45)
Spacer()
RequestImage(Url("IMAGE_URL"))
.aspectRatio(contentMode: .fit)
.frame(width: 35, height: 35)
.frame(minWidth: 50)
.clipped()
Spacer()
Text(maxTemp)
.font(.title3)
.fontWeight(.bold)
.frame(minWidth: 45)
Text(minTemp)
.font(.title3)
.fontWeight(.bold)
.foregroundColor(Color.secondary)
.frame(minWidth: 45)
}
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
}
}
.padding(.all, 15)
.onAppear() {
authorize {_ in
loadForecast()
}
}
Here is a demo of possible solution. Prepared with Xcode 12.4 / iOS 14.4
struct DemoWeatherLayout: View {
private var dayOfTheWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sut"]
var body: some View {
ScrollView {
VStack {
ForEach(dayOfTheWeek, id: \.self) {
WeatherRowView(day: $0,
icon: ["sun.max", "cloud.sun", "cloud", "cloud.snow"].randomElement()!,
low: Array(-5..<0).randomElement()!,
high: Array(1..<15).randomElement()!)
}
}.padding()
}
}
}
struct WeatherRowView: View {
var day: String
var icon: String
var low: Int
var high: Int
var body: some View {
HStack {
Text(day)
.frame(maxWidth: .infinity, alignment: .leading)
Image(systemName: icon)
.frame(maxWidth: .infinity, alignment: .leading)
HStack {
Text("+XXº").foregroundColor(.clear)
.overlay(Text(String(format: "%+d", low)), alignment: .leading)
Text("+XXº").foregroundColor(.clear)
.overlay(Text(String(format: "%+d", high)), alignment: .leading)
}
}
}
}
Three suggestions:
add alignment parameter to HStack:
HStack(alignment: .lastTextBaseline, spacing: 10) { ... //others options: .top, .center, .firstTextBaseline...
Add minLength parameter to Spacer:
Spacer(minLength: 0) but with spacing: 10 in HStack it is a bit redundant. You can remove spacing: 10 for Spacer(minLength: 10)
Add a Spacer(minLength: 0) at the end after Text("\(forecast.minTemp)").fontWeight(.bold)
I'm going to accept #Asperi answer as correct. The UI has indeed changed since to better fit said labels etc. Appreciate everyone's else. The code is very much ugly but works. Not sure if it's 100% correct.
HStack (spacing: 10){
Text(date)
.font(.title3)
.fontWeight(.bold)
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
Spacer()
RequestImage(Url("IMAGE_URL_HERE"))
.aspectRatio(contentMode: .fit)
.frame(width: 35, height: 35)
.frame(minWidth: 55)
.clipped()
Spacer()
Text(maxTemp)
.font(.title3)
.fontWeight(.bold)
.frame(minWidth: 50)
.background(Color.orange)
.cornerRadius(5)
Text(minTemp)
.font(.title3)
.fontWeight(.bold)
.frame(minWidth: 50)
.background(Color.blue)
.cornerRadius(5)
}

How to make "the smooth table" in swiftUI

I have android screen and i want copy it to swiftui ios screen.
Android:
iOS:
But i try to make it in swiftui. How you see text dont have baseline and gravity parameters, how i make it in android. Help me please make equivalent simple screen.
My swiftui code:
struct WeatherView: View {
var weather: WeatherMainModel
var body: some View {
VStack {
VStack {
Text("Description: \(weather.weather[0].component3())")
Text("Visibility: \(weather.visibility) meters")
Text("Main: \(weather.weather[0].main)")
}
VStack {
Text("Temperature Data")
HStack {
VStack {
HStack {
Text("Temperature: \(temperatureString(value: weather.mainData.temperature))")
.font(.system(size: 15))
Spacer()
}
HStack {
Text("Temperature fels like: \(temperatureString(value: weather.mainData.temperatureFeelsLike))")
.font(.system(size: 15))
Spacer()
}
}
VStack {
HStack {
Text("Temperature max: \(temperatureString(value: weather.mainData.temperatureMax))")
.font(.system(size: 15))
Spacer()
}
HStack {
Text("Temperature min: \(temperatureString(value: weather.mainData.temperatureMin))")
.font(.system(size: 15))
Spacer()
}
}
}.padding(.horizontal, 5)
}.cornerRadius(10)
.overlay(
RoundedRectangle(cornerRadius: 10).stroke(Color.gray, lineWidth: 1)
)
Spacer()
}.padding(.horizontal)
}
private func temperatureString(value: Float) -> String {
return String(format: "%.2f", value)
}
}
Your second screen texts differ from first one, but I assume you wanted something like below (of corse padding/spacing/fonts can be tuned)
Prepared with Xcode 12.1 / iOS 14.1
struct DemoView: View {
var body: some View {
VStack {
Text("Description")
Text("Visibility")
Text("main")
VStack {
Text("Temperature Data")
HStack(alignment: .top) {
Text("Temperature: 38 dsa das das das da sd")
.frame(maxWidth: .infinity, alignment: .leading)
Text("Temperature Max: 38")
.frame(maxWidth: .infinity, alignment: .leading)
}
HStack(alignment: .top) {
Text("Temperature fels like: 38")
.frame(maxWidth: .infinity, alignment: .leading)
Text("Temperature Min: 38")
.frame(maxWidth: .infinity, alignment: .leading)
}
}.padding(.top)
Spacer()
}.padding(.horizontal, 8)
}
}

Edit mode in a List

Updated with working code.
I've implemented a List in my app with Edit mode, so I can move the rows by dragging a row handle. That works fine, but doesn't look too good, since the move icon is placed under the content of the row (see screen dump). And that is because Edit mode makes room for a delete button.
Is there a way to hide elements in the row when you're in Edit mode?
The code for the View is:
import SwiftUI
import Combine
import DateHelper
struct EggList: View {
#EnvironmentObject var egg : Egg
#State private var eggs = Egg.all()
#State private var editMode: EditMode = .inactive
var body: some View {
NavigationView {
List {
Image("Pantanal")
.resizable()
.frame(height: 250)
ForEach(eggs) { eggItem in
NavigationLink(destination: EggDayList(eggItem: eggItem)) {
CellRow(eggItem: eggItem)
.environment(\.editMode, self.$editMode)
}
}
.onDelete(perform: delete)
.onMove(perform: move)
}
.navigationBarTitle(Text("Eggs"), displayMode: .inline)
.navigationBarItems(leading: EditButton(), trailing: NavigationLink(destination: Settings()){
Text("Add Egg")})
.environment(\.editMode, self.$editMode)
}
}
func delete(at offsets: IndexSet) {
eggs.remove(atOffsets: offsets)
}
func move(from source: IndexSet, to destination: Int) {
eggs.move(fromOffsets: source, toOffset: destination)
}
}
struct CellRow: View {
let eggItem: Egg
#Environment(\.editMode) private var editMode
var body: some View {
HStack(spacing: 8) {
Image(eggItem.species)
.resizable()
.frame(width: 48, height: 48)
.clipShape(Circle())
VStack(alignment: .leading, spacing: 0) {
Text("\(eggItem.species)")
.font(.footnote)
.lineLimit(1)
.padding(.top, -4)
Text("id-"+String(eggItem.eggNumber))
.font(.footnote)
.lineLimit(1)
.padding(0)
Text("\(eggItem.layDate.string(with: "dd-MM-yy"))")
.font(.footnote)
.lineLimit(1)
.padding(.bottom, -7)
}.frame(width: 90, alignment: .leading)
VStack(spacing: 2) {
Text("days")
.font(.footnote)
.padding(.top, 12)
Image(systemName: "\(eggItem.diffToday)"+".circle")
.resizable()
.frame(width: 40, height: 30)
.padding(.bottom, 12)
.foregroundColor(.red)
}.frame(width: 50, alignment: .leading)
VStack(spacing: 0) {
Text("prediction")
.font(.footnote)
.padding(.top, 14)
Text(formatVar1(getal: eggItem.calcWeights[eggItem.daysToPip-1].prediction)+"%")
.font(.title)
.padding(.bottom, 12)
}.frame(width: 80, alignment: .leading)
if !(self.editMode?.wrappedValue.isEditing ?? false) {
VStack(alignment: .leading, spacing: 0) {
Text("INC")
.font(.footnote)
.lineLimit(1)
.padding(.top, -4)
Text("37.3")
.font(.footnote)
.lineLimit(1)
.padding(0)
Text("30%")
.font(.footnote)
.lineLimit(1)
.padding(.bottom, -7)
}
.frame(width: 30, alignment: .leading)
}
Spacer()
VStack(alignment: .trailing, spacing: 0) {
Image(systemName: "info.circle")
.resizable()
.frame(width: 22, height: 22)
.foregroundColor(.accentColor)
.onTapGesture(count: 1) {
print("action")
}
}
}
.listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
.frame(height: 46, alignment: .leading)
.padding(0)
}
}
Your problem is, that the editMode variable does not change when you press the EditButton. No matter in what state, in your CellRow the editMode variable always returns .inactive. I don't know why, it could be a bug.
I had the same problem, but I found this question here: SwiftUI - How do I make edit rows in a list?, which uses a workaround by passing the editMode environment value into a private #State variable, which seems to work perfect.
So here is what you need to do:
Add #State private var editMode: EditMode = .inactive to your EggList view.
This creates a state variable that from now on holds the editing mode.
Add .environment(\.editMode, self.$editMode) somewhere after the .navigationBarItems(...).
This sets the environment variable editMode in EggList to a binding of the state variable above.
Add .environment(\.editMode, self.$editMode) directly after the CellRow(...) initializer.
This inserts the state variable editMode into the environment of CellRow, where it can be accessed via #Environment(\.editMode).
Now you can just wrap one of your elements in an if-statement to hide it when in editing mode:
if !self.editMode?.wrappedValue.isEditing ?? true {
VStack(alignment: .leading, spacing: 0) {
Text("INC")
.font(.footnote)
.lineLimit(1)
.padding(.top, -4)
Text("37.3")
.font(.footnote)
.lineLimit(1)
.padding(0)
Text("30%")
.font(.footnote)
.lineLimit(1)
.padding(.bottom, -7)
}
.frame(width: 30, alignment: .leading)
}
or, if you prefer, continue using the isHidden extension from LuLuGaGa:
.isHidden(self.editMode?.wrappedValue.isEditing ?? false)
Add a little extension to View:
extension View {
func isHidden(_ hidden: Bool) -> some View {
if hidden {
return AnyView(self.hidden())
} else {
return AnyView(self)
}
}
}
Next add #Enviroment to your CellRow:
#Environment(\.editMode) var editMode: Binding<EditMode>?
You will be able to add a modifier:
.isHidden(editMode?.wrappedValue.isEditing ?? false)
to one of the stacks that you think is the least important.