美文网首页iOS开发
Lazy Grid Layout

Lazy Grid Layout

作者: _浅墨_ | 来源:发表于2023-12-01 22:02 被阅读0次

Lazy Grid 允许创建灵活且易于调整的网格布局。我们可以创建 LazyVGrid 或 LazyHGrid,即创建一个垂直或水平增长的容器。网格视图只有在需要时才会渲染项目,因此有了“ Lazy”这个关键词。

适应性 LazyVGrid

设置网格布局的最灵活方式是使用自适应 GridItem。我们可以设置一个最小尺寸,并让元素自己设置最大尺寸。Lazy Grid 将自动适应宽度,容纳尽可能多的项目:

LazyVGrid(columns: [GridItem(.adaptive(minimum: 80))]) {
    ForEach(0 ..< 20) { item in
        Rectangle()
            .frame(height: 100)
    }
}

网格和项目间距

网格和 GridItem 都可以有间距。对于 LazyVGrid,网格间距是行之间的间隔,而 GridItem 间距是项目之间的间隔。

LazyVGrid(
    columns: [GridItem(.adaptive(minimum: 80), spacing: 16)],
    spacing: 16) {

    ForEach(0 ..< 12) { item in
        RoundedRectangle(cornerRadius: 10)
            .fill(Color.blue)
            .frame(height: 100)
    }
}
.padding()
LazyHGrid

我们还可以将 Lazy Grid 设置为水平,而不是垂直,以行而不是列显示。

LazyHGrid(
    rows: [GridItem(.adaptive(minimum: 80), spacing: 16)],
    spacing: 12) {

    ForEach(0 ..< 20) { item in
        Rectangle().frame(width: 100)
    }
}

通过使用水平的 ScrollView 和有限的高度,便可以创建类似于应用商店应用列表的布局。

ScrollView(.horizontal) {
    LazyHGrid(
        rows: [GridItem(.adaptive(minimum: 80), spacing: 8)],
        spacing: 12) {

        ForEach(0 ..< 20) { item in
            Rectangle().frame(width: 300)
        }
    }
    .frame(height: 300)
}

固定列

如果想更精细地控制每行内个别项的大小,可以使用 GridItem 的固定尺寸。


LazyVGrid(
    columns: [
        GridItem(.fixed(100), spacing: 8),
        GridItem(.fixed(160), spacing: 8),
        GridItem(.fixed(80), spacing: 8)
    ], spacing: 12) {

    ForEach(0 ..< 20) { item in
        Rectangle()
            .frame(height: 80)
    }
}

重复列

还可以通过设置 Array 的 repeating 和 count 属性来设置每行固定数量的列。

Array(repeating: .init(.flexible(), spacing: 8), count: 4)

参考资料

要了解有关 Lazy Grid 更多信息,请访问 SwiftUI 中的 Stacks, Grids and Outlines in SwiftUI.

相关文章

  • React丨布局拖拽组件

    react-grid-layout npmcnpm i react-grid-layout Githubhttps...

  • Grid Layout

    这篇笔记整合了一些其他的学习笔记内容,主要用于快速复习Grid布局。 display: gridgrid-temp...

  • Unity 3D Tips

    使用Horizontal Layout Group、Vertical Layout Group 和 Grid La...

  • vue 拖拽 地址

    https://github.com/jbaysolutions/vue-grid-layout

  • css grid layout

    2017,新年伊始,做点新的事情,那先从简单的开始吧,瞄准了css grid layout; 目前WEB布局的方式...

  • 前端资源汇总

    Layout 1.网格布局方案vue-grid-layout:https://github.com/jbaysol...

  • Sketch

    为响应式网页使用Grid SystemCanvas -> Layout Settings -> Coloums /...

  • CSS Grid Layout 5 Practical Proj

    下载地址:CSS Grid Layout 5 Practical Projects[www.rejoiceblog...

  • 翻译 | CSS网格(CSS Grid)布局入门

    原文地址:Getting to know CSS Grid Layout 原文作者:Chris Wright 译者...

  • Android GridLayout

    原文:Android Grid Layout 译文的GitHub地址:Android GridLayout 译者注...

网友评论

    本文标题:Lazy Grid Layout

    本文链接:https://www.haomeiwen.com/subject/twexwdtx.html