swift - SwiftUI 奇怪的界面元素排列
问题描述
我是一名学习 SwiftUI 编程的爱好者,但找不到我犯错的地方。我添加了一个按钮和标题,NavigationBar
并且栏非常宽。另外,我不明白为什么照片和 ScrollView 中的图表之间有这么大的空间。关于导航栏,我认为当我添加标题和一个额外的按钮时出现了问题。我删除了它们,但是当我向下移动屏幕时仍然会出现一个宽导航栏。另外,我不明白为什么照片和图表之间有这么大的空间,如果我没有添加任何Spacer
. 下面是当前应用程序 UI 和源代码的屏幕。
struct ScanWithPhotoFromLibrary: View {
@State var cupWidth: String = ""
@State var cupHeight: String = ""
@State var stemLength: String = ""
@State var leafWidth: String = ""
@State var leafLength: String = ""
@State private var showSheet: Bool = false
@State private var showImagePicker: Bool = false
@State private var sourceType: UIImagePickerController.SourceType = .camera
@State private var userImage: UIImage?
@State private var flowerName: String = ""
@State private var timeRecognition: Double = 0.0
@State private var classificationInProcent: Array<Any> = []
@EnvironmentObject var env: ImagePickerCoordinator
@ObservedObject var getOldValueFromDb = getOldValuesFromDb()
var columns = Array(repeating: GridItem(.flexible(), spacing: 20), count: 2)
var body: some View {
NavigationView{
ScrollView(.vertical, showsIndicators: false) {
ZStack(alignment: .top) {
Spacer(minLength: 0)
VStack(){
Image(uiImage: self.userImage ?? UIImage(named: "flower_logo")!)
.resizable()
.aspectRatio( contentMode:.fit)
.edgesIgnoringSafeArea(.top)
.frame(width: 375, height: 375)
HStack{
Text("Statistics")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white)
Spacer(minLength: 0)
}
.padding()
// stats Grid....
LazyVGrid(columns: columns,spacing: 30){
ForEach(stats_Data){stat in
VStack(spacing: 32){
HStack{
Text(stat.title)
.font(.system(size: 22))
.fontWeight(.bold)
.foregroundColor(.white)
Spacer(minLength: 0)
}
// Ring...
ZStack{
Circle()
.trim(from: 0, to: 1)
.stroke(stat.color.opacity(0.05), lineWidth: 10)
.frame(width: (UIScreen.main.bounds.width - 150) / 2, height: (UIScreen.main.bounds.width - 150) / 2)
Circle()
.trim(from: 0, to: (stat.currentData / stat.goal))
.stroke(stat.color, style: StrokeStyle(lineWidth: 10, lineCap: .round))
.frame(width: (UIScreen.main.bounds.width - 150) / 2, height: (UIScreen.main.bounds.width - 150) / 2)
Text(getPercent(current: stat.currentData, Goal: stat.goal) + " %")
.font(.system(size: 22))
.fontWeight(.bold)
.foregroundColor(stat.color)
.rotationEffect(.init(degrees: 90))
}
.rotationEffect(.init(degrees: -90))
Text(getDec(val: stat.currentData))
.font(.system(size: 22))
.foregroundColor(.white)
.fontWeight(.bold)
}
.padding()
.background(Color.white.opacity(0.06))
.cornerRadius(15)
.shadow(color: Color.white.opacity(0.2), radius: 10, x: 0, y: 0)
}
}
}.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .top)
.navigationBarTitle(Text(String(classificationInProcent.count)).foregroundColor(.blue), displayMode: .inline)
.navigationBarItems(trailing:
HStack {
Button("Library") {
self.showImagePicker = true
self.sourceType = .photoLibrary
print("Library tapped!")
}
}
)
}
.navigationBarHidden(false)
}
.sheet(isPresented: $showImagePicker) {
ImagePicker(image: self.$userImage, isShown: self.$showImagePicker, flowerName: self.$flowerName, executionTime: self.$timeRecognition, classificationInProcent: self.$classificationInProcent, sourceType: self.sourceType)
}
}
}
}
解决方案
删除inside NavigationView
,body
因为它已经在 a 内NavigationView
,并且您不需要再往下添加一个新的。
var body: some View {
ScrollView(.vertical, showsIndicators: false) {
推荐阅读
- xcode - Xcode 中的 SceneKit
- angular - loadChildren 是什么意思以及在 Ionic 4 中使用什么?
- php - “警告:preg_replace_callback():需要参数 2,'&#x;',才能成为有效的回调”;PHP 错误
- css - 如何删除这个额外的跨度高度?
- java - Spring HATEOAS HalResourcesSerializer 找不到默认构造函数
- c# - 为什么以这种方式复制数组不会将数字分配给目标数组?
- python - 无法根据循环输入创建列表列表
- c# - 单例服务中如何维护请求会话
- android - Gradle 5 中的工件分类?
- regex - 正则表达式 url 识别/替换