SwiftUIの複雑なレイアウト
余白をつけて、3分割する
GeometryReader { geometry in VStack { GeometryReader { geometry1 in HStack(spacing: 0) { Text("1").frame(width: geometry1.size.width / 3) .background(Color.green) Text("2").frame(width: geometry1.size.width / 3) .background(Color.orange) Text("3").frame(width: geometry1.size.width / 3) .background(Color.yellow) } .background(Color.blue) } } .frame(width: geometry.size.width * 0.9) .frame(width: geometry.size.width) } }
さらに分割
struct Main_Footer: View { var body: some View { GeometryReader { geometry in VStack { GeometryReader { geometry in HStack(spacing: 0) { Text("1").frame(width: geometry.size.width * 0.3) .background(Color.green) Text("2").frame(width: geometry.size.width * 0.4) .background(Color.orange) HStack(spacing: 0) { Text("3") .frame(maxWidth: .infinity) .background(Color.blue) Text("4") .frame(maxWidth: .infinity) .background(Color.black) } .frame(width: geometry.size.width * 0.3) .background(Color.yellow) } .background(Color.blue) } } .frame(width: geometry.size.width * 0.9) .frame(width: geometry.size.width) } } }
GeometryReader { geometry in VStack { GeometryReader { geometry in HStack(spacing: geometry.size.width * 0.03) { Text("1") .frame(maxWidth: .infinity, maxHeight: .infinity) .background(Color.white) Text("2") .frame(maxWidth: .infinity, maxHeight: .infinity) .background(Color.white ) } } } .frame(width: geometry.size.width * 0.9, height: geometry.size.height) .frame(width: geometry.size.width) }