I have a couple of DatePickers in a view with the following code. Each DatePicker presents a digit, so "3" or "5". So for "3456" I have 4 DatePickers that can be changed individually.
struct DigitPicker: View {
var digitName: String
#Binding var digit: Int
var body: some View {
VStack {
Picker(selection: $digit, label: Text(digitName)) {
ForEach(0 ... 9) {
Text("\($0)").tag($0)
}
}.frame(width: 60, height: 110).clipped()
}
}
}
I get an error "Generic parameter 'ID' could not be inferred". So I guess the reason is that $digit must conform to Identifiable(). But how do I do that???
The compiler is resolving the ForEach using this extension:
extension ForEach where Content : View {
/// Creates an instance that uniquely identifies views across updates based
/// on the `id` key path to a property on an underlying data element.
///
/// It's important that the ID of a data element does not change unless the
/// data element is considered to have been replaced with a new data
/// element with a new identity. If the ID of a data element changes, then
/// the content view generated from that data element will lose any current
/// state and animations.
public init(_ data: Data, id: KeyPath<Data.Element, ID>, content: #escaping (Data.Element) -> Content)
}
And, as you can see, it can't infer the second argument of the init method.
You can make the second argument explicit to make the compiler happy.
ForEach(0 ... 9, id: \.self) { // identified by self
Text("\($0)").tag($0)
}
Related
I have content that is loaded in the background.
Loading is a long running task and I want to show data as soon as it's available.
My view show loaded content and a ProgressView whenever there is more content to be expected.
struct MyListView : View
{
#MyContent
var content: [MyItem]
var body: some View
{
List
{
//...show content elements
if content.hasMoreData()
{
ProgressView().task
{
await _content.load(.end)
}
}
}
}
}
I use a custom propertyWrapper to load the data.
#propertyWrapper
struct MyContent<E> : DynamicProperty
{
final class Container<E> : ObservableObject
{
var wrappedValue : [E]
}
let container: Container<E>
var wrappedValue : [E] { container.wrappedValue }
func load() async
{
//...load more content
}
}
When the view loads, the ProgressView spins and the load function is called.
After more data has been loaded the view is refreshed. Unfortunately however the task on the ProgressView is not renewed. The load function is not called again.
I also tried wrapping the MyContent wrapper in an ObservableObject but with similar effects.
final class MyBox<E> : ObservableObject
{
#MyContent
var content: [MyItem]
func load() async
{
await _content.load(position)
await send()
}
#MainActor
private func send() async
{
objectWillChange.send()
}
}
If I look at FetchRequest which is a struct and which has a batchLimit, I think it should not be necessary to use MyBox or an ObservableObject' just to trigger and additional load` call.
How can I force the ProgressView to run the task again?
I am new to SwiftUI and programming in general. I am trying to pass data and create navigation between different views in my app.
For my data model, I am using MVVM format even though my data is entirely static right now. I have two data models that I am trying to connect via enumeration: CategoryModel and SubCategoryModel (see below).
CategoryModel:
import Foundation
import SwiftUI
enum Category: String, CaseIterable, Identifiable {
var id: String { self.rawValue }
case explicit = "Explicit"
case adventure = "Adventure"
case artists = "Artists"
case holidays = "Holidays"
case movies = "Movies"
case people = "People"
case tasks = "Tasks"
case feelings = "Feelings"
case lifestyle = "Lifesytle"
case party = "Party"
case sports = "Sports"
}
//Root data -> set up data structure
//make Identifiable for ForEach looping in other views
struct CategoryModel: Identifiable {
let id = UUID().uuidString
let category: Category
let categoryTitle: String
let description: String
let isPurchase: Bool
let categoryImage: Image
}
class CategoryViewModel: ObservableObject {
#Published var gameCategories: [CategoryModel] = CategoryModel.all
#Published var filteredPurchase: [CategoryModel] = []
init() {
filterByPurchase()
}
func filterByPurchase() {
filteredPurchase = gameCategories.filter({ $0.isPurchase })
}
}
extension CategoryModel {
static let all = [
CategoryModel(
category: .explicit,
categoryTitle: "Adults Only",
description: "For those spicy, intimate moments.",
isPurchase: true,
categoryImage: Image(uiImage: #imageLiteral(resourceName: "Explicit"))
),
CategoryModel(
category: .adventure,
categoryTitle: "Call of the Wild",
description: "[Insert description here]",
isPurchase: false,
categoryImage: Image(uiImage: #imageLiteral(resourceName: "Adventure"))
),
CategoryModel(
category: .artists,
categoryTitle: "By the Artist",
description: "[Insert description here]",
isPurchase: false,
categoryImage: Image(uiImage: #imageLiteral(resourceName: "Artists"))
),
]
}
SubCategoryModel:
import Foundation
import SwiftUI
//Root data -> set up data structure
//make Identifiable for ForEach looping in other views
struct SubCategoryModel: Identifiable {
let id = UUID().uuidString
let category: Category
let subcategory: String
let subtitle: String
let subdescription: String
let instruction: String
let cardImage: Image
}
class SubCategoryViewModel: ObservableObject {
#Published var gameSubCategories: [SubCategoryModel] = SubCategoryModel.allSubs
#Published var filteredCategory: [SubCategoryModel] = []
#Published var categoryType: Category = .explicit
init() {
filterByCategory()
}
func filterByCategory() {
DispatchQueue.global(qos: .userInteractive).async {
let results = self.gameSubCategories
.lazy
.filter { item in
return item.category == self.categoryType
}
DispatchQueue.main.async {
self.filteredCategory = results.compactMap({ item in
return item
})
}
}
}
}
extension SubCategoryModel {
static let allSubs = [
SubCategoryModel(
category: .explicit,
subcategory: "Significant Other",
subtitle: "Bedroom Eyes",
subdescription: "[Insert sub-description here]",
instruction: "Instructions:\n \n1) Each player pick a song\n2) Be funny, genuine, or a maverick\n3) Enjoy the trip down memory lane",
cardImage: Image(uiImage: #imageLiteral(resourceName: "Explicit"))
),
SubCategoryModel(
category: .explicit,
subcategory: "Dating",
subtitle: "First Date",
subdescription: "[Insert sub-description here]",
instruction: "Instructions:\n \n1) Each player pick a song\n2) Be funny, genuine, or a maverick\n3) Enjoy the trip down memory lane",
cardImage: Image(uiImage: #imageLiteral(resourceName: "Explicit"))
),
SubCategoryModel(
category: .adventure,
subcategory: "Hiking",
subtitle: "Bedroom Eyes",
subdescription: "[Insert sub-description here]",
instruction: "Instructions:\n \n1) Each player pick a song\n2) Be funny, genuine, or a maverick\n3) Enjoy the trip down memory lane",
cardImage: Image(uiImage: #imageLiteral(resourceName: "Adventure"))
),
]
}
My goal is to click on a card from the CategoryView screen and navigate to the SubCategoryView via a navigation link. I want the SubCategoryView to show a filtered list of subcategories based on the category selected on the CategoryView screen.
CategoryView to SubCategoryView GIF
CategoryLoop code snippet:
struct CategoryLoop: View {
let categories: [CategoryModel]
var body: some View {
ZStack {
ScrollView {
VStack {
LazyVGrid(columns: [GridItem(.adaptive(minimum: 150), spacing: 20)], spacing: 20) {
ForEach(categories) { item in
NavigationLink(destination: SubCategoryView()
.navigationTitle(item.category.rawValue)) {
CategoryCard(category: item)
}
}
}
Based on the code in my CategoryLoop file, what is the best/easiest way to pass my model data and filter the list on the SubCategoryView? I am having trouble figuring out how to use the enumeration. Is it possible to write a function that would update #Published var categoryType: Category = .explicit (see SubCategoryModel) based on the card clicked in the LazyVGrid? Also, if you have suggestion on how to better organise my data models, please let me know.
Trying to go from UIKit to SwiftUI I keep wondering how to apply a service layer properly and use observables to publish updates from the service layer all the way out through the view model and to the view.
I have a View that has a View model, which derives from ObservableObject and publishes a property, displayed in the view. Using #EnvironmentObject I can easily access the view model from the view.
struct SomeView: View {
#EnvironmentObject var someViewModel: SomeViewModel
var body: some View {
TextField("Write something here", text: $someViewModel.someUpdateableProperty)
}
}
class SomeViewModel: ObservableObject {
#Published var someUpdateableProperty: String = ""
var someService: SomeService
init(someService: SomeService) {
self.someService = someService
}
// HOW DO I UPDATE self.someUpdateableProperty WHEN someService.someProperty CHANGES?
// HOW DO I UPDATE someService.someProperty WHEN self.someUpdateableProperty CHANGES?
}
class SomeService {
var someProperty: String = ""
func fetchSomething() {
// fetching
someProperty = "Something was fetched"
}
func updateSomething(someUpdateableProperty: String) {
someProperty = someUpdateableProperty
}
}
In my head a simple way could be to forward the property i.e. using computed property
class SomeViewModel: ObservableObject {
#Published var someUpdateableProperty: String {
get {
return someService.someProperty
}
set {
someService.someProperty = value
}
}
var someService: SomeService
init(someService: SomeService) {
self.someService = someService
}
}
Another approach could be if it was possible to set the two published properties equal to each other:
class SomeService: ObservableObject {
#Published var someProperty: String = ""
func fetchSomething() {
// fetching
someProperty = "Something was fetched"
}
}
class SomeViewModel: ObservableObject {
#Published var someUpdateableProperty: String = ""
var someService: SomeService
init(someService: SomeService) {
self.someService = someService
someUpdateableProperty = someService.someProperty
}
}
What is the correct way to forward a publishable property directly through a view model?
In UIKit I would use delegates or closures to call from the service back to the view model and update the published property, but is that doable with the new observables in SwiftUI?
*I know keeping the state in the service is not a good practice, but for the example let's use it.
There are, of course, lots of ways to do this, so I can't speculate on the "correct" way. But one way to do this is to remember that ObservableObject only does one thing - it has an objectWillChange publisher, and that publisher sends automatically when any of the #Published properties changes.
In SwiftUI, that is taken advantage of by the #ObservedObject, #StateObject and #EnvironmentObject property wrappers, which schedule a re-rendering of the view whenever that publisher sends.
However, ObservableObject is actually defined within Combine, and you can build your own responses to the publisher.
If you make SomeService an ObservableObject as in your last code example, then you can observe for changes in SomeViewModel:
private var cancellables = Set<AnyCancellable>()
init(someService: SomeService) {
self.someService = someService
someService.objectWillChange
.sink { [weak self] _ in
self?.objectWillChange.send()
}
.store(in: &cancellables)
}
Now, any published change to the service will cascade through to observers of the view model.
It's important to note that this publisher is will change, not did change, so if you are surfacing any properties from the service in your view model, you should make them calculated variables. SwiftUI coalesces all of the will change messages, then schedules a single view update which takes place on the next run loop, by which point the new values will be in place. If you extract values from within the sink closure, they will still represent the old data.
I have the following view:
struct Menu: View {
let sctions:[TestSection] = [
TestSection(id: 0, name: "One", items: [
ListItem(id: 0, name: "1"),
ListItem(id: 1, name: "2"),
ListItem(id: 2, name: "3"),
ListItem(id: 3, name: "4")
]),
TestSection(id: 1, name: "Two", items: [
ListItem(id: 4, name: "4"),
ListItem(id: 5, name: "5"),
ListItem(id: 6, name: "6"),
ListItem(id: 7, name: "7")
]),
TestSection(id: 2, name: "Three", items: [
ListItem(id: 8, name: "8"),
ListItem(id: 9, name: "9"),
])
]
var body: some View {
NavigationView {
List {
ForEach(sctions) { section in
Section(header: Text(section.name)) {
ForEach(section.items) { item in
TestCell(item: item)
}
}
}
}
.listStyle(.plain)
.navigationBarTitle("Title")
}
}
}
struct TestCell: View {
#ObservedObject private var model:ItemModel
let item:ListItem
init(item:ListItem) {
self.item = item
self.model = ItemModel(itemId:item.id)
}
var body: some View {
Text("item: \(item.name)")
}
}
class ItemModel:ObservableObject {
#Published var someProperty:Int
let itemId:Int
init(itemId:Int) {
self.itemId = itemId
self.someProperty = 0
}
}
I am trying to decide how to handle child views in SwiftUI from a model layer point of view.
One option is #ObservedObject in the child view. The parent created the model and sets it on the child or the parent passes in a property on the child that then allows the child to init the model in its initializer:
init(item:ListItem) {
self.item = item
self.model = ItemModel(itemId:item.id). // <<---- HERE
}
Then looking at this, I wonder if this is less performant than using a #StateObject in the child view that would manage its model's lifecycle.
So then I tried this:
struct TestCell: View {
#StateObject var model = ItemModel() // <<-- error "Missing argument for parameter 'itemId' in call"
let item:ListItem
var body: some View {
Text("item: \(item.name)")
}
}
Which, obviously shows the error:
I am not sure how to initialize ItemModel in TestCell when using the #StateObject approach.
The question I have is:
in this type of scenario, where I want each cell to have its own model (to handle model related logic like making network calls, updating model layer etc...) should I be creating the model as I instantiate the cell within the parent during cell creation, and setting it on the cell (#ObservedObject)?
Or should a cell use #StateObject for its model, and if so, how would I have the model initialize itself properly when it needs parameters, like let itemId:Int for example?
Your first option is not recommended because
init(item:ListItem) {
self.item = item
self.model = ItemModel(itemId:item.id). // <<---- HERE
}
it’s unsafe to create an observed object inside a view
https://developer.apple.com/documentation/swiftui/managing-model-data-in-your-app
You will find many questions in SO that talk about Views being unreliable. You'll also find the ones that tell people to do it this way but you will see issues with it.
If you use #StateObject var model: ItemModel = ItemModel() which is the only exception according to Apple for creating an ObservableObject In a View
And switch
let itemId:Int
in your ItemModel to
var itemId:Int = 0
Then in TestCell add to the outermost View
.onAppear(){
model.itemId = item.id
}
Or depending on your ParentView and its ViewModel you can create the ObservableObjects in the class ViewModel and pass it as a parameter for
#ObservedObject private var model:ItemModel
The important thing is that the workaround takes into consideration that an ObservableObject should not be created in a View with the exception of #StateObject. SwiftUI reserves the right to re-create any View whenever it decides that it is necessary.
I am using Appcelerator Studio to design a slider menu. Now i need to add EventListener to those slider menu rows. Please tell me how to use EventListener on clicking 'Help' so that i can give some condition within it? My code is below:
var menuTitles = [{title : 'Home'
}, {
title : 'Help'
},{
title: 'Privacy Policy'
}, {
title : 'About Us'
}, {
title : 'Rate This App'
}, {
title : 'Logout'
}];
//Tableview
var tableView = Titanium.UI.createTableView({
data : menuTitles,
allowsSelection:true
});
menuWindow.add(tableView);
console.log(menuTitles[0]);
//console.log(tableView.data);
menuTitles[0].addEventListener('click', function(){ // It seems wrong.
alert("");
some more operation i need to perform inside this actually
});
Add the event listener onto the parent element, in this case the tableView and then select the item you want that using event bubbling, the example code below selects it on the row index e.index but you could easily change this to e.row.title and do a string comparison / add any custom property to the row object and check it with e.row
tableView.addEventListener('click', function (e) {
if (e.index === 1) {
} else if (e.index === 2){
}
etc....
});