SwiftUIに内包されているStructをまとめています。動作確認用です。 今後も増やしていく予定です。
また、端末で動作確認できるようにもしているので、もし興味があればローカルで端末にビルドいただければと思います。
開く
@State var number = 0
var body: some View {
VStack {
Text("\(number)")
.padding()
Button(action: {
number = number + 1
}) {
Text("DefaultButtonStyle")
}.buttonStyle(DefaultButtonStyle())
Button(action: {
number = number + 1
}) {
Text("PlainButtonStyle")
}.buttonStyle(PlainButtonStyle())
Button(action: {
number = number + 1
}) {
Text("BorderlessButtonStyle")
}.buttonStyle(BorderlessButtonStyle())
}
}開く
@State private var selectedColor = Color.red
var body: some View {
ColorPicker("ColorPicker", selection: $selectedColor)
.frame(width: 150)
}開く
@State private var date = Date()
var body: some View {
VStack {
DatePicker(selection: $date, displayedComponents: [.date]) {
Text("displayedComponents .date")
}.padding()
DatePicker(selection: $date, displayedComponents: [.hourAndMinute]) {
Text("displayedComponents .hourAndMinute")
}.padding()
}
}
@State private var date = Date()
var body: some View {
ScrollView(.vertical){
VStack {
DatePicker(selection: $date) {
Text("CompactDatePickerStyle")
}.datePickerStyle(CompactDatePickerStyle())
DatePicker(selection: $date) {
Text("GraphicalDatePickerStyle")
}.datePickerStyle(GraphicalDatePickerStyle())
DatePicker(selection: $date) {
Text("WheelDatePickerStyle")
}.datePickerStyle(WheelDatePickerStyle())
DatePicker(selection: $date) {
Text("DefaultDatePickerStyle")
}.datePickerStyle(DefaultDatePickerStyle())
}
}
}開く
struct ToggleStates {
var oneIsOn: Bool = false
var twoIsOn: Bool = true
}
@State private var toggleStates = ToggleStates()
@State private var topExpanded: Bool = true
var body: some View {
VStack {
DisclosureGroup("Items", isExpanded: $topExpanded) {
Toggle("Toggle 1", isOn: $toggleStates.oneIsOn)
Toggle("Toggle 2", isOn: $toggleStates.twoIsOn)
DisclosureGroup("Sub-items") {
Text("Sub-item 1")
}
}.padding()
}
}開く
@Environment(\.editMode) var editMode
@State private var fruits = [
"Apple",
"Banana",
"Papaya",
"Mango"
]
var body: some View {
VStack {
NavigationView{
List {
ForEach(
fruits,
id: \.self
) { fruit in
Text(fruit)
}
.onDelete { self.fruits.remove(atOffsets: $0) }
.onMove { self.fruits.move(fromOffsets: $0, toOffset: $1) }
}
.navigationTitle("Fruits")
.toolbar { EditButton() }
}
Text(String(describing: editMode?.wrappedValue))
}
}開く
@State var toggleState = false
var body: some View {
VStack {
Form {
Section(header: Text("Text")) {
Text("item 1")
Text("item 2")
}
Section(header: Text("Toggle")) {
Toggle(isOn: $toggleState) {
Text("item 3")
}
}
Section(header: Text("Button")) {
Button(action: {}) {
Text("item 4")
}
}
}
}
}開く
var body: some View {
GroupBox(
label: Label("Heart Rate", systemImage: "heart.fill").foregroundColor(.red)
) {
Text("Your hear rate is 90 BPM.")
}.padding()開く
var body: some View {
VStack {
Label("Label", systemImage: "42.circle")
.padding()
Label("Label: TitleOnlyLabelStyle", systemImage: "bolt.fill")
.padding()
.labelStyle(TitleOnlyLabelStyle())
Label("Label: IconOnlyLabelStyle", systemImage: "bolt.fill")
.padding()
.labelStyle(IconOnlyLabelStyle())
Label("Label: TitleAndIconLabelStyle", systemImage: "bolt.fill")
.padding()
.labelStyle(TitleAndIconLabelStyle())
Label {
Text("bbbb")
.font(.body)
.foregroundColor(.primary)
Text("cccc")
.font(.subheadline)
.foregroundColor(.secondary)
} icon: {
Circle()
.fill(Color.red)
.frame(width: 44, height: 44, alignment: .center)
.overlay(Text("aaa"))
}
}開く
var body: some View {
Link(destination: URL(string: "https://www.google.com/?hl=ja")!) {
Text("googleを開く")
}.padding()
.font(.title)
.foregroundColor(.green)
}開く
var body: some View {
VStack {
NavigationView {
List {
NavigationLink(destination: ButtonView()) {
Text("Button Page")
}
NavigationLink(destination: ColorPickerView()) {
Text("ColorPicker Page")
}
}
}.navigationViewStyle(StackNavigationViewStyle())
NavigationView {
List {
NavigationLink(destination: ButtonView()) {
Text("Button Page")
}
NavigationLink(destination: ColorPickerView()) {
Text("ColorPicker Page")
}
}
}.navigationViewStyle(DoubleColumnNavigationViewStyle())
}.navigationBarTitle(Text("Navigation"))開く
struct FileItem: Hashable, Identifiable, CustomStringConvertible {
var id: Self { self }
var name: String
var children: [FileItem]? = nil
var description: String {
switch children {
case nil:
return "📄 \(name)"
case .some(let children):
return children.isEmpty ? "📂 \(name)" : "📁 \(name)"
}
}
}
let data =
FileItem(name: "users", children:
[FileItem(name: "user1234", children:
[FileItem(name: "Photos", children:
[FileItem(name: "photo001.jpg"),
FileItem(name: "photo002.jpg")]),
FileItem(name: "Movies", children:
[FileItem(name: "movie001.mp4")]),
FileItem(name: "Documents", children: [])
]),
FileItem(name: "newuser", children:
[FileItem(name: "Documents", children: [])
])
])
var body: some View {
VStack {
OutlineGroup(data, id: \.id, children: \.children) { item in
Text("\(item.description)")
}.padding()
}
}開く
enum Flavor: String, CaseIterable, Identifiable {
case chocolate
case vanilla
case strawberry
var id: String { self.rawValue }
}
enum Topping: String, CaseIterable, Identifiable {
case nuts
case cookies
case blueberries
var id: String { self.rawValue }
}
extension Flavor {
var suggestedTopping: Topping {
switch self {
case .chocolate: return .nuts
case .vanilla: return .cookies
case .strawberry: return .blueberries
}
}
}
struct PickerView: View {
@State private var selectedFlavor = Flavor.chocolate
@State private var suggestedTopping: Topping = .cookies
var body: some View {
VStack {
Picker(selection: $selectedFlavor, label: Text("Flavor")) {
ForEach(Flavor.allCases) { flavor in
Text(flavor.rawValue.capitalized)
}
}
Text("Selected flavor: \(selectedFlavor.rawValue)")
Divider()
Picker(selection: $selectedFlavor, label: Text("Suggest a topping for:")) {
ForEach(Flavor.allCases) { flavor in
Text(flavor.rawValue.capitalized).tag(flavor.suggestedTopping)
}
}
Text("suggestedTopping: \(suggestedTopping.rawValue)")
}
}
}
@State private var selectedFlavor1 = Flavor.chocolate
@State private var selectedFlavor2 = Flavor.chocolate
@State private var selectedFlavor3 = Flavor.chocolate
@State private var selectedFlavor4 = Flavor.chocolate
var body: some View {
ScrollView(.vertical) {
VStack {
Picker(selection: $selectedFlavor1, label: Text("Flavor: MenuPickerStyle")) {
Text("Chocolate").tag(Flavor.chocolate)
Text("Vanilla").tag(Flavor.vanilla)
Text("Strawberry").tag(Flavor.strawberry)
}.pickerStyle(MenuPickerStyle())
Text("Selected flavor: \(selectedFlavor1.rawValue)")
Picker(selection: $selectedFlavor2, label: Text("Flavor: WheelPickerStyle")) {
Text("Chocolate").tag(Flavor.chocolate)
Text("Vanilla").tag(Flavor.vanilla)
Text("Strawberry").tag(Flavor.strawberry)
}.pickerStyle(WheelPickerStyle())
Text("WheelPickerStyle Selected flavor: \(selectedFlavor2.rawValue)")
Picker(selection: $selectedFlavor3, label: Text("Flavor: WheelPickerStyle")) {
Text("Chocolate").tag(Flavor.chocolate)
Text("Vanilla").tag(Flavor.vanilla)
Text("Strawberry").tag(Flavor.strawberry)
}.pickerStyle(InlinePickerStyle())
Text("InlinePickerStyle Selected flavor: \(selectedFlavor3.rawValue)")
Spacer(minLength: 50)
Picker(selection: $selectedFlavor4, label: Text("Flavor: SegmentedPickerStyle")) {
Text("Chocolate").tag(Flavor.chocolate)
Text("Vanilla").tag(Flavor.vanilla)
Text("Strawberry").tag(Flavor.strawberry)
}.pickerStyle(SegmentedPickerStyle())
Text("SegmentedPickerStyle Selected flavor: \(selectedFlavor4.rawValue)")
}
}開く
@State private var progress = 0.0
private let total = 1.0
var body: some View {
VStack {
ProgressView("DefaultProgressViewStyle", value: progress, total: total)
.padding()
Button("More", action: {
if (progress + 0.05) < total {
progress += 0.05
} else {
progress = total
}
})
ProgressView("LinearProgressViewStyle", value: 0.25, total: total)
.progressViewStyle(LinearProgressViewStyle())
.padding()
ProgressView("CircularProgressViewStyle", value: 0.75, total: total)
.progressViewStyle(CircularProgressViewStyle())
.padding()
}
}開く
VStack {
ScrollView(.horizontal) {
Text(".horizontal test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test")
}.padding()
ScrollView(.horizontal, showsIndicators: false) {
Text(".horizontal showIndicators: false test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test")
}.padding()
ScrollView {
ScrollViewReader { value in
Button("Jump to 30") {
withAnimation {
value.scrollTo(30, anchor: .top)
}
}
ForEach(1..<51) { index in
Image(systemName: "\(index).square")
.font(.largeTitle)
.frame(height: 70)
.id(index)
}
}
}
}開く
@State private var selectedValue = "C++"
var body: some View {
VStack {
List {
Section(header: Text("header 果物"), footer: Text("footer 果物")) {
Text("桃")
Text("りんご")
Text("みかん")
}
Section(header: Text("header 野菜"), footer: Text("footer 野菜")) {
Text("きゅうり")
Text("トマト")
Text("なす")
}
}.frame(height:450)
Form {
Section(header: Text("header プログラミング言語"), footer: Text("footer プログラミング言語")) {
Picker("プログラミング言語", selection: $selectedValue) {
Text("C++").tag("C++")
Text("Kotlin").tag("Kotlin")
Text("Swift").tag("Swift")
}
}
}
}
}開く
@State private var username: String = ""
@State private var password: String = ""
var body: some View {
VStack {
TextField(
"User name (email address)",
text: $username)
.autocapitalization(.none)
.disableAutocorrection(true)
.border(Color(UIColor.separator))
.padding()
SecureField(
"Password",
text: $password
) {
print("ログイン")
}
.border(Color(UIColor.separator))
.padding()
}
}開く
@State private var speed = 50.0
@State private var isEditing = false
var body: some View {
VStack {
Slider(
value: $speed,
in: 0...100,
step: 5,
onEditingChanged: { editing in
isEditing = editing
},
minimumValueLabel: Text("0"),
maximumValueLabel: Text("100")
) {
Text("Speed")
}
Text("\(speed)")
.foregroundColor(isEditing ? .red : .blue)
}.padding()
}開く
@State private var value1 = 0
@State private var value2 = 0
let colors: [Color] = [.orange, .red, .gray, .blue,
.green, .purple, .pink]
func incrementStep() {
value1 += 1
if value1 >= colors.count { value1 = 0 }
}
func decrementStep() {
value1 -= 1
if value1 < 0 { value1 = colors.count - 1 }
}
var body: some View {
VStack {
Stepper(onIncrement: incrementStep,
onDecrement: decrementStep) {
Text("Value: \(value1) Color: \(colors[value1].description)")
}
.padding(10)
.background(colors[value1])
Stepper(value: $value2,
in: 1...50,
step: 5) {
Text("Current: \(value2) in 1...50 stepping by 5")
}.padding(10)
}
}開く
@State private var selection = 1
var body: some View {
VStack {
Text("selection: \(selection)")
TabView(selection: $selection) {
Text("The First Tab")
.tabItem {
Image(systemName: "1.square.fill")
Text("First")
}
.tag(1)
Text("Another Tab")
.tabItem {
Image(systemName: "2.square.fill")
Text("Second")
}
.tag(2)
Text("The Last Tab")
.tabItem {
Image(systemName: "3.square.fill")
Text("Third")
}
.tag(3)
}
.font(.headline)
}
}開く
var body: some View {
VStack {
Text("Hamlet")
.font(.title)
.padding()
Text("by William Shakespeare")
.font(.system(size: 12, weight: .light, design: .serif))
.italic()
.padding()
Text("Brevity is the soul of wit.")
.frame(width: 100)
.lineLimit(1)
.padding()
}
}開く
@State private var fullText: String = "This is some editable text..."
var body: some View {
TextEditor(text: $fullText)
.foregroundColor(Color.gray)
.font(.custom("HelveticaNeue", size: 18))
.lineSpacing(5)
}開く
@State private var vibrateOnRing = true
var body: some View {
Toggle("Vibrate on Ring", isOn: $vibrateOnRing)
.toggleStyle(SwitchToggleStyle())
.padding()
}開く
Group {
Text("ZStack")
ZStack {
ForEach(0..<colors.count) {
Rectangle()
.fill(colors[$0])
.frame(width: 100, height: 100)
.offset(x: CGFloat($0) * 10.0,
y: CGFloat($0) * 10.0)
}
}.padding(.bottom, 70)
}
Group {
Text("ZStack(alignment: .center)")
ZStack(alignment: .center) {
Rectangle()
.fill(Color.red)
.frame(width: 100, height: 50)
Rectangle()
.fill(Color.blue)
.frame(width:50, height: 100)
}
.border(Color.green, width: 1)
}
Group {
Text("ZStack(alignment: .bottomLeading)")
ZStack(alignment: .bottomLeading) {
Rectangle()
.fill(Color.red)
.frame(width: 100, height: 50)
Rectangle()
.fill(Color.blue)
.frame(width:50, height: 100)
}
.border(Color.green, width: 1)
}
Group {
Text("ZStack(alignment: .bottomTrailing)")
ZStack(alignment: .bottomTrailing) {
Rectangle()
.fill(Color.red)
.frame(width: 100, height: 50)
Rectangle()
.fill(Color.blue)
.frame(width:50, height: 100)
}
.border(Color.green, width: 1)
}
Group {
Text("ZStack(alignment: .topLeading)")
ZStack(alignment: .topLeading) {
Rectangle()
.fill(Color.red)
.frame(width: 100, height: 50)
Rectangle()
.fill(Color.blue)
.frame(width:50, height: 100)
}
.border(Color.green, width: 1)
}
Group {
Text("ZStack(alignment: .topTrailing)")
ZStack(alignment: .topTrailing) {
Rectangle()
.fill(Color.red)
.frame(width: 100, height: 50)
Rectangle()
.fill(Color.blue)
.frame(width:50, height: 100)
}
.border(Color.green, width: 1)
}
Group {
Text("ZStack(alignment: .top)")
ZStack(alignment: .top) {
Rectangle()
.fill(Color.red)
.frame(width: 100, height: 50)
Rectangle()
.fill(Color.blue)
.frame(width:50, height: 100)
}
.border(Color.green, width: 1)
}
Group {
Text("ZStack(alignment: .leading)")
ZStack(alignment: .leading) {
Rectangle()
.fill(Color.red)
.frame(width: 100, height: 50)
Rectangle()
.fill(Color.blue)
.frame(width:50, height: 100)
}
.border(Color.green, width: 1)
}
Group {
Text("ZStack(alignment: .trailing)")
ZStack(alignment: .trailing) {
Rectangle()
.fill(Color.red)
.frame(width: 100, height: 50)
Rectangle()
.fill(Color.blue)
.frame(width:50, height: 100)
}
.border(Color.green, width: 1)
}開く
var body: some View {
VStack {
Text("default")
.frame(maxWidth: 400, alignment: .leading)
.padding(.top, 20)
HStack {
Text("First")
.border(Color.red, width: 2.0)
Image(systemName: "2.circle")
.resizable()
.frame(width: 60, height: 60)
.border(Color.green, width: 2.0)
Text("Third Third Third Third Third")
.border(Color.blue, width: 2.0)
}
.frame(width: 400)
.border(Color.red)
Text("alignment: .top")
.frame(maxWidth: 400, alignment: .leading)
.padding(.top, 20)
HStack(alignment: .top) {
Text("First")
.border(Color.red, width: 2.0)
Image(systemName: "2.circle")
.resizable()
.frame(width: 60, height: 60)
.border(Color.green, width: 2.0)
Text("Third Third Third Third Third")
.border(Color.blue, width: 2.0)
}
.frame(width: 400)
.border(Color.red)
Text("alignment: .bottom")
.frame(maxWidth: 400, alignment: .leading)
.padding(.top, 20)
HStack(alignment: .bottom) {
Text("First")
.border(Color.red, width: 2.0)
Image(systemName: "2.circle")
.resizable()
.frame(width: 60, height: 60)
.border(Color.green, width: 2.0)
Text("Third Third Third Third Third")
.border(Color.blue, width: 2.0)
}
.frame(width: 400)
.border(Color.red)
Text("spacing: 50")
.frame(maxWidth: 400, alignment: .leading)
.padding(.top, 20)
HStack(spacing: 50) {
Text("First")
.border(Color.red, width: 2.0)
Image(systemName: "2.circle")
.resizable()
.frame(width: 60, height: 60)
.border(Color.green, width: 2.0)
Text("Third Third Third Third Third")
.border(Color.blue, width: 2.0)
}
.frame(width: 400)
.border(Color.red)
}
}開く
var body: some View {
ScrollView(.vertical) {
VStack {
GeometryReader { geometry in
Text(#"""
geometry.frame(in: .global).origin.x: \#(geometry.frame(in: .global).origin.x)
geometry.frame(in: .global).origin.y: \#(geometry.frame(in: .global).origin.y)
geometry.frame(in: .global).width: \#(geometry.frame(in: .global).width)
geometry.frame(in: .global).height: \#(geometry.frame(in: .global).height)
geometry.frame(in: .global).minX: \#(geometry.frame(in: .global).minX)
geometry.frame(in: .global).midX: \#(geometry.frame(in: .global).midX)
geometry.frame(in: .global).maxX: \#(geometry.frame(in: .global).maxX)
geometry.frame(in: .global).minY: \#(geometry.frame(in: .global).minY)
geometry.frame(in: .global).midY: \#(geometry.frame(in: .global).midY)
geometry.frame(in: .global).maxY: \#(geometry.frame(in: .global).maxY)
"""#)
}
.frame(height: 250)
.border(Color.red, width: 2.0)
GeometryReader { geometry in
Text(#"""
geometry.frame(in: .local).origin.x: \#(geometry.frame(in: .local).origin.x)
geometry.frame(in: .local).origin.y: \#(geometry.frame(in: .local).origin.y)
geometry.frame(in: .local).width: \#(geometry.frame(in: .local).width)
geometry.frame(in: .local).height: \#(geometry.frame(in: .local).height)
geometry.frame(in: .local).minX: \#(geometry.frame(in: .local).minX)
geometry.frame(in: .local).midX: \#(geometry.frame(in: .local).midX)
geometry.frame(in: .local).maxX: \#(geometry.frame(in: .local).maxX)
geometry.frame(in: .local).minY: \#(geometry.frame(in: .local).minY)
geometry.frame(in: .local).midY: \#(geometry.frame(in: .local).midY)
geometry.frame(in: .local).maxY: \#(geometry.frame(in: .local).maxY)
"""#)
}
.frame(height: 250)
.border(Color.green, width: 2.0)
GeometryReader { geometry in
Text(#"""
geometry.size.debugDescription: \#(geometry.size.debugDescription)
"""#)
}
.frame(height: 100)
.border(Color.green, width: 2.0)
}
}
}開く
var rows1: [GridItem] =
Array(repeating: .init(.fixed(40)), count: 2)
var rows2: [GridItem] =
Array(repeating: .init(.fixed(80)), count: 2)
var rows3: [GridItem] =
Array(repeating: .init(.fixed(40)), count: 4)
var rows4: [GridItem] =
Array(repeating: .init(.flexible(minimum: 40, maximum: 100)), count: 4)
var rows5: [GridItem] =
Array(repeating: .init(.adaptive(minimum: 40, maximum: 100)), count: 4)
var body: some View {
ScrollView(.vertical){
VStack {
Group {
Text("Array(repeating: .init(.fixed(40)), count: 2)")
ScrollView(.horizontal) {
LazyHGrid(rows: rows1, alignment: .top) {
ForEach((0...79), id: \.self) {
let codepoint = $0 + 0x1f600
let emoji = String(Character(UnicodeScalar(codepoint)!))
Text("\(emoji)")
.font(.largeTitle)
}
}
}.border(Color.red, width: 2)
}
Group {
Text("Array(repeating: .init(.fixed(80)), count: 2)")
ScrollView(.horizontal) {
LazyHGrid(rows: rows2, alignment: .top) {
ForEach((0...79), id: \.self) {
let codepoint = $0 + 0x1f600
let emoji = String(Character(UnicodeScalar(codepoint)!))
Text("\(emoji)")
.font(.largeTitle)
}
}
}.border(Color.red, width: 2)
}
Group {
Text("Array(repeating: .init(.fixed(40)), count: 4)")
ScrollView(.horizontal) {
LazyHGrid(rows: rows3, alignment: .top) {
ForEach((0...79), id: \.self) {
let codepoint = $0 + 0x1f600
let emoji = String(Character(UnicodeScalar(codepoint)!))
Text("\(emoji)")
.font(.largeTitle)
}
}
}.border(Color.red, width: 2)
}
Group {
Text("Array(repeating: .init(.flexible(minimum: 40, maximum: 100)), count: 4)")
ScrollView(.horizontal) {
LazyHGrid(rows: rows4, alignment: .top) {
ForEach((0...79), id: \.self) {
let codepoint = $0 + 0x1f600
let emoji = String(Character(UnicodeScalar(codepoint)!))
Text("\(emoji)")
.font(.largeTitle)
}
}
}.border(Color.red, width: 2)
}
Group {
Text("Array(repeating: .init(.adaptive(minimum: 40, maximum: 100)), count: 4)")
ScrollView(.horizontal) {
LazyHGrid(rows: rows5, alignment: .top) {
ForEach((0...79), id: \.self) {
let codepoint = $0 + 0x1f600
let emoji = String(Character(UnicodeScalar(codepoint)!))
Text("\(emoji)")
.font(.largeTitle)
}
}
}.border(Color.red, width: 2)
}
}
}
}開く
@State private var showedIndex = ""
@State private var showedIndex2 = ""
var body: some View {
VStack {
Text("HStack")
ScrollView(.horizontal) {
HStack(alignment: .center, spacing: 10) {
Section(header: Text("header"), footer: Text("footer")) {
ForEach(1...20, id: \.self) { count in
Image(systemName: "\(count).square")
.font(.largeTitle)
.frame(height: 70)
.onAppear(perform: {
showedIndex += "\(count) "
})
}
}
}
}
Text("showedIndex: \(showedIndex)")
.padding(.bottom, 50)
Text("LazyHStack ")
ScrollView(.horizontal) {
LazyHStack(alignment: .center, spacing: 10) {
Section(header: Text("header"), footer: Text("footer")) {
ForEach(1...20, id: \.self) { count in
Image(systemName: "\(count).square")
.font(.largeTitle)
.frame(height: 70)
.onAppear(perform: {
showedIndex2 += "\(count) "
})
}
}
}.frame(height: 70)
}
Text("showedIndex: \(showedIndex2)")
.padding(.bottom, 50)
Text("LazyHStack pinnedViews: .sectionHeaders")
ScrollView(.horizontal) {
LazyHStack(alignment: .center, spacing: 10, pinnedViews: .sectionHeaders) {
Section(header: Text("header"), footer: Text("footer")) {
ForEach(1...20, id: \.self) { count in
Image(systemName: "\(count).square")
.font(.largeTitle)
.frame(height: 70)
}
}
}.frame(height: 70)
}
}
}開く
var columns: [GridItem] =
Array(repeating: .init(.flexible()), count: 2)
var columns2: [GridItem] =
Array(repeating: .init(.fixed(80)), count: 2)
var columns3: [GridItem] =
Array(repeating: .init(.flexible(minimum: 80, maximum: 100)), count: 2)
var columns4: [GridItem] =
Array(repeating: .init(.flexible(minimum: 80, maximum: 100)), count: 4)
var columns5: [GridItem] =
Array(repeating: .init(.adaptive(minimum: 80)), count: 2)
var body: some View {
ScrollView(.vertical) {
VStack {
Group {
Text("Array(repeating: .init(.flexible()), count: 2)")
ScrollView {
LazyVGrid(columns: columns) {
ForEach((0...79), id: \.self) {
let codepoint = $0 + 0x1f600
let codepointString = String(format: "%02X", codepoint)
Text("\(codepointString)")
let emoji = String(Character(UnicodeScalar(codepoint)!))
Text("\(emoji)")
}
}.font(.largeTitle)
}.frame(height: 200)
.border(Color.red, width: 2)
}
Group {
Text("Array(repeating: .init(.fixed(80)), count: 2)")
ScrollView {
LazyVGrid(columns: columns2) {
ForEach((0...79), id: \.self) {
let codepoint = $0 + 0x1f600
let codepointString = String(format: "%02X", codepoint)
Text("\(codepointString)")
let emoji = String(Character(UnicodeScalar(codepoint)!))
Text("\(emoji)")
}
}.font(.largeTitle)
}.frame(height: 200)
.border(Color.red, width: 2)
}
Group {
Text("Array(repeating: .init(.flexible(minimum: 80, maximum: 100)), count: 2)")
ScrollView {
LazyVGrid(columns: columns3) {
ForEach((0...79), id: \.self) {
let codepoint = $0 + 0x1f600
let codepointString = String(format: "%02X", codepoint)
Text("\(codepointString)")
let emoji = String(Character(UnicodeScalar(codepoint)!))
Text("\(emoji)")
}
}.font(.largeTitle)
}.frame(height: 200)
.border(Color.red, width: 2)
}
Group {
Text("Array(repeating: .init(.flexible(minimum: 80, maximum: 100)), count: 4)")
ScrollView {
LazyVGrid(columns: columns4) {
ForEach((0...79), id: \.self) {
let codepoint = $0 + 0x1f600
let codepointString = String(format: "%02X", codepoint)
Text("\(codepointString)")
let emoji = String(Character(UnicodeScalar(codepoint)!))
Text("\(emoji)")
}
}.font(.largeTitle)
}.frame(height: 200)
.border(Color.red, width: 2)
}
Group {
Text("Array(repeating: .init(.adaptive(minimum: 80)), count: 2)")
ScrollView {
LazyVGrid(columns: columns5) {
ForEach((0...79), id: \.self) {
let codepoint = $0 + 0x1f600
let codepointString = String(format: "%02X", codepoint)
Text("\(codepointString)")
let emoji = String(Character(UnicodeScalar(codepoint)!))
Text("\(emoji)")
}
}.font(.largeTitle)
}.frame(height: 200)
.border(Color.red, width: 2)
}
}
}
}開く
@State private var showedIndex = ""
@State private var showedIndex2 = ""
var body: some View {
ScrollView(.vertical) {
VStack {
Text("VStack")
ScrollView(.vertical) {
VStack(alignment: .center, spacing: 10) {
Section(header: Text("header"), footer: Text("footer")) {
ForEach(1...20, id: \.self) { count in
Image(systemName: "\(count).square")
.font(.largeTitle)
.frame(height: 70)
.onAppear(perform: {
showedIndex += "\(count) "
})
}
}
}
}.frame(height: 200)
Text("showedIndex: \(showedIndex)")
.padding(.bottom, 50)
Text("LazyVStack ")
ScrollView(.vertical) {
LazyVStack(alignment: .center, spacing: 10) {
Section(header: Text("header"), footer: Text("footer")) {
ForEach(1...20, id: \.self) { count in
Image(systemName: "\(count).square")
.font(.largeTitle)
.frame(height: 70)
.onAppear(perform: {
showedIndex2 += "\(count) "
})
}
}
}
}.frame(height: 200)
Text("showedIndex: \(showedIndex2)")
.padding(.bottom, 50)
Text("LazyVStack pinnedViews: .sectionHeaders")
ScrollView(.vertical) {
LazyVStack(alignment: .center, spacing: 10, pinnedViews: .sectionHeaders) {
Section(header: Text("header"), footer: Text("footer")) {
ForEach(1...20, id: \.self) { count in
Image(systemName: "\(count).square")
.font(.largeTitle)
.frame(height: 70)
}
}
}
}.frame(height: 200)
}
}
}開く
ScrollViewReader { proxy in
ScrollView {
Button("proxy.scrollTo(30, anchor: .top)") {
withAnimation {
proxy.scrollTo(30, anchor: .top)
}
}.id(0)
Button("proxy.scrollTo(30, anchor: .center)") {
withAnimation {
proxy.scrollTo(30, anchor: .center)
}
}.id(0)
Button("proxy.scrollTo(30, anchor: .bottom)") {
withAnimation {
proxy.scrollTo(30, anchor: .bottom)
}
}.id(0)
ForEach(1..<51) { index in
Image(systemName: "\(index).square")
.font(.largeTitle)
.frame(height: 70)
.id(index)
}
Button("Top") {
withAnimation {
proxy.scrollTo(0)
}
}
}
}開く
VStack {
Text("default")
.frame(maxWidth: 400, alignment: .leading)
.padding(.top, 20)
VStack {
Text("First")
.border(Color.red, width: 2.0)
Image(systemName: "2.circle")
.resizable()
.frame(width: 60, height: 60)
.border(Color.green, width: 2.0)
Text("Third Third Third Third Third")
.border(Color.blue, width: 2.0)
}
.frame(width: 400)
.border(Color.red)
Text("alignment: .leading")
.frame(maxWidth: 400, alignment: .leading)
.padding(.top, 20)
VStack(alignment: .leading) {
Text("First")
.border(Color.red, width: 2.0)
Image(systemName: "2.circle")
.resizable()
.frame(width: 60, height: 60)
.border(Color.green, width: 2.0)
Text("Third Third Third Third Third")
.border(Color.blue, width: 2.0)
}
.frame(width: 400)
.border(Color.red)
Text("alignment: .center")
.frame(maxWidth: 400, alignment: .leading)
.padding(.top, 20)
VStack(alignment: .center) {
Text("First")
.border(Color.red, width: 2.0)
Image(systemName: "2.circle")
.resizable()
.frame(width: 60, height: 60)
.border(Color.green, width: 2.0)
Text("Third Third Third Third Third")
.border(Color.blue, width: 2.0)
}
.frame(width: 400)
.border(Color.red)
Text("alignment: .trailing")
.frame(maxWidth: 400, alignment: .leading)
.padding(.top, 20)
VStack(alignment: .trailing) {
Text("First")
.border(Color.red, width: 2.0)
Image(systemName: "2.circle")
.resizable()
.frame(width: 60, height: 60)
.border(Color.green, width: 2.0)
Text("Third Third Third Third Third Third Third")
.border(Color.blue, width: 2.0)
}
.frame(width: 400)
.border(Color.red)
}