Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@fatbobman
fatbobman committed Jul 8, 2022
1 parent 9e26cc4 commit 5e1abc7
Show file tree
Hide file tree
Showing 6 changed files with 148 additions and 63 deletions.
Binary file added MyZStack/.DS_Store
View file
Binary file not shown.
8 changes: 4 additions & 4 deletions MyZStack/MyZStack/ContentView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,20 @@ struct ContentView: View {
var body: some View {
HStack(alignment: .firstTextBaseline) {
ZStack(alignment: alignment) {
Text("山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？")
.frame(width: 80)
Color.red.opacity(0.5)
.frame(width: 100, height: 100)
Text("山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？")
.frame(width: 80)
Text("肘子的Swift记事本")
.frame(width: 80, height: 80, alignment: .top)
}
.border(.blue)

MyZStack(alignment: alignment) {
Text("山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？")
.frame(width: 80)
Color.red.opacity(0.5)
.frame(width: 100, height: 100)
Text("山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？")
.frame(width: 80)
Text("肘子的Swift记事本")
.frame(width: 80, height: 80, alignment: .top)
}
Expand Down
57 changes: 1 addition & 56 deletions My_Frame/My_Frame/ContentView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,62 +13,7 @@ import SwiftUI

struct ContentView: View {
var body: some View {
// VStack(alignment: .leading) {
// Text("abc asgljk asdg;lkjasdg ;lkjsdg ")
// .frame(width: 30, alignment: .leading)
// .fixedSize(horizontal: false, vertical: false)
// .border(.red)
//
// Text("abc asgljk asdg;lkjasdg ;lkjsdg ")
// .myFrame(width: 30, alignment: .leading)
// .fixedSize(horizontal: false, vertical: false)
// .border(.red)
//
// }
// .frame(width:50)
//// .border(.red)

// VStack {
//// Text("如果指定了一个最小约束，并且父类为框架建议的尺寸小于这个视图的尺寸，那么建议的")
// Rectangle()
// .lineLimit(2...3)
// .frame(maxWidth: 200, maxHeight: 200,alignment: .trailingLastTextBaseline)
// .border(.red)
// .fixedSize(horizontal: true, vertical: false)
// .printSizeInfo()
//
//// Text("如果指定了一个最小约束，并且父类为框架建议的尺寸小于这个视图的尺寸，那么建议的")
// Rectangle()
// .lineLimit(2...3)
// .frame(maxWidth: 200, maxHeight: 200,alignment:.trailingLastTextBaseline)
// .border(.red)
// .myFixedSize(horizontal: true, vertical: false)
// .printSizeInfo()
// }
// .frame(width: 300)

VStack(spacing: 20) {
let str = "山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？"

Rectangle()
.myFixedSize()

Text(str)
.myFixedSize(horizontal: false, vertical: true)

Text(str)
.frame(maxWidth: 100)
.myFixedSize()

Text(str)
.frame(minWidth: 50, idealWidth: 120, maxWidth: 150)
.myFixedSize()

Text(str)
.frame(maxHeight: 50)
.myFixedSize(horizontal: false, vertical: true)
}
.frame(width: 200, height: 30)
Text("MyFrame Demo")
}
}

Expand Down
27 changes: 27 additions & 0 deletions My_Frame/My_Frame/FixedSizeLayout.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,3 +52,30 @@ public extension View {
myFixedSize(horizontal: true, vertical: true)
}
}

struct MyFixedSize_Preview:PreviewProvider{
static var previews: some View{
VStack(spacing: 20) {
let str = "山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？"

Rectangle()
.myFixedSize()

Text(str)
.myFixedSize(horizontal: false, vertical: true)

Text(str)
.frame(maxWidth: 100)
.myFixedSize()

Text(str)
.frame(minWidth: 50, idealWidth: 120, maxWidth: 150)
.myFixedSize()

Text(str)
.frame(maxHeight: 50)
.myFixedSize(horizontal: false, vertical: true)
}
.frame(width: 200, height: 30)
}
}
40 changes: 38 additions & 2 deletions My_Frame/My_Frame/FlexFrameLayout.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ private struct MyFlexFrameLayout: Layout, ViewModifier {

let contentWidth = content.sizeThatFits(proposal).width
if let idealWidth, proposal.width == nil {
resultWidth = idealWidth
resultWidth = idealWidth // fixedSize(horizontal:true)
} else if minWidth == nil, maxWidth == nil {
resultWidth = contentWidth
resultWidth = contentWidth // 没有在横向维度上进行设置
} else if let minWidth, let maxWidth {
resultWidth = clamp(min: minWidth, max: maxWidth, source: proposal.width ?? contentWidth)
} else if let minWidth {
Expand Down Expand Up @@ -107,3 +107,39 @@ public extension View {
return modifier(MyFlexFrameLayout(minWidth: minWidth, idealWidth: idealWidth, maxWidth: maxWidth, minHeight: minHeight, idealHeight: idealHeight, maxHeight: maxHeight, alignment: alignment))
}
}

struct MyFlexFrame_Preview:PreviewProvider{
static var previews: some View{
HStack{
let str = "山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？"

VStack(alignment: .leading) {
Text(str)
.frame(width: 30, alignment: .leading)
.fixedSize(horizontal: false, vertical: false)
.border(.red)

Text(str)
.myFrame(width: 30, alignment: .leading)
.fixedSize(horizontal: false, vertical: false)
.border(.red)

}
.frame(width:50)
.border(.red)

VStack {
Text(str)
.frame(maxWidth: 200, maxHeight: 200,alignment: .trailingLastTextBaseline)
.border(.red)
.fixedSize(horizontal: true, vertical: false)

Text(str)
.myFrame(maxWidth: 200, maxHeight: 200,alignment:.trailingLastTextBaseline)
.border(.red)
.myFixedSize(horizontal: true, vertical: false)
}
.frame(width: 300)
}
}
}
79 changes: 78 additions & 1 deletion My_Frame/My_Frame/FrameLayout.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,18 @@ private struct MyFrameLayout: Layout, ViewModifier {
}

func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
guard subviews.count == 2, let background = subviews.first, let content = subviews.last else { fatalError("Can't use MyFrameLayout directly") }
guard subviews.count == 2, let background = subviews.first, let content = subviews.last else {
fatalError("Can't use MyFrameLayout directly")
}
// background is Color.clear
background.place(at: .zero, anchor: .topLeading, proposal: .init(width: bounds.width, height: bounds.height))
// get alignment guide position of background
let backgroundDimensions = background.dimensions(in: .init(width: bounds.width, height: bounds.height))
let offsetX = backgroundDimensions[alignment.horizontal]
let offsetY = backgroundDimensions[alignment.vertical]
// get alignment guide from content
let contentDimensions = content.dimensions(in: .init(width: bounds.width, height: bounds.height))
// 计算 content 的 topLeading 偏移量
let leading = offsetX - contentDimensions[alignment.horizontal] + bounds.minX
let top = offsetY - contentDimensions[alignment.vertical] + bounds.minY
content.place(at: .init(x: leading, y: top), anchor: .topLeading, proposal: .init(width: bounds.width, height: bounds.height))
Expand All @@ -73,3 +79,74 @@ public extension View {
modifier(MyFrameLayout(width: nil, height: nil, alignment: .center))
}
}

struct MyFrame_Preview: PreviewProvider {
static var previews: some View {
Grid {
GridRow {
Text("frame")
Text("myFrame")
}

GridRow {
Text("Hello world")
.frame(width: nil, height: nil)
.border(.red)

Text("Hello world")
.myFrame(width: nil, height: nil)
.border(.red)
}

GridRow {
Text("Hello world")
.frame(width: 30)
.border(.red)

Text("Hello world")
.myFrame(width: 30)
.border(.red)
}

GridRow {
Rectangle()
.frame(width: 50, height: 50)
.border(.red)

Rectangle()
.myFrame(width: 50, height: 50)
.border(.red)
}

GridRow {
Text("Hello world")
.frame(height: 50)
.border(.red)

Text("Hello world")
.myFrame(height: 50)
.border(.red)
}

GridRow {
Text("Hello world")
.frame(width: 100, height: 100, alignment: .leadingFirstTextBaseline)
.border(.red)

Text("Hello world")
.myFrame(width: 100, height: 100, alignment: .leadingFirstTextBaseline)
.border(.red)
}

GridRow {
Text("Hello world")
.frame(width: 100, height: 100, alignment: .bottomLeading)
.border(.red)

Text("Hello world")
.myFrame(width: 100, height: 100, alignment: .bottomLeading)
.border(.red)
}
}
}
}

0 comments on commit 5e1abc7

Please sign in to comment.