Question

这并不是

下面,请看一线有3栏的斜体。我试图发挥同样的作用,但用图像。图像应当剪辑,但以其他方式看不出。

在这里,我是如何实现了直径网。

// In my view struct...

private let threeColumnGrid = [
    GridItem(.flexible(minimum: 40)),
    GridItem(.flexible(minimum: 40)),
    GridItem(.flexible(minimum: 40)),
]

// In my body...

LazyVGrid(columns: threeColumnGrid, alignment: .center) {
    ForEach(model.imageNames, id: .self) { imageName in
        Rectangle()
            .foregroundColor(.red)
            .aspectRatio(1, contentMode: .fit)
    }
}

这就是我要使用Rectangles......的拖延。

这是我的目标。

Update:

如果我这样做,

Image(item)
    .resizable()
    .aspectRatio(1, contentMode: .fit)

如果图像的面值为1:1,那么图像就会扭曲。例如,以下屏幕上的圈子形象应当是一个完美的圈子。

Answer 1

我找到了解决办法。

界定栏号......

// Somewhere in my view struct
private let threeColumnGrid = [
    GridItem(.flexible(minimum: 40)),
    GridItem(.flexible(minimum: 40)),
    GridItem(.flexible(minimum: 40)),
]

建立电网......

LazyVGrid(columns: threeColumnGrid, alignment: .center) {
    ForEach(model.imageNames, id: .self) { item in
        GeometryReader { gr in
            Image(item)
                .resizable()
                .scaledToFill()
                .frame(height: gr.size.width)
        }
        .clipped()
        .aspectRatio(1, contentMode: .fit)
    }
}

Answer 2

我发现,DPMitu的回答不是把图像集中起来(与领先的对口相联)。

这对我来说做得更好(这也要求GeometryReader):

  LazyVGrid(columns: columns, spacing: 30) {
       ForEach(items) { item in
           Image("IMG_0044")
               .resizable()
               .scaledToFill()
               .frame(minWidth: 0, maxWidth: .infinity)
               .aspectRatio(1, contentMode: .fill)
               .clipped() //Alternatively you can use cornerRadius for the same effect
               //.cornerRadius(10)
       }
  }

I found it here https://www.appcoda.com/learnswiftui/swiftui-gridlayout.html about half way down the page

Answer 3

有些人询问了外观形象。可以通过在“<条码>上添加(x:平方框架(in: . local).midX, y: gr.frame(in: . local).midY)加以调整。因此,全部是:

专栏数

// Somewhere in my view struct
private let threeColumnGrid = [
    GridItem(.flexible(minimum: 40)),
    GridItem(.flexible(minimum: 40)),
    GridItem(.flexible(minimum: 40)),
]

Creating the Grid

LazyVGrid(columns: threeColumnGrid, alignment: .center) {
    ForEach(model.imageNames, id: .self) { item in
        GeometryReader { gr in
            Image(item)
                .resizable()
                .scaledToFill()
                .frame(height: gr.size.width)
                .position(x: gr.frame(in: .local).midX, y: gr.frame(in: .local).midY)
        }
        .clipped()
        .aspectRatio(1, contentMode: .fit)
    }
}

Answer 4

不含<代码>GeometryReader的解决方案和正确比例的图像。

struct ContentView: View {

    private let columns = [
        GridItem(.flexible(minimum: 40)),
        GridItem(.flexible(minimum: 40)),
        GridItem(.flexible(minimum: 40)),
    ]

    private let imageNames = ["image0", "image1", "image2", "image3", "image4"];

    var body: some View {
        LazyVGrid(columns: columns, content: {
            ForEach(imageNames, id: .self) { name in
                Color.clear
                    .background(Image(name)
                                    .resizable()
                                    .scaledToFill()
                    )
                    .aspectRatio(1, contentMode: .fill)
                    .clipped()
                    .contentShape(Rectangle()) // <-- this is important to fix gesture recognition
            }
        })
    }
}

Answer 5

这个问题非常接近最容易的解决办法! http://www.un.org/Depts/DGACM/index_spanish.htm 或框架:

LazyVGrid(columns: threeColumnGrid, alignment: .center) {
    ForEach(model.imageNames, id: .self) { imageName in
          Rectangle()
            .aspectRatio(1, contentMode: .fill)
            .overlay {
              Image(imageName)
                .resizable()
                .scaledToFill()
            }
            .cornerRadius(8)
            .clipped()
    }
}

Answer 6

我面临同样的问题,这就是我如何解决这一问题。

GeometryReader { geo in
    Image(item)
        .resizable()
        .aspectRatio(contentMode: .fill)
        .clipShape(
            Rectangle()
                .size(width: geo.size.width, height: geo.size.width)
        )
}

Answer 7

I implement using Rectangle for help, just below

LazyVGrid(columns: [.init(.adaptive(minimum: 88, maximum: 128), spacing: 2)], spacing: 2) {
    ForEach(urls, id: .self) { url in
        Rectangle()
            .aspectRatio(1, contentMode: .fit)
            .foregroundColor(.clear)
            .overlay {
                GeometryReader { geometry in
                    if let image = UIImage(contentsOfFile: url.relativePath) {
                        Image(uiImage: image)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: geometry.size.width, height: geometry.size.height, alignment: .center)
                            .clipped()
                    }
                }
            }
    }
}

Answer 8

为此有两种途径:

页: 1 采用GeometryReader

    var gridView: some View {
        LazyVGrid(columns: [GridItem(.flexible(), spacing: 2, alignment: nil),
                            GridItem(.flexible(), spacing: 2, alignment: nil),
                            GridItem(.flexible(), spacing: 2, alignment: nil)],
                  alignment: .center, spacing: 2) {
            
            ForEach(0..<20) { _ in
                RoundedRectangle(cornerRadius: 0)
                    .aspectRatio(1.0 , contentMode: .fill)
                    .foregroundColor(.gray.opacity(0.3))
                    .overlay {
                        GeometryReader { proxy in
                            Image("iphone")
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width: proxy.size.width, height: proxy.size.width, alignment: .center)
                                .clipped()
                        }
                    }
            }
        }
    }

<>strong>2。

    var gridView: some View {
        LazyVGrid(columns: [GridItem(.flexible(), spacing: 2, alignment: nil),
                            GridItem(.flexible(), spacing: 2, alignment: nil),
                            GridItem(.flexible(), spacing: 2, alignment: nil)],
                  alignment: .center, spacing: 2) {
            
            ForEach(0..<20) { _ in
                RoundedRectangle(cornerRadius: 0)
                    .aspectRatio(1.0 , contentMode: .fill)
                    .foregroundColor(.gray.opacity(0.3))
                    .overlay {
                        Image("iphone")
                            .resizable()
                            .scaledToFill()
                            .frame(minWidth: 0, maxWidth: .infinity)
                            .frame(minHeight: 0, maxHeight: .infinity)
                            .aspectRatio(1, contentMode: .fill)
                            .clipped()
                    }
            }
        }
    }

I m 表示不使用GeometryReader ,它有些超负荷。特别是在装上很长的清单时。它必须计算每个项目的规模。

友情链接