英文:
Is there a way to create a Two-Side Button in SwiftUI?
问题
希望大家都过得好。
我正在开发我的第一个应用程序，使用 Figma 创建了一个双面按钮，使用矩形。我非常喜欢这个设计，我想知道是否有办法在 SwiftUI 中重新创建它。正如你所看到的，当我按下“歌词”或“和弦”时，应该在所选单词下方显示一个小的“-”以指示我目前在哪个部分。
我实际上无法以我想要的方式创建这个按钮。我一直在努力，但无法弄清楚如何使其工作。
基本上，我想做的是在 SwiftUI 中创建一个很酷的双面按钮，就像我在 Figma 中做的那样。
英文:
I hope you're all doing well here.
I'm working on developing my first app, and I've created a two-sided button in Figma using a rectangle. I really like the design, and I was wondering if there's a way to recreate it in SwiftUI. As you can see, when I press either "Lyrics" or "Chords," a small "-" should appear below the selected word to indicate which section I'm currently in.
I couldn't actually create the button the way I wanted it to be. I've been struggling with it and couldn't figure out how to make it work.
Basically, what I'm trying to do is create a cool two-sided button in SwiftUI, just like the one I made in Figma.
答案1
得分: 0
尝试使用带有.pickerStyle(.segmented)的Picker来实现这种方法。
根据需要调整其外观。
struct ContentView: View {
@State var selection = 0
var body: some View {
Picker("", selection: $selection) {
Text("歌词").tag(0)
Text("和弦").tag(1)
}
.pickerStyle(.segmented)
.overlay(RoundedRectangle(cornerRadius: 15)
.stroke(Color.gray, lineWidth: 2)
)
.frame(width: 234)
}
}
你也可以在HStack中使用两个Button，如下所示：
struct ContentView: View {
@State var selection = 0
var body: some View {
HStack {
Button(action: {selection = 0}) {
Text("歌词").underline(selection == 0)
}
Divider()
Button(action: {selection = 1}) {
Text("和弦").underline(selection == 1)
}
}.frame(width: 160, height: 33)
.overlay(RoundedRectangle(cornerRadius: 15).stroke(Color.gray, lineWidth: 2))
.frame(width: 160)
}
}
英文:
try this approach using a Picker with .pickerStyle(.segmented).
Adjust the looks of it as you see fit.
struct ContentView: View {
@State var selection = 0
var body: some View {
Picker("", selection: $selection) {
Text("Lyrics").tag(0)
Text("Chords").tag(1)
}
.pickerStyle(.segmented)
.overlay(RoundedRectangle(cornerRadius: 15)
.stroke(Color.gray, lineWidth: 2)
)
.frame(width: 234)
}
}
You could also use two Buttons in a HStack, such as:
struct ContentView: View {
@State var selection = 0
var body: some View {
HStack {
Button(action: {selection = 0}) {
Text("Lyrics").underline(selection == 0)
}
Divider()
Button(action: {selection = 1}) {
Text("Chords").underline(selection == 1)
}
}.frame(width: 160, height: 33)
.overlay(RoundedRectangle(cornerRadius: 15).stroke(Color.gray, lineWidth: 2))
.frame(width: 160)
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论