美文网首页iOS技术
SwiftUI - Grid网格布局简单用法

SwiftUI - Grid网格布局简单用法

作者: 微笑中的你 | 来源:发表于2022-01-10 13:48 被阅读0次

先干为敬


import SwiftUI

struct SysGrid: View {


    private var symbols = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
    private var gridItemLayout = [GridItem.init(.flexible(), spacing: 0, alignment: .center),                           GridItem.init(.flexible(), spacing: 0, alignment: .center),
                                  GridItem.init(.flexible(), spacing: 0, alignment: .center)]
    
    var body: some View {
        VStack {
            Text("下面是: LazyVGrid")
            LazyVGrid(columns: gridItemLayout, spacing: 20) {
                ForEach((0...8), id: \.self) {
                    Text(symbols[$0])
                }
            }
            Divider.init().padding(10).foregroundColor(.red)
                .background(Color.yellow)
            
            Text("下面是: LazyHGrid")
            LazyHGrid.init(rows: gridItemLayout, spacing: 20) {
                ForEach((0...8), id: \.self) {
                    Text(symbols[$0])
                }
            }
        }
    }
}

模拟器效果图如下


Simulator Screen Shot - iPhone 13 mini - 2022-01-10 at 13.44.59.png

相关文章

  • Grid网格布局学习

    Grid网格布局学习 引言 本文不对grid布局由来以及优劣做过多的介绍,仅介绍grid网格布局的用法及其效果显示...

  • SwiftUI - Grid网格布局简单用法

    先干为敬 模拟器效果图如下

  • 九宫格拖拽

    效果实例 简单了解Grid布局(网格布局) 什么是网格布局 CSS网格布局(又称“网格”),是一种二维网格布局系统...

  • 九宫格拖拽

    效果实例 简单了解Grid布局(网格布局) 什么是网格布局 CSS网格布局(又称“网格”),是一种二维网格布局系统...

  • 用CSS的Grid布局画飞行棋盘

    1. Grid布局简单介绍 网格布局Grid,可以将网页划分成一个个网格,组合任意不同的布局。采用容器(conta...

  • CSS 系列——Grid布局学习笔记

    Grid 布局,就是网格布局。 简单的需求,垂直居中、水平居中等,有 Flex 布局。 网格布局,对应网页设计或者...

  • grid布局

    grid布局简单介绍 CSS网格布局(又名“网格”)是一个二维的基于网格的布局系统,其目的只在于完全改变我们设计基...

  • CSS Grid网格布局

    参考资料 CSS Grid 网格布局教程 - 阮一峰 概述 网格布局(Grid)是最强大的 CSS 布局方案。 它...

  • Grid布局

    CSS Grid(网格) 布局(又称为 “Grid(网格)” ),是一个二维的基于网格的布局系统它的目标是完全改变...

  • CSS Grid 布局

    CSS Grid(网格) 布局(又称为 “Grid(网格)” ),是一个二维的基于网格的布局系统它的目标是完全改变...

网友评论

    本文标题:SwiftUI - Grid网格布局简单用法

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