swiftui间距不符合预期
swiftui spacing is not in line with expectations
我的代码如下:
import SwiftUI
struct DotView: View {
var body: some View {
GeometryReader { geo in
let width = geo.size.width
VStack() {
Circle()
.frame(width: width, height: width)
Spacer()
Circle()
.frame(width: width, height: width)
}
}
}
}
struct TestView: View {
var body: some View {
GeometryReader { geo in
VStack() {
HStack() {
Text("11")
DotView()
.frame(width: 8, height: 23, alignment: .center)
Text("22")
}
.font(.system(size: 48))
.background(Color.gray)
HStack() {
Text("123456789")
}
.font(.system(size: 30))
.background(Color.gray)
}
.frame(width: geo.size.width, height: geo.size.height)
.background(Color.blue)
}
}
}
struct TestView_Previews: PreviewProvider {
static var previews: some View {
TestView()
.frame(width: 200, height: 200, alignment: .center)
.cornerRadius(23.0)
}
}
视图如下图,"11:22"和"123456789"之间有一个空格
但是,当我将视图 DotView
评论为以下代码时:
struct TestView: View {
var body: some View {
GeometryReader { geo in
VStack() {
HStack() {
Text("11")
// DotView()
// .frame(width: 8, height: 23, alignment: .center)
Text("22")
}
.font(.system(size: 48))
.background(Color.gray)
HStack() {
Text("123456789")
}
.font(.system(size: 30))
.background(Color.gray)
}
.frame(width: geo.size.width, height: geo.size.height)
.background(Color.blue)
}
}
}
间距消失。为什么这个DotView会影响间距?
您可以在 TestView 中将“(spacing: 0)”添加到 VStack
VStack(间距: 0)
我的代码如下:
import SwiftUI
struct DotView: View {
var body: some View {
GeometryReader { geo in
let width = geo.size.width
VStack() {
Circle()
.frame(width: width, height: width)
Spacer()
Circle()
.frame(width: width, height: width)
}
}
}
}
struct TestView: View {
var body: some View {
GeometryReader { geo in
VStack() {
HStack() {
Text("11")
DotView()
.frame(width: 8, height: 23, alignment: .center)
Text("22")
}
.font(.system(size: 48))
.background(Color.gray)
HStack() {
Text("123456789")
}
.font(.system(size: 30))
.background(Color.gray)
}
.frame(width: geo.size.width, height: geo.size.height)
.background(Color.blue)
}
}
}
struct TestView_Previews: PreviewProvider {
static var previews: some View {
TestView()
.frame(width: 200, height: 200, alignment: .center)
.cornerRadius(23.0)
}
}
视图如下图,"11:22"和"123456789"之间有一个空格
但是,当我将视图 DotView
评论为以下代码时:
struct TestView: View {
var body: some View {
GeometryReader { geo in
VStack() {
HStack() {
Text("11")
// DotView()
// .frame(width: 8, height: 23, alignment: .center)
Text("22")
}
.font(.system(size: 48))
.background(Color.gray)
HStack() {
Text("123456789")
}
.font(.system(size: 30))
.background(Color.gray)
}
.frame(width: geo.size.width, height: geo.size.height)
.background(Color.blue)
}
}
}
间距消失。为什么这个DotView会影响间距?
您可以在 TestView 中将“(spacing: 0)”添加到 VStack
VStack(间距: 0)