AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • 主页
  • 系统&网络
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • 主页
  • 系统&网络
    • 最新
    • 热门
    • 标签
  • Ubuntu
    • 最新
    • 热门
    • 标签
  • Unix
    • 最新
    • 标签
  • DBA
    • 最新
    • 标签
  • Computer
    • 最新
    • 标签
  • Coding
    • 最新
    • 标签
主页 / coding / 问题 / 77692677
Accepted
vikingosegundo
vikingosegundo
Asked: 2023-12-20 23:22:03 +0800 CST2023-12-20 23:22:03 +0800 CST 2023-12-20 23:22:03 +0800 CST

如何防止ZStack中的形状更改其他视图框架?

  • 772

我使用 ZStack 将四个形状放置在背景中。我在上面一层放置了两个按钮和一个切换开关。在纵向模式下,切换呈现在屏幕外,如视图层次结构中所示。通过注释掉形状,可以清楚地看出,橙色圆圈和较大的矩形正在创建这种效果。

如何创建形状可能大于屏幕边界的背景,同时上面的图层不受此影响?

代码可以在这里找到:https ://gitlab.com/vikingosegundo/button-and-toggle-styles

struct GlassmorphismButtons: View {
    @State private var isToggled = false

    var body: some View {
        ZStack {
            LinearGradient(colors: [Color.cyan.opacity(0.7), Color.purple.opacity(0.3)], startPoint: .topLeading, endPoint: .bottomTrailing).edgesIgnoringSafeArea(.all)
            ZStack {
                RoundedRectangle(cornerRadius: 10, style: .continuous)
                    .frame(width: 300, height: 300)
                    .foregroundStyle(LinearGradient(colors: [.indigo, .teal], startPoint: .top, endPoint: .leading))
                    .offset(.init(width: -100, height: 100))
                    .rotationEffect(.degrees(15))
                    .blur(radius: 5)

                Circle()
                    .frame(width: 300)
                    .foregroundColor(Color.blue)
                    .offset(x: -100, y: -150)
                    .blur(radius: 5)

               RoundedRectangle(cornerRadius: 30, style: .continuous)
                   .frame(width: 500, height: 500)
                   .foregroundStyle(LinearGradient(colors: [.purple, .mint], startPoint: .top, endPoint: .leading))
                   .offset(x: 300)
                   .rotationEffect(.degrees(30))
                   .blur(radius: 5)

               Circle()
                   .frame(width: 450)
                   .foregroundStyle(Color.orange)
                   .offset(x: 120, y: -200)
                   .blur(radius: 5)
            }
            VStack {
                VStack {
                    HStack {
                        Button {
                            print("button clicked")
                        } label: {
                            Text("Click me")
                        }.buttonStyle(FrostedGlassButtonStyle())

                        Button {
                            print("button clicked")
                        } label: {
                            Image(systemName: "heart.fill")
                        }.buttonStyle(FrostedGlassButtonStyle())
                    }
                }
                HStack {
                    Toggle(isOn: $isToggled) {
                        Text("Toggle")
                    }
                }
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        TabView {
            GlassmorphismButtons()
                .tabItem { Label("Glassmorphism", systemImage: "list.dash") }
            NeumorphismButtons()
                .tabItem { Label("Neumorphism", systemImage: "list.dash") }
        }
    }
}

#Preview {
    ContentView()
}

截屏 截屏 截屏 查看层次结构

swiftui
  • 1 1 个回答
  • 17 Views

1 个回答

  • Voted
  1. Best Answer
    Sweeper
    2023-12-20T23:33:25+08:002023-12-20T23:33:25+08:00

    containerRelativeFrame在VStack(您想要放入屏幕内的东西)上使用。

    VStack {
        VStack { ... }
        HStack { ... }
    }
    .containerRelativeFrame(.horizontal)
    

    .vertical如果这也是垂直问题,您也可以添加。

    • 1

相关问题

  • SwiftUI:如何创建颜色较浅的渐变?

  • SwiftUI - 带有“绑定”变量的通用视图

  • 创建日历日视图

  • 如何让 SwiftUI 的动画变慢

  • 不理解 SwiftUI 文本布局

Sidebar

Stats

  • 问题 205573
  • 回答 270741
  • 最佳答案 135370
  • 用户 68524
  • 热门
  • 回答
  • Marko Smith

    使用 <font color="#xxx"> 突出显示 html 中的代码

    • 2 个回答
  • Marko Smith

    为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类?

    • 1 个回答
  • Marko Smith

    您可以使用花括号初始化列表作为(默认)模板参数吗?

    • 2 个回答
  • Marko Smith

    为什么列表推导式在内部创建一个函数?

    • 1 个回答
  • Marko Smith

    我正在尝试仅使用海龟随机和数学模块来制作吃豆人游戏

    • 1 个回答
  • Marko Smith

    java.lang.NoSuchMethodError: 'void org.openqa.selenium.remote.http.ClientConfig.<init>(java.net.URI, java.time.Duration, java.time.Duratio

    • 3 个回答
  • Marko Smith

    为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)?

    • 4 个回答
  • Marko Smith

    为什么库中不调用全局变量的构造函数?

    • 1 个回答
  • Marko Smith

    std::common_reference_with 在元组上的行为不一致。哪个是对的?

    • 1 个回答
  • Marko Smith

    C++17 中 std::byte 只能按位运算?

    • 1 个回答
  • Martin Hope
    fbrereto 为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类? 2023-12-21 00:31:04 +0800 CST
  • Martin Hope
    比尔盖子 您可以使用花括号初始化列表作为(默认)模板参数吗? 2023-12-17 10:02:06 +0800 CST
  • Martin Hope
    Amir reza Riahi 为什么列表推导式在内部创建一个函数? 2023-11-16 20:53:19 +0800 CST
  • Martin Hope
    Michael A fmt 格式 %H:%M:%S 不带小数 2023-11-11 01:13:05 +0800 CST
  • Martin Hope
    God I Hate Python C++20 的 std::views::filter 未正确过滤视图 2023-08-27 18:40:35 +0800 CST
  • Martin Hope
    LiDa Cute 为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)? 2023-08-24 20:46:59 +0800 CST
  • Martin Hope
    jabaa 为什么库中不调用全局变量的构造函数? 2023-08-18 07:15:20 +0800 CST
  • Martin Hope
    Panagiotis Syskakis std::common_reference_with 在元组上的行为不一致。哪个是对的? 2023-08-17 21:24:06 +0800 CST
  • Martin Hope
    Alex Guteniev 为什么编译器在这里错过矢量化? 2023-08-17 18:58:07 +0800 CST
  • Martin Hope
    wimalopaan C++17 中 std::byte 只能按位运算? 2023-08-17 17:13:58 +0800 CST

热门标签

python javascript c++ c# java typescript sql reactjs html

Explore

  • 主页
  • 问题
    • 最新
    • 热门
  • 标签
  • 帮助

Footer

AskOverflow.Dev

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve