如何在macOS SwiftUI上启用渐变按钮（加号和减号）

Question

如何在macOS SwiftUI上启用渐变按钮（加号和减号）

macosswiftui

3

有没有办法在SwiftUI中启用渐变按钮[+|-]？找不到关于这个主题的有用信息。

https://developer.apple.com/design/human-interface-guidelines/components/menus-and-actions/buttons#gradient-buttons/

更新

我对@workingdogsupportUkraine的回答进行了一些外观上的调整。现在渐变按钮看起来与macOS 13上的设置应用程序类似。请随时提出任何改进建议。

import SwiftUI

struct TestView: View {
    @State private var selection: Int?

    struct GradientButton: View {
        var glyph: String
        var body: some View {
            ZStack {
                Image(systemName: glyph)
                    .fontWeight(.medium)
                Color.clear
                    .frame(width: 24, height: 24)
            }
        }
    }
    
    var body: some View {
        Form {
            Section {
                List(selection: $selection) {
                    ForEach(0 ..< 5) { Text("Item \($0)") }
                }
                .padding(.bottom, 24)
                .overlay(alignment: .bottom, content: {
                    VStack(alignment: .leading, spacing: 0) {
                        Divider()
                        HStack(spacing: 0) {
                            Button(action: {}) {
                                GradientButton(glyph: "plus")
                            }
                            Divider().frame(height: 16)
                            Button(action: {}) {
                                GradientButton(glyph: "minus")
                            }
                            .disabled(selection == nil ? true : false)
                        }
                        .buttonStyle(.borderless)
                    }
                    .background(Rectangle().opacity(0.04))
                })
            }
        }
        .formStyle(.grouped)
    }
}

- Roman Banks

上下文不清楚，请提供具有最小可重现性的示例，并详细说明出了什么问题以及期望的结果。 - Asperi

1

据我所知，您必须使用可用的SwiftUI视图（如“Button”、“Picker”等）构建所需的类型，以实现所需的行为，例如推按钮、切换或弹出式按钮。请向我们展示您已经尝试过的代码。在Image()中使用SF符号“加号”和“减号”。 - workingdog support Ukraine

@workingdogsupportUkraine 这正是我想知道的：我应该重新创建这些控制器还是可以启用默认外观。我很快会在这里发布我的解决方案。感谢你的提示。 - Roman Banks

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- workingdog support Ukraine · Accepted Answer

您可以尝试像这样的简单方法：

struct ContentView: View {
    var body: some View {
        List {
            ForEach(0 ..< 5) { Text("item \($0)") }
            HStack {
                Button(action: {print("plus")}) {
                    Image(systemName: "plus").imageScale(.small)
                }
                Divider()
                Button(action: {print("minus")}) {
                    Image(systemName: "minus").imageScale(.small)
                }
            }.buttonStyle(.borderless)
             .frame(width: 66, height: 33)
        }
    }
}