exyte / grid Goto Github PK
View Code? Open in Web Editor NEWThe most powerful Grid container missed in SwiftUI
License: MIT License
The most powerful Grid container missed in SwiftUI
License: MIT License
I am using two Grids inside another grid. Seems OK, except when I try to use rowspan inside of one of the inner grids. Here is general layout:
Here is the code:
import SwiftUI
import ExyteGrid
struct GridIssue1View: View
{
var body: some View
{
let dials_view = Color.purple
Grid(tracks: [
.fr(0.5), // dials
.fr(0.5), // grid with times
], flow:.columns, spacing: 0)
{
// Grid2
Grid(tracks: [
.fr(1), // purple
.fit, // label
.fit, // value
], spacing: 3)
{
dials_view
.aspectRatio(1, contentMode: .fit)
.gridStart(column: 0, row:0)
// .gridSpan(row: 3)
Text("G2.1")
.gridStart(column: 1, row:1)
Text("A")
.gridStart(column: 2, row:1)
Text("G2.2")
.gridStart(column: 1, row:1)
Text("B")
.gridStart(column: 2, row:1)
Text("G2.3")
.gridStart(column: 1, row:2)
Text("C")
.gridStart(column: 2, row:2)
}
.background(Color.yellow)
// Grid3
Grid(tracks: [
.fit, // +1
.fit, // rise
.fit, // 0,3,6,9
.fit, // set
.fit // +1
], spacing: 3)
{
GridGroup
{
Text("+")
Text("1")
Text(" 0°")
Text("2")
Text("+")
}
GridGroup
{
Text("+")
Text("3")
Text(" 0°")
Text("4")
Text("+")
}
GridGroup
{
Text("+")
Text("5")
Text(" 0°")
Text("6")
Text("+")
}
GridGroup
{
Text("+")
Text("7")
Text(" 0°")
Text("8")
Text("+")
}
}
}
.background(Color.gray)
.padding(8)
}
}
struct GridIssue1View_Previews: PreviewProvider {
static var previews: some View {
GridIssue1View()
}
}
With gridSpan commented out, the purple block is OK and just taking up one row since I don't have the rowspan active:
But when I add the rowspan, the layout in the outer grid shifts to being 2x1:
I would have expected:
This just may not be supported but I wanted to check in. Thanks so much.
Does this grid support drag and drop reordering? Is there an example?
i wasn't able to install through CocoaPods on my M1 MacBook
i suggest using SPM instead of CocoaPods to install the framework
so it'll work on my computer as well :)
I have a problem where the elements of the grid are overlapping.
My code is:
var body: some View {
ScrollView {
VStack(alignment: .leading) {
Group {
Text("Letters en woorden")
.font(.title)
Grid(tracks: 3) {
Text("_eererer_")
Text("_eererer__")
Text("_eererer_")
Text("_eererer_")
Text("_eererer_")
Text("_eererer_")
}
// ...
}
}.padding(.bottom)
}.navigationTitle("Morse")
.padding(.horizontal)
}
Awesome framework! Please, consider looking into the following issue:
I'm trying to embed Grid into the following setup:
import ExyteGrid
import SwiftUI
struct Test: View {
var body: some View {
NavigationView {
Grid(tracks: 3) {
Color(.blue)
Color(.purple)
Color(.red)
Color(.cyan)
Color(.green)
Color(.orange)
}
}
}
}
struct Test_Previews: PreviewProvider {
static var previews: some View {
Test()
}
}
Xcode Version 12.0 (12A7209)
ExyteGrid (0.1.0)
iOS 14.0
If the grid view is conditionally rendered, we have to manually assign its height.
Here is code snippets
// Use Grid in child view
struct RaceRunnerForm: View {
@State private var isShownFullForm = false
var body: some View {
VStack(alignment: .leading, spacing: 5) {
Text("Comments").bold()
Divider()
Grid(0..<formItemCount, tracks: 2, spacing: 10) { index in
HStack(alignment:.center) {
Text("\(self.formLabelArray[index])")
Spacer()
Text(self.formDataArray[index])
}
.frame(height: 37)
}.padding(.leading, -10).padding(.trailing, -10)
.frame(height: 300) // have to assign height explictly
}
}
}
// Call from the parent view
@State private var isExpanded = false // `Conditionally rendering`
var body: some View {
VStack {
HStack {
VStack(spacing: 10) {
VStack(alignment: .leading) {
Text(entrant.name).bold()
}
if isExpanded {
RaceRunnerForm()
}
}
}
Hello, I use a @State variable to control display Grid, like this:
if(unit == "w"){
Grid(tracks: 3) {
ForEach(weekSelectArr.indices){item in
Toggle(isOn: self.$weekSelectArr[item]) {
Text(weekdays[item])
.frame(height:50)
}.toggleStyle(GridToggleStyle())
}
}.frame(height:200)
}
When the view appear, it shows like this: only show one item.
When I click the item, it come back into grid:
Their parent view is a Form->Section.
I am still a SwiftUI newbie for sure, but I just could not figure out how to easily align cell contents, to change from centered.
For example, in below I would like "A" to right align in the cell:
struct GridIssue2View: View {
var body: some View {
Grid(tracks: [
.fit, // label
.fit, // value
], spacing: 5)
{
Text("A")
Text("B")
Text("CCCCC")
Text("D")
}
.frame(width: 100, height: 50)
.border(Color.blue, width: 1)
}
}
I tried swapping out Text("A") with:
HStack
{
Spacer()
Text("A")
}
Thinking that might push the A over. But it yielded:
Thank you for any possible help!
Hi, 1.4.0 does build and 1.4.2 - doesn't - though didn't check 1.4.1
It fails to build as a project dependency and as a standalone project
Please see build log.
Environment - Xcode 13.4.1, macOS 12.4
Build ExyteGrid_2023-01-23T02-08-12.txt
This one is pretty odd. This simple WidgetKit example:
import SwiftUI
import ExyteGrid
import WidgetKit
struct GridIssue2View: View {
var body: some View {
Grid(tracks: [
.fit, // label
.fit, // value
], spacing: 3)
{
Text("A")
Text("B")
Text("C")
Text("D")
}
}
}
struct GridIssue2View_Previews: PreviewProvider {
static var previews: some View
{
GridIssue2View()
.previewContext(WidgetPreviewContext(family: .systemSmall))
}
}
Does not do column/row layout in preview mode:
But when placed in view for real widget, it renders OK in preview. Also I could place within ZStack to fix:
struct GridIssue2View: View {
var body: some View {
ZStack
{
Grid(tracks: [
.fit, // label
.fit, // value
], spacing: 3)
{
Text("A")
Text("B")
Text("C")
Text("D")
}
}
}
}
Similar preview example under iOS is fine. Perhaps related to ScrollView change?
iOS:
import SwiftUI
import ExyteGrid
struct GridIssue2View: View {
var body: some View {
Grid(tracks: [
.fit, // label
.fit, // value
], spacing: 3)
{
Text("A")
Text("B")
Text("C")
Text("D")
}
}
}
struct GridIssue2View_Previews: PreviewProvider {
static var previews: some View {
GridIssue2View()
}
}
It would be great if Grid could target support for macOS. It seems to support Catalyst, but that is not good enough for a native Mac app.
I took a stab at it and was able to add macOS support pretty easily. Unfortunately Xcode messes with so many project settings (and I don't know your preferred setup/naming) so it would probably be easier if you just addressed this on your end.
Steps to add Mac support:
didReceiveMemoryWarningNotification
. Find another solution for the layout cache.Package.swift
to add platformUIColor
etc.When attempting to render a scrollable grid in a navigation view with a navigation bar item, I get the following error: " precondition failure: invalid input index: 2". I've been able to run it successfully without the navigation bar item and still with a navigation bar title, but as soon as I add the item back in it fails.
I can render the grid view without being scrollable and with the navigation bar item there and it works as expected.
Here is my view with the grid:
struct ListView: View {
private let elements = ElementsModel()
@State private var showSheet = false
var body: some View {
NavigationView {
Grid(elements.elements, tracks: 3) {element in
SquareView(element: element, showElementName: true)
}
.gridContentMode(.scroll)
.edgesIgnoringSafeArea(.all)
.navigationBarTitle("🧪 Elements")
.navigationBarItems(trailing:
Text("Test")
)
}
}
}
Here is the SquareView that is inside the body:
struct SquareView: View {
let element: Element
let showElementName: Bool
var body: some View {
VStack {
Text("\(element.number)")
.frame(maxWidth: .infinity, alignment: .leading)
Text(element.symbol)
.bold()
.font(.system(size: 50))
Group {
if showElementName {
Text(String(element.name))
.bold()
} else {
if element.atomicMass != nil {
Text(String(element.atomicMass!))
}
}
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.modifier(OneLineText())
.aspectRatio(1, contentMode: .fit)
.foregroundColor(.white)
.padding(5)
.background(elementColor[element.category])
}
}
Please let me know if there are any debugging tasks I can do to provide more information
Hi,
Adding view(ex: button ) with a if statement of a @State boolean value is not working inside of Grid with forEach. What can I do about it? Any idea?
When using a resizable Image
with .aspectRatio(contentMode: .fill)
, the image may not be correctly displayed.
Here's a code example to reproduce the issue:
Grid(tracks: 3) {
ForEach(0 ..< 7) { i in
Image("ExampleImage")
.resizable()
.aspectRatio(contentMode: .fill)
}
}
.gridContentMode(.scroll)
With ForEach(0 ..< 1)
, the image fills the whole width of the grid container (instead of just one column).
The more rows are added, the more zoomed in the images become.
With 10 rows, only a single pixel of the image is visible, filling the entire screen.
In this nested grid example, the parent layout is not expected:
var body: some View {
Grid(tracks: [
.fit, // label
.fit, // value
], spacing: 5)
{
Text("A").gridAlignment(.trailing)
Text("B").gridAlignment(.leading)
Text("CCCCC").gridAlignment(.trailing)
Text("D").gridAlignment(.leading)
Text("Grid->").gridAlignment(.trailing)
Grid(tracks: [
.fit, // label
.fit, // value
], spacing: 3) {
Text("W").gridAlignment(.leading)
Text("X").gridAlignment(.trailing)
Text("YYYY").gridAlignment(.leading)
Text("ZZZZ").gridAlignment(.trailing)
}
.border(Color.red, width: 1)
}
.border(Color.blue, width: 1)
}
Hi team,
Di you have any examples of implementing a timetable?
Thanks
Is it possible to use the grid in scrollview with other views?
Hello. I using Grid for some iOS14 widgets. I am running into this:
SwiftUI is throwing up a warning per https://stackoverflow.com/questions/63135404/why-do-some-views-appear-as-a-red-no-entry-sign-in-widgets. The Grid's ScrollView was the issue.
I believe ScrollView would only be needed in .gridContentMode(.scroll) mode. As a quick hack I commented out the ScrollView in Grid and all seems good.
I am fairly new to both Swift and SwiftUI as assume you would have a much more elegant real fix than I could provide. I won't need scrollable maybe ever for my project. But I could take a crack at a "real" fix.
Love the Grid! Thank you!!
My company works with ipads 4th gen :(
latest ios is 10.3 :(
Is there a way to support ios 10?
Is there a way to show gridlines? Like if you wanted to build a spreadsheet control with TextFields inside the grid.
Scaling a view within the Grid
causes incorrect overlay.
I attempted to manipulate the zIndex
by wrapping my Grid Item View
in a ZStack
and changing the zIndex
whenever that particular view scaled.
However, it does not appear to have any effect.
Here is a sample code snippet of my Grid
implementation:
var body: some View {
Grid(tracks: layout.tracks) {
ForEach(viewModel.items, id: \.self) { item in
ZStack {
LayoutItem(item, action: { action in
viewModel.handle(action, for: item)
})
}
.zIndex(item.zIndex)
.gridSpan(column: item.type.column,
row: item.type.row)
}
}
.gesture(drag)
.coordinateSpace(name: GridLayout.NAME_SPACE)
}
Here is a code snippet of my toggle scale logic
public func handle(drag location: CGPoint?) {
for var item in items {
var inBounds = false
var scale: GridLayoutItemScale = .normal
var zIndex: Double = 0
if let location = location {
inBounds = item.bounds.contains(location)
scale = inBounds ? .large : .normal
zIndex = inBounds ? 1 : 0
}
item.scale = scale
item.zIndex = zIndex
setItem(item)
}
}
I looked through the documentation and wasn't able to find anything specific to zIndex
manipulation.
Is it possible to alter the zIndex
for Grid Items within the Grid
to avoid bottom overlay?
If not, it would be a great addition to this package! I've been using it a lot and it is FANTASTIC!
Awesome library guys!
Would it be possible to use the Grid to make a TextEditor with multiple columns, like on Apple Pages for example?
I tried bellow, but have no idea how to make this work...
import SwiftUI
import ExyteGrid
struct ContentView: View {
let inputText = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
var body: some View {
Grid(tracks: 2) {
Text(inputText)
}
}
}
Hi,
I saw this post posted in October 2021 regarding issues with nesting the grids inside scroll views. And the answer was that scrollviews were not supported.
Is there any update on this or projected update release dates?
Thanks!
How do I get my cells to align .topLeading
? I've tried all permutations of .gridCommonItemsAlignment(.topLeading)
and all the other methods on Grid
that supports alignment.
I can't get the cards in the demo to align to the top. You can see the one on the middle right is always centred vertically. I'd like it to be .topLeading
aligned.
I have a macOS app that I'm adding Grid to, but when I pass in new data, the grid is not refreshed.
However, if I switch to using LazyVGrid, it does refresh. So I know the data is getting to the SwiftUI view. I'm integrating Grid using an NSHostingController and I'm monitoring changes to my object using @ObjectBinding. Anything outside the Grid will update when I change objects, but anything within the Grid does not.
Think of a master/detail view. The master is an AppKit NSTableView that shows a list of records. The detail view is my SwiftUI view that's using Grid to display a list of fields on screen. But when I switch records, the SwiftUI view's Grid never refreshes.
Like in the Fitbit app it would be nice to make them re-adjustable - going to use your library for showing dynamic data so would be an appreciated feature if you could move around the "block" on the Grid.
Great library, thanks!
When the grid is placed inside a scrollview, the grid just disappears.
import SwiftUI
import ExyteGrid
struct ContentView: View {
var body: some View {
ScrollView {
Grid(array, id: \.id, tracks: [.fit, .fit], spacing: 20) { user in
VStack {
Text(user.name)
.font(.largeTitle)
Text(user.image)
.font(.largeTitle)
.background(Color.orange)
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct User: Identifiable {
let id = UUID().uuidString
let name: String
let image: String
}
var array = [
User(name: "Hello", image: "😀"),
User(name: "No one here", image: "😆"),
User(name: "Hello", image: "😀"),
User(name: "No one here", image: "😆"),
User(name: "Hello", image: "😀"),
User(name: "No one here", image: "😆"),
User(name: "Hello", image: "😀"),
User(name: "No one here", image: "😆"),
User(name: "Hello", image: "😀"),
User(name: "No one here", image: "😆"),
]
Whenever a Grid is placed within a navigation view, the app crashes. As soon as the navigation view is removed it works as expected.
I would love to support development financially.
I would love to use your library because it has many great features. Unfortunately I couldn't make the grid to look like the picture.
What I need:
Can you advise me how to do this?
Thanks, Michal Kus
Here is my code:
Grid(store.state.categories, id: \.id, tracks: 2) { category in
SectionView( text: category.name)
}.gridContentMode(.scroll)
When I do it with List
there is no issue, no lags. Would be happy if you can let me know if there is something that I missed.
Thanks
Quite common with SwiftUI projects.
Good job 👍
Hi,
I was wondering if it is possible to change the column span of a cell dynamically as you change the flow in the documentation: https://github.com/exyte/Grid#columns?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.