swift - SwiftUI - 将 Button 的内容向左对齐
问题描述
我有一个看起来像这样的设计:
当我将它包装在一个 Button 中时,图像和“HOME”文本向中心移动:
我正在尝试使内容与左侧对齐,但我遇到了麻烦。这是组成这个组件的代码。
struct HomeSection: View {
var body: some View {
Button(action: {
}) {
Group {
Spacer().frame(width: 0, height: 36.0, alignment: .topLeading)
HStack {
Image("home")
.resizable()
.frame(width: 24, height: 24)
.foregroundColor(.navigationTextGrey)
Text("HOME")
.bold()
.font(.system(size: 17.0))
.foregroundColor(Color.navigationTextGrey)
.padding(.leading, 4.0)
}
Rectangle()
.fill(Color.navigationTextGrey)
.frame(width: UIScreen.main.bounds.width - 60, height: 1)
.padding(.top, 6.0)
}
}
}
}
解决方案
您可以在 HStack 中添加一个间隔和填充以将房屋图像与矩形对齐。
var body: some View {
Button(action: {
}) {
Group {
Spacer().frame(width: 0, height: 36.0, alignment: .topLeading)
HStack {
Image("home")
.resizable()
.frame(width: 24, height: 24)
.foregroundColor(.navigationTextGrey)
.padding(.leading, 30.0)
Text("HOME")
.bold()
.font(.system(size: 17.0))
.foregroundColor(Color.navigationTextGrey)
.padding(.leading, 4.0)
Spacer()
}
Rectangle()
.fill(Color.navigationTextGrey)
.frame(width: UIScreen.main.bounds.width - 60, height: 1)
.padding(.top, 6.0)
}
}
}
此外,如果您想稍微清理一下代码,则有一个分隔视图,而不是矩形,它与您的矩形做同样的事情
Divider()
.padding([.leading, .trailing], 30)
推荐阅读
- reactjs - Material UI + Gatsby Google Analytics 插件:“Function components cannot be given refs”警告 Material Ui Link wrapping OutBoundLink
- javascript - 如何用照片添加谷歌评论?
- python - 在 python 中登录到控制台时显示额外的字段
- r - 表示多个 OR("|") 运算符语句的简写符号
- c# - 没有自定义文化的 ClickOnce
- python - 对于两个数据框,如何检索两个标签值的组合在一个但不在另一个的行
- angular - sap模板的使用顺序是什么?
- python - microsoft graph 无法使用刷新令牌获取刷新令牌
- javascript - 如何防止角度应用程序中路由器链接的默认点击行为?
- angular - 在视图模型中未检测到 ag-grid 最后更改的单元格值