首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在SwiftUI中创建相同宽度和高度的按钮网格

,可以使用LazyVGrid结合ForEach来实现。以下是完善且全面的答案:

在SwiftUI中,可以使用LazyVGridForEach来创建相同宽度和高度的按钮网格。LazyVGrid是一个视图容器,可用于创建网格布局,并根据需要延迟加载视图。

以下是一个示例代码,演示如何在SwiftUI中创建相同宽度和高度的按钮网格:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    let columns = [
        GridItem(.flexible(), spacing: 10),
        GridItem(.flexible(), spacing: 10),
        GridItem(.flexible(), spacing: 10)
    ]
    
    let buttonTitles = ["Button 1", "Button 2", "Button 3", "Button 4", "Button 5", "Button 6"]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 10) {
                ForEach(buttonTitles, id: \.self) { title in
                    Button(action: {
                        // 在这里添加按钮点击事件的处理逻辑
                        print("\(title) tapped!")
                    }) {
                        Text(title)
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .background(Color.blue)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                }
            }
            .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在这个示例代码中,我们首先定义了一个columns数组,其中包含了三个GridItem,每个GridItem的宽度使用.flexible()来自适应父视图的大小,同时设置了间距为10。

然后,我们定义了一个buttonTitles数组,其中包含了要显示在按钮上的标题。

body中,我们使用ScrollView包装了一个LazyVGrid,并传入了columns数组和间距值。在LazyVGrid中,我们使用ForEach遍历buttonTitles数组,并为每个标题创建一个按钮。

每个按钮都设置了一个点击事件的处理逻辑,并将按钮的标题设置为Text视图的内容。通过使用framebackgroundforegroundColorcornerRadius等修饰符,我们可以设置按钮的外观样式。

最后,我们在整个视图周围添加了一些填充。

这样,我们就可以在SwiftUI中创建一个相同宽度和高度的按钮网格了。

腾讯云提供了相关的云计算产品,如云服务器、云数据库等,您可以在Tencent Cloud官网了解更多详细信息和产品介绍。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何在onCreate获取View高度宽度

如何在onCreate获取View高度宽度 开发过程中经常需要获取到View宽和高,可以通过View.getWidth()View.getHeight()来得到宽高。...然而新手们经常在onCreate方法中直接调用上面两个方法得到值是0! 这是为什么呢? 因为View绘制是通过两个遍历来完成,一个measure过程,一个layout过程。...只有经过“测量”“布局”之后,View才能正确地完成绘制。而这一切是发生在onCreate方法之后。...所以onCreate中直接使用View.getWidth()View.getHeight()是无法得到正确。 那应该怎么onCreate获取View宽高呢?...开发者可以通过View.post()方法来获取到View宽高,该方法传递一个Runnable参数,然后将其添加到消息队列,最后UI线程执行。

5.3K20

android如何获取view布局高度宽度详解

前言 可能很多情况下,我们都会有activity获取view 尺寸大小(宽度高度需求。面对这种情况,很多同学立马反应:这么简单问题,还用你说?你是不是傻。。...当我们 onCreate() 方法获取某个 View 组件宽度高度,直接调用 getWidth()、getHeight()、getMeasuredWidth()、getMeasuredHeight...下面来一起看看吧 实现方法 一、使用 View.measure 测量 View 该方法测量宽度高度可能与视图绘制完成后真实宽度高度不一致。...OnPreDrawListener 监听事件 视图将要绘制时调用该监听事件,会被调用多次,因此获取到视图宽度高度后要移除该监听事件。...view.getHeight(); // 获取高度 } }); 四、重写 View onSizeChanged 方法 视图大小发生改变时调用该方法,会被多次调用,因此获取到宽度高度后需要考虑禁用掉代码

6K10
  • Flutter 创建可拖动浮动操作按钮

    本教程有一个示例,说明您需要做什么才能创建浮动操作按钮,只要它位于父小部件内,就可以将其拖动到屏幕周围任何位置。 创建可拖动浮动操作按钮 我们将为这样小部件创建一个类。...所以,我们可以检查内部onPointerUpcallback 仅onPressed值为_isDraggingis 时调用回调false。 下面是用于创建可拖动浮动操作按钮类。...如果我们忽略这一点,用户可以将按钮拖到父框之外。这意味着有必要知道父级宽度高度。...key: _key, child: widget.child, ), ), ); } } 输出: 概括 这就是如何在 Flutter 创建可拖动浮动操作按钮...您还需要获取父级按钮大小,以防止按钮脱离父级框。

    5.7K10

    SwiftUI 创建自适应程序化导航方案

    从 4.0 版本开始,苹果对之前 SwiftUI 有限程序化导航能力进行了大幅度增强,通过引入 NavigationStack NavigationSplitView,开发者基本上具备了全程掌握应用导航状态能力...因此 SwiftUI ,掌握两种导航容器状态表述差异是实现自适应导航方案关键。...推送弹出数据过程对应了导航容器添加移除视图操作。弹出全部数据相当于返回根视图,推送多个数据相当于一次性添加多个视图并直接跳转到最后数据所代表视图。...需要特别注意是, NavigationStack ,根视图是直接通过代码声明,并不存在于“栈”。...,由于处在不同上下文中, navigationDestination destination ,必须用单独 struct 来创建视图。

    4.3K30

    使用 SwiftUI 创建一个灵活选择器

    接下来,创建了用于计算特定字符串值宽度高度字符串扩展。由于我实现允许更改字体大小权重,因此先前提到两个扩展都以由灵活选择器使用 UIFont 作为参数。...映射中,我使用 reduce 函数来总结与给定输入值相关联所有宽度(文本宽度、边框宽度、文本填充间距)。...VStack 高度是根据两个值计算: 输入数据任何项目的高度(类似于宽度计算,通过使用 reduce 函数,总结与项目相关所有高度) 将显示 VStack 行数 private func...此外, VStack 底部,我们设置一个 frame,其中宽度取自 GeometryReader,高度则由先前创建函数计算。 现在 FlexiblePicker 已经完成,可以使用了!...然后,详细介绍了实现该选择器逻辑,包括如何处理选项布局、宽度高度,以及如何处理用户与按钮交互。 最后,提供了一个简单视图实现,可以 SwiftUI 中使用该选择器。

    29720

    服务网格CICD集成:讨论服务网格持续集成持续交付应用。

    现代微服务架构,服务网格已成为一个不可或缺部分,为微服务提供了一种高效、安全、透明通信机制。...在这篇文章,我们将深入探讨这两者结合,并分享一些实用代码技术案例。对于希望提高微服务交付效率质量团队或个人来说,这无疑是一篇必读技术博客。...引言 在过去几年里,随着微服务架构日益普及,服务网格逐渐崭露头角。而CI/CD作为现代软件开发标准实践,也各大团队得到了广泛应用。...服务网格简介 服务网格是一个基础设施层,它负责微服务之间进行可靠、快速安全网络通信。常见服务网格解决方案包括Istio、LinkerdConsul Connect。...服务网格允许我们不同服务版本之间进行流量切换,这使得自动化测试变得更为简单。

    12010

    Android应用实现跳转计数模式切换按钮

    问题描述 程序应用,我尝试引入了两个新功能:连续点击跳转UI切换按钮名称模块显示。...用户使用过程遇到了以下问题: 连续点击跳转UI问题:首次连续点击八次能成功跳转UI,但在第二次尝试时无法跳转。 按钮创建问题:应用在每次操作时创建两个按钮,这种方法视觉上性能上都不够高效率。...取模运算确保了计数器达到设定次数后自动归零,还可以无限次重复点击八次操作。 实现效果:用户现在可以无限次地通过连续点击八次来触发UI跳转。...第二个问题解决方案:控制按钮可见性 为了解决按钮创建问题,同一个活动控制两个按钮可见性,而不是重复创建按钮: 用户可以通过点击“切换升级模式”按钮进入"升级模式"。...用户再次点击“退出升级模式”按钮返回到"蓝牙模式"。 通过这种方式,提升了用户界面的体验。 结论 通过上述解决方案,解决了用户操作上不便,提升了应用整体性能,还可以优化UI便捷性。

    25140

    SwiftUI 之 HStack VStack 切换

    一种方式是用 GeometryReader 测量当前可用空间,并根据宽度是否大于其高度,可以选择使用 HStack 或 VStack 来渲染内容。...DynamicStack 使用了与 HStack VStack 相同 API ,现在可以 LoginActionsView 中直接将以前 VStack 换成新自定义实例: struct...虽然我们也有很多方法能解决这些问题(例如使用类似在这篇 Q&A 中用来使多个视图具有相同宽度高度技术),但真正问题是当我们要动态的确定方向时,测量可用空间是否是一个好方法。...Xcode 14 一部分仍在测试阶段) 其中一个工具是新 Layout 协议,它既能让我们创建完整自定义布局,直接集成到 SwiftUI 布局系统,同时也提供给我们一种更丝滑更动画方式各种布局之间动态切换...我们例子,这意味着我们能同时把 HStack VStack 传递给它,并且代表我们它们中间自动切换。

    2.8K10

    服务网格微服务架构关系:理解服务网格微服务架构角色作用

    摘要 各位技术探索者,猫头虎博主今天带来了一篇关于微服务和服务网格深度探讨。微服务大行其道今天,服务网格逐渐成为了云原生领域中不可或缺一部分。但服务网格微服务到底有何关联?...本文将详细解析二者关系,以及服务网格微服务架构关键作用。对于关心微服务、服务网格、云原生技术 读者,本篇文章绝对是你不二之选!...服务网格定义 服务网格是一个专门为微服务应用设计基础设施层,它使得服务到服务通信快速、可靠且安全。 2.1 服务网格核心功能 流量管理:如路由、负载均衡故障恢复。...监控追踪:提供服务调用实时监控日志追踪。 3. 服务网格微服务架构角色 3.1 解决微服务挑战 微服务虽然带来了许多优势,但也引入了一些新挑战,如服务发现、负载均衡断路器模式。...总结 服务网格微服务架构是云原生领域中两个关键技术。它们相辅相成,共同为企业提供了一个强大、灵活且高度可扩展系统架构。

    20410

    SwiftUI 实现视图居中若干种方法

    SwiftUI ,有很多手段可以达成此目的。本文将介绍其中一些方法,并对每种方法背后实现原理、适用场景以及注意事项做以说明。...当然,你也可以利用 Spacer 这个特性,控制 Text HStack 可使用宽度。...Spacer HStack 只能进行横向填充,并不具备纵向高度高度为 0 ),因此 HStack 最终需求高度与 Text 高度一致。...尺寸为 Color Text 两者最大宽度 x 最大高度,该尺寸是一个可变尺寸( 取决于 Text 文本长度 )当 ZStack 给出建议宽度大于 300 时,Text 可利用宽度将超过...我为本文这种通过多种方法来解决一个问题方式添加了【小题大作】标签,目前使用该便签文章还有: Core Data 查询使用 count 若干方法[6]、 SwiftUI 视图中打开 URL

    6.8K40

    SwiftUI 布局 —— 尺寸( 上 )

    本文将从布局角度入手,为你揭开盖 SwiftUI 尺寸概念上面纱,了解并掌握 SwiftUI 众多尺寸含义与用法;并通过创建符合 Layout 协议 frame fixedSize 视图修饰器复制品...这并非意味着尺寸 SwiftUI 不重要,事实恰恰相反,正是由于 SwiftUI 尺寸是一个十分复杂概念,苹果将绝大多数有关尺寸配置表述都隐藏到了引擎盖之下,刻意对其进行了包装与淡化。...尽管 Layout 协议主要用途是让开发者创建自定义布局容器,且 SwiftUI 仅有少数视图符合该协议,但从 SwiftUI 1.0 开始,SwiftUI 视图布局机制便基本与 Layout...由于可以宽度高度上分别选择不同模式,因此建议模式特指在一个维度上所提供建议内容。 最小化模式 该维度建议尺寸为 0 。...;如果建议高度小于单行显示高度,则需求高度返回单行显示高度 20.33;如果建议高度高于单行显示高度宽度大于单行显示宽度,则需求高度返回单行显示高度 20.33 …… 未指定模式 当两个维度均为未指定模式时

    4.8K20

    使用 SwiftUI Eager Grids

    介绍 早在 2020 年,我们就拥有了 SwiftUI(LazyVGrid LazyHGrid)绘制网格新视图控件。两年后,我们又获得了另一种在网格(Grid)显示视图视图控件。...单元格视图仅在它们被滚动时创建,并且它们滚动时停止计算。 这篇文章主题 Eager Grids 正好相反。SwiftUI 不在乎它们是屏幕上还是屏幕外。所有视图都被同等对待。...尽管这里大多数示例都可以,但每一行可以包含任意数量单元格。 探索网格选项 以下部分,我们将探讨不同网格大小、对齐跨越选项。...在这种情况下,父级是网格。通常,列与其中最宽单元格一样宽。在下面的示例,橙色列宽度由第二行中最宽单元格决定。身高也是如此。示例,第二行与行中最高紫色单元格一样高。...它高度等于宽度 * cos(.pi/6)。如果您想知道原因,请查看 Impossible Grids,我在其中解释了原因。步骤#3:用提供六边形剪裁图像。

    4.4K20

    Ask Apple 2022 与 SwiftUI 有关问答(上)

    对 iOS iPadOS 来说,一个按钮或许有效,但对 macOS 就不太适合了。另外,.contextAction 支持多选。它还会回来吗?...阅读 SwiftUI 动画机制[8] 一文,了解更多有关动画内容。自适应高度 SheetQ:如何在 iOS16 呈现与动态内容高度相匹配 Sheet?... iOS 16 ,通过 presentationDetents 同 GeometryReader 配合,可以创建与内容高度一致 Sheet。此处查看 完整代码[9] 。...常规宽度下,我们详细视图中有一个带有导航堆栈侧边栏。紧凑宽度下,我们有一个标签栏,每个标签都有一个导航堆栈。...image-20221022135326560San Francisco 宽度风格Q:如何在 SwiftUI 如何使用 SF 字体家族新增三种宽度风格( Compressed、Condensed、Expanded

    12.3K20

    5、Java Swing布局管理器(FlowLayout、BorderLayout、CardLayout、BoxLayout、GirdBagLayout GirdLayout)

    因为GridBagLayout每个网格相同大小并且强制组件与网格大小相同,使得容器每个组件也都是相同大小,显得很不自然,而且组件假如容器必须按照固定行列顺序,不够灵活。...GridBagLayout,可以为每个组件指定其包含网格个数,组件可以保留原来大小,可以以任意顺序随意地加入容器任意位置,从而实现真正自由地安排容器每个组件大小位置。...REMAINDER 宽,高度整数值 显示区 网格单元组件显示区所占高度宽度 Insets (0,0,0,0) 组件显示区 外部填充 ipadx,ipady 0 组件显示区 内部填充 public...由图可看出,每一列宽度并不是固定,也不是平均宽度。同理每一行高度也不是均分,可以按照实际情况进行分配列宽度高度。组件可以放在容易一个cell单元格,也可以占几个单元格。...size[0]存放是列宽度,size[1]存放是行高度;数组整数表示该单元格宽度高度为多少像素,小数表示该单元格宽度高度为剩余空间百分之多少,TableLayout.FILL表示将剩余空间填满

    6.2K00

    用 Table SwiftUI创建表格

    欢迎大家 Discord 频道[2] 中进行更多地交流 Table 是 SwiftUI 3.0 为 macOS 平台提供表格控件,开发者通过它可以快捷地创建可交互多列表格。...但相较于 SwiftUI 网格容器( LazyVGrid、Grid )来说,Table 本质上更接近于 List 。开发者可以将 Table 视为具备列特征 List 。...,更习惯于将数据元素以行( Row )形式进行展示( 一行显示数据不同属性内容 ) Table 数据是懒加载,行视图( TableColumn ) onAppear onDisappear... macOS 上,如果 Table 内容( 行宽度 )超过了 Table 宽度,Table 将自动开启横向滚动支持。...无论单元格内容实际高度需求有多大,Table 始终将保持系统给定默认行高。

    4.1K30

    iOS16 3 种新字体宽度样式

    更新: Xcode 14.1 SwiftUI 提供了两个新 API 设置这种新宽度样式。...目前(Xcode 16 beta 6),这种新宽度样式初始值设定只能在 UIKit 中使用,幸运是,我们可以 SwiftUI 轻松使用它。...创建一个 Font 扩展 这种方法实际上将 UIfont 转为 Font 是同一种方法。我们只需要创建一个新 Font 扩展 SwiftUI 中使用起来更容易一些。...不会有任何限制,所有的新宽度都有一样尺寸,同样高度,只会有宽度变化。 这里是拥有同样文本,同样字体大小同样字体样式不同字体宽度样式展示。...Apple 将它使用在他们照片app , "回忆'' 功能,通过组合不同字体宽度样式标题或者子标题上。 这里有一些不同宽度样式字体组合,希望可以激发你灵感。

    1.4K20

    SwiftUI水平条形图

    SwiftUI水平条形图 水平条形图以矩形条形式呈现数据类别,其宽度与它们所代表数值成正比。本文展示了如何在垂直条形图基础上创建一个水平柱状图。 水平条形图不是简单垂直条形图旋转。...Numbers 等应用程序,水平条形图被定义为独立图表类型,而不是垂直条形图。除了条形差异外,x轴y轴格式也需要不同。...Y轴标签Swift代码与垂直条形图X轴代码相似,宽度设置与高度设置互换。两种图表类型y轴线代码都是一样。...水平条形图中,显示条形图上数值并隐藏X轴可以使图表更简洁。 显示隐藏水平条形图上元素 结论 创建水平条形图SwiftUI代码与创建垂直条形图代码不同。...创建垂直条形图时学到技术可以重复使用,但最好将水平条形图视为与垂直条形图不同图表。当我们深入到轴等组件时,可以看到两个图表轴线都是一样,但是它们标签定位在xy之间是换位

    4.8K20

    Midjourney创建一致面部表情背景思路

    ‍静电说:一致性设计对于制作连续性图片,比如绘本,漫画等等非常有效。保持面部是“一个人”情况下,改变表情,甚至为主角换衣服,那就更有用了。今天为大家分享一篇文章,详细讲解了操作思路。...主要思路:(1) 创建一个角色,(2) 自己创建衣服,(3) 使用 1 2 图像提示,并在组合提示添加“穿着[衣服]”。...我认为要开发重复使用角色,人们必须对一个角色有不同视角——肖像、腰部肖像、全身肖像等。...我们得到了四张图像: 我们课程之前讲过,你可以使用木偶法给角色命名,因为Midjourney日志也提到过: 人工智能不会实时学习以响应用户操作。...该技术不会按照您期望方式工作。不同结果字符任何相似之处纯粹是因为您在提示中使用了相同名称。这不是因为种子或收视率。过去提示不会影响将来提示。

    46420

    如何在 SwiftUI 创建条形图

    前言 条形图以矩形条形式呈现数据类别,其宽度高度与它们表示值成比例。本文将展示如何创建一个垂直条形图,其中矩形高度将代表每个类别的值。...系列文章 如何在 SwiftUI 创建条形图 SwiftUI 水平条形图 iOS 16 中用 SwiftUI Charts 创建一个折线图 iOS16 中用 SwiftUI 图表定制一个线图... Swift 图表中使用 Foudation 库测量类型 开始图表布局 SwiftUI 对探索不同布局预览实时视图结果是很友好。...SwiftUI 组合矩形来创建条形图是比较容易。...SwiftUI 是一个很好平台,用于创建视图快速重构独立子视图。 SwiftUI 构建条形图需要做一些工作,随着使用数据来试用条形图,可以确定更多定制化。

    5.2K10
    领券