用SwiFUI写一个横向的4个按钮,自适应宽度,按钮背景颜色#a38f25,圆角10像素,按钮间距20像素,按钮文字分别是:默认,收藏的,导入的,删除的
时间: 2023-04-10 17:02:56 浏览: 56
可以使用SwiftUI的HStack来实现横向的4个按钮,同时设置按钮的自适应宽度和背景颜色。
代码示例:
```swift
HStack(spacing: 10) {
Button(action: {
// 点击按钮1的操作
}) {
Text("按钮1")
.padding(.horizontal, 20)
.padding(.vertical, 10)
.background(Color.blue)
.foregroundColor(.white)
}
Button(action: {
// 点击按钮2的操作
}) {
Text("按钮2")
.padding(.horizontal, 20)
.padding(.vertical, 10)
.background(Color.green)
.foregroundColor(.white)
}
Button(action: {
// 点击按钮3的操作
}) {
Text("按钮3")
.padding(.horizontal, 20)
.padding(.vertical, 10)
.background(Color.orange)
.foregroundColor(.white)
}
Button(action: {
// 点击按钮4的操作
}) {
Text("按钮4")
.padding(.horizontal, 20)
.padding(.vertical, 10)
.background(Color.red)
.foregroundColor(.white)
}
}
```
其中,HStack用于将4个按钮横向排列,spacing参数用于设置按钮之间的间距。每个按钮都是一个Button视图,其中Text用于显示按钮的文本,padding用于设置按钮的内边距,background用于设置按钮的背景颜色,foregroundColor用于设置按钮文本的颜色。通过调整padding的值,可以实现按钮的自适应宽度。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)