SwiftUI 中自定义 container

简介: 自定义容器是在 Swift UI 中实现复杂布局和视图组合的强大工具。通过自定义容器,我们可以将一组视图组织在一起,以创建可重用的 UI 元素,同时保持一致的外观和行为。在本文中,我们将探讨如何使用自定义容器来实现一个主题,并深入了解其设计和实现细节。

SwiftUI 中自定义 container

自定义容器是在 Swift UI 中实现复杂布局和视图组合的强大工具。通过自定义容器,我们可以将一组视图组织在一起,以创建可重用的 UI 元素,同时保持一致的外观和行为。在本文中,我们将探讨如何使用自定义容器来实现一个主题,并深入了解其设计和实现细节。

在 Swift UI 中,容器是一种特殊类型的视图,它可以包含其他视图,并根据需要排列、组合和布局这些视图。Swift UI 提供了一些内置的容器视图,如 VStackHStackZStack,用于垂直、水平和层叠布局。然而,有时我们需要更灵活的布局方式,这就是自定义容器发挥作用的时候。

//
//  CustomContainer.swift
//  GuessFlag
//
//  Created by zhangyarn on 2022/11/13.
//

import SwiftUI

struct Mesh<Content: View> : View {
    

   let row : Int;
   let col: Int;
   @ViewBuilder let content: (Int, Int) -> Content;

   var body: some View {
    
       VStack{
    
           ForEach(0..<row) {
    r in
               HStack{
    
                   ForEach(0..<col) {
    c in
                       content(r,c);
                   }
               }
           }
       }
   }
}

struct CustomContainer: View {
    
   var body: some View {
    
//        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
       Mesh(row: 3,col:3) {
    r, c in
           Image(systemName: "person")
           Text("R\(r) C\(c)")
               .padding()
       }
   }
}

struct CustomContainer_Previews: PreviewProvider {
    
   static var previews: some View {
    
       CustomContainer()
   }
}

上面的代码中我们定义了一个 Mesh 的 container, 它有两个参数 rowcol, 来画一个 row X col 的组成的一个网格。

相关文章
|
人工智能 小程序 算法
分享64个JavaGame源码总有一个是你想要的
分享64个JavaGame源码总有一个是你想要的
348 0
|
4月前
|
缓存 Android开发 iOS开发
Kotlin跨平台Compose Multiplatform实战指南
Kotlin Multiplatform (KMP) 结合 Compose Multiplatform,助力开发者用一套代码构建跨平台应用(Android、iOS、桌面和 Web)。本文提供实战指南,涵盖环境搭建、项目结构、共享 UI 编写、平台适配、状态管理及资源处理等内容。通过 expect/actual 处理差异,借助官方文档与示例项目学习,减少重复代码,优化多平台开发体验。
1049 18
|
7月前
|
存储 人工智能 搜索推荐
阿里云佘俊泉:边缘云场景的探索与机遇
阿里云佘俊泉:边缘云场景的探索与机遇
214 0
|
消息中间件 监控 调度
Celery与RabbitMQ的结合【Python】
【8月更文挑战第18天】 Celery与RabbitMQ结合是构建高效Python分布式系统的利器。Celery作为分布式任务队列,支持任务调度与结果管理;RabbitMQ则确保了消息的可靠传递。二者联用不仅提升了系统的异步处理能力,还增强了其扩展性与可靠性。通过简单的安装与配置,即可实现任务的异步执行与调度,同时利用监控工具优化性能并确保安全性。这种组合适用于需要处理大量异步任务的应用场景,极大地简化了分布式系统的设计与实现。
|
Dubbo Java 应用服务中间件
阿里巴巴资深架构师深度解析微服务架构设计之SpringCloud+Dubbo
软件架构是一个包含各种组织的系统组织,这些组件包括Web服务器,应用服务器,数据库,存储,通讯层),它们彼此或和环境存在关系。系统架构的目标是解决利益相关者的关注点。
|
11月前
|
运维 监控 安全
构建高效运维体系:从监控到自动化的实践之路
在当今信息技术飞速发展的时代,运维作为保障企业信息系统稳定运行的关键环节,其重要性日益凸显。本文将探讨如何通过构建高效的运维体系,实现从被动响应到主动预防的转变,以及如何利用自动化工具提升运维效率和质量。我们将从运维的基本概念出发,逐步深入到监控、自动化和安全管理等方面,为企业提供一套实用的运维优化方案。
222 0
|
Perl
pod spec lint编译时报error: include of non-modular header inside framework module
pod spec lint编译时报error: include of non-modular header inside framework module
316 1
|
JSON JavaScript 前端开发
Vue项目使用Cookie,以Json格式存入与读取Cookie,设置过期时间以及删除操作
这篇文章介绍了在Vue项目中如何使用JavaScript操作Cookie,包括设置、读取、设置过期时间以及删除Cookie的方法。
642 0
|
边缘计算 安全 开发工具
探索未来计算的可能性:Wasmer — 高性能WebAssembly运行时
探索未来计算的可能性:Wasmer — 高性能WebAssembly运行时
416 2
|
存储 分布式计算 NoSQL
DataX深度剖析:解读数据传输工具的设计理念与架构特点
DataX深度剖析:解读数据传输工具的设计理念与架构特点
1107 5
DataX深度剖析:解读数据传输工具的设计理念与架构特点