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

如何在SWIFT UI小部件中使分隔线高度等于水平堆栈的另一个子级

在SWIFT UI小部件中,可以通过使用Divider()小部件来实现分隔线的效果。要使分隔线的高度等于水平堆栈中的另一个子级,可以使用GeometryReader来获取水平堆栈的尺寸,并将尺寸应用于Divider()的高度。

下面是一个示例代码:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
            
            Divider()
            
            HStack {
                Text("Child View 1")
                    .padding()
                    .background(Color.gray)
                
                Divider()
                    .background(GeometryReader { geometry in
                        Color.clear.preference(key: SizeKey.self, value: geometry.size.height)
                    })
                
                Text("Child View 2")
                    .padding()
                    .background(Color.gray)
            }
            .onPreferenceChange(SizeKey.self) { height in
                Divider()
                    .frame(height: height)
                    .background(Color.gray)
            }
        }
    }
}

struct SizeKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

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

在上面的代码中,使用了一个GeometryReader来获取HStack的尺寸,然后将尺寸应用于Divider()的高度。通过使用PreferenceKey来传递高度数值,并在onPreferenceChange中对Divider()进行设置。

注意:这只是一个示例代码,具体的使用场景和布局可能会有所不同,需要根据实际情况进行调整。关于SWIFT UI的更多内容,请参考苹果官方文档或相关教程。

希望这个答案能够对您有所帮助!

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

相关·内容

  • 详解移动端UI分隔黄金比例,一条线可能就颠覆你的APP

    乍一看许多APP的布局并不复杂,感觉换成自己也能设计出来,但是当你真的开始着手设计这么一个APP的原型的时候,会发现事情并不是那么简单。看着别人已经设计完成的设计可能觉得不难,可是当自己动手的时候,在特定的元素的选取和设计上很容易陷入困局,这个时候才明白它的难点并不在于工作量的多少,设计者常常深陷于细节构建的囹圄,这才是它的困难之处。即使是元素与元素之间的分隔方式,都能随随便便用一整篇文章来进行探讨。 传统的分隔方式 在UI界面中,最传统也是最常见的分隔方式用的是线,将视觉上或者内容上需要区分的内容用横向或

    04

    OpenCV3 和 Qt5 计算机视觉:1~5

    在最基本的形式和形状中,“计算机视觉”是一个术语,用于标识用于使数字设备具有视觉感觉的所有方法和算法。 这意味着什么? 好吧,这就是听起来的确切含义。 理想情况下,计算机应该能够通过标准相机(或与此相关的任何其他类型的相机)的镜头看到世界,并且通过应用各种计算机视觉算法,它们应该能够检测甚至识别并计数人脸。 图像中的对象,检测视频馈送中的运动,然后执行更多操作,这些操作乍一看只能是人类的期望。 因此,要了解计算机视觉的真正含义,最好知道计算机视觉旨在开发方法以实现所提到的理想,使数字设备具有查看和理解周围环境的能力。 值得注意的是,大多数时间计算机视觉和图像处理可以互换使用(尽管对这个主题的历史研究可能证明应该相反)。 但是,尽管如此,在整本书中,我们仍将使用“计算机视觉”一词,因为它是当今计算机科学界中更为流行和广泛使用的术语,并且因为正如我们将在本章稍后看到的那样,“图像处理”是 OpenCV 库的模块,我们还将在本章的后续页面中介绍,并且还将在其完整的一章中介绍它。

    02

    Android开发笔记(三十八)列表类视图

    AdapterView顾名思义是适配器视图,Spinner、ListView和GridView都间接继承自AdapterView,这三个视图都存在多个元素并排展示的情况,所以需要引入适配器模式。 适配器视图的特点有: 1、定义了适配器的设置方法setAdapter,以及获取方法getAdapter。适配器用于传入视图展示需要的相关数据。 2、定义了一个数据观察者AdapterDataSetObserver,用于在列表数据发生变化时,可以通过notifyDataSetChanged方法来更新视图。 3、定义了单个元素的点击、长按、选中事件。其中点击方法为setOnItemClickListener,点击监听器为OnItemClickListener;长按方法为setOnItemLongClickListener,长按监听器为OnItemLongClickListener;选中方法为setOnItemSelectedListener,选中监听器为OnItemSelectedListener。

    02
    领券