SwiftUI
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[iPhone]]
#contents
* SwiftUI基础 [#jc9f447d]
** SwiftUI的视图结构和声明式语法 [#pae42e69]
*** 视图结构 [#odfd92b6]
SwiftUI的视图结构是基于一种嵌套和组合的方式来构建UI界面的...
- View：所有的UI组件都是视图（View）。视图可以是简单的文...
- Container Views：这些视图用于组合其他视图，常见的容器视...
-- VStack：垂直堆栈，将子视图垂直排列。
-- HStack：水平堆栈，将子视图水平排列。
-- ZStack：层叠视图，将子视图层叠在一起。
-- List：列表视图，显示动态内容列表。
- Control Views：用于用户交互的视图，如
-- 按钮（Button）
-- 滑块（Slider）
-- 文本输入框（TextField）等
- Modifier：修饰符可以应用于视图，以更改其外观或行为。例...
*** 声明式语法 [#p6ef7a94]
SwiftUI使用声明式语法来描述UI的外观和行为，与传统的命令式...
- 简单和直观：您只需描述UI应该显示什么样子，而不是告诉计...
- 无需手动更新：当视图的状态（state）发生变化时，SwiftUI...
- 数据驱动：视图通常会绑定到某些数据，当数据变化时，视图...
- 组合性：可以将小的视图组合成更大的视图，形成复杂的UI结...
- 预览功能：Xcode的实时预览功能允许开发者在编写代码时即时...
#codeprettify{{
import SwiftUI
struct ContentView: View {
@State private var isButtonVisible = true // 属性包...
var body: some View {
VStack { // 垂直堆栈视图 (VStack)
Text("Hello, SwiftUI!") // 简单文本视图
if isButtonVisible {
Button("Toggle Button") {
self.isButtonVisible.toggle()
}
}
}
.padding() // 修饰符，添加内边距
}
}
// 实时预览
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
}}
** 布局和视图组合 [#je1627c9]
在SwiftUI中，布局和视图组合是构建用户界面的关键部分。Swif...
*** 布局视图 [#gfa97de0]
SwiftUI中的布局视图是用来排列和组织其他视图的容器，常用的...
VStack：垂直堆栈视图，将子视图垂直排列。
#codeprettify{{
VStack {
Text("Item 1")
Text("Item 2")
Text("Item 3")
}
}}
HStack：水平堆栈视图，将子视图水平排列。
#codeprettify{{
HStack {
Text("Left")
Spacer()
Text("Right")
}
}}
ZStack：层叠视图，将子视图层叠在一起。
#codeprettify{{
ZStack {
Circle()
.foregroundColor(.blue)
.frame(width: 100, height: 100)
Text("Centered Text")
.foregroundColor(.white)
}
}}
List：列表视图，用于显示动态内容列表。
#codeprettify{{
List {
Text("Item 1")
Text("Item 2")
Text("Item 3")
}
}}
Form：表单视图，用于显示表单和输入控件。
#codeprettify{{
Form {
TextField("Username", text: $username)
SecureField("Password", text: $password)
Button("Login") {
// Login action
}
}
}}
*** 视图组合 [#g991795c]
视图组合是指将多个视图组合在一起形成复杂的UI结构，可以通...
- 使用 VStack 将视图垂直堆叠。
- 在 VStack 中使用 HStack 将图标和标题水平排列。
- 使用 Spacer() 在垂直堆栈中创建一个可伸缩的空间。
- 在底部添加一个带有动作的按钮，并对其进行内边距修饰。
#codeprettify{{
VStack {
Text("Welcome to SwiftUI!")
.font(.largeTitle)
HStack {
Image(systemName: "star.fill")
.foregroundColor(.yellow)
Text("SwiftUI Basics")
.font(.title)
}
Spacer()
Button("Get Started") {
// Action to start the app
}
.padding()
}
.padding()
}}
* 基本组件 [#w7b1fab6]
** 文本（Text） [#od83e6c6]
Text 是用来显示文本内容的视图组件。它允许您在应用程序中轻...
#codeprettify{{
struct ContentView: View {
var body: some View {
Text("Hello, SwiftUI， \(username)!") //使用字符...
.font(.title) //字体
.foregroundColor(.blue) //字体颜色
.multilineTextAlignment(.center) //对齐方式
.bold() //加粗
.italic() //斜体
.lineLimit(nil) //如果文本...
.multilineTextAlignment(.leading) //左对齐：l...
.border(Color.gray) //修饰符，用于在视图的边...
}
}
}}
** 图像（Image） [#v1da32be]
Image 是用来显示图像内容的视图组件。它允许您在应用程序中...
#codeprettify{{
struct ContentView: View {
var body: some View {
Image("yourImageName")
.resizable() // 可调整大小
.scaledToFit() // 按原始宽高比缩放适合父视图
.frame(width: 200, height: 200) // 设置框架大小
.clipShape(Circle()) // 添加圆形遮罩
.overlay(Circle().stroke(Color.blue, lineWidt...
.shadow(radius: 10) // 添加阴影效果
}
}
}}
*** 加载网络图像 [#c4b3367e]
#codeprettify{{
struct RemoteImage: View {
var imageUrl: String
var body: some View {
if let url = URL(string: imageUrl), let imageData...
Image(uiImage: UIImage(data: imageData)!)
.resizable()
.scaledToFit()
.frame(width: 200, height: 200)
} else {
Text("Image not found")
}
}
}
struct ContentView: View {
var body: some View {
RemoteImage(imageUrl: "https://example.com/yourIm...
}
}
}}
** 按钮（Button） [#v11420c6]
Button 是用来创建用户可以点击的交互性控件。它允许您在应用...
#codeprettify{{
struct ContentView: View {
var body: some View {
Button(action: {
// 点击按钮后的操作
print("Button tapped!")
}) {
Text("Tap me!")
.font(.title)
.foregroundColor(.white)
.padding()
.background(Color.blue)
.cornerRadius(10)
}
}
}
}}
*** 自定义按钮样式 [#hfefaf99]
#codeprettify{{
Button(action: {
// 点击按钮后的操作
}) {
HStack {
Image(systemName: "person.fill")
Text("Login")
.fontWeight(.semibold)
}
.padding()
.foregroundColor(.white)
.background(Color.green)
.cornerRadius(8)
.shadow(radius: 5)
}
}}
*** 动态按钮 [#k69c86b8]
可以根据视图状态来动态更改按钮的标签或样式。
#codeprettify{{
struct ContentView: View {
@State private var isLogged = false
var body: some View {
Button(action: {
self.isLogged.toggle()
}) {
Text(isLogged ? "Logout" : "Login")
.fontWeight(.semibold)
.padding()
.foregroundColor(.white)
.background(isLogged ? Color.red : Color....
.cornerRadius(8)
}
}
}
}}
***按钮响应和动作 [#ab546cbd]
每个按钮都需要一个操作（action），当用户点击按钮时，这个...
#codeprettify{{
Button(action: {
print("Button tapped!")
}) {
Text("Tap me!")
}
}}
* 列表和导航 [#e82a02bd]
** 列表视图（List） [#o42989bd]
List 是一个用于显示可滚动的内容列表的视图组件。List 适用...
#codeprettify{{
struct ContentView: View {
var body: some View {
List { // 显示了三个列表项
Text("Item 1")
Text("Item 2")
Text("Item 3")
}
}
}
}}
**动态数据 [#ta7c5cb7]
通常情况下，List 用于展示动态数据，您可以将数据绑定到 Lis...
基本动态数据
#codeprettify{{
struct ContentView: View {
let items = ["Item 1", "Item 2", "Item 3", "Item 4"]
var body: some View {
List(items, id: \.self) { item in
Text(item)
}
}
}
}}
** 使用自定义数据模型 [#c75cbee4]
#codeprettify{{
struct Item: Identifiable {
var id = UUID()
var name: String
var detail: String
}
struct ContentView: View {
let items = [
Item(name: "Item 1", detail: "Detail 1"),
Item(name: "Item 2", detail: "Detail 2"),
Item(name: "Item 3", detail: "Detail 3")
]
var body: some View {
List(items) { item in
VStack(alignment: .leading) {
Text(item.name)
.font(.headline)
Text(item.detail)
.font(.subheadline)
}
.padding()
}
}
}
}}
** 自定义列表项 [#s273e3f4]
可以自定义每个列表项的视图，添加更多的视图元素和样式。
#codeprettify{{
struct Item: Identifiable {
var id = UUID()
var name: String
var detail: String
}
struct ContentView: View {
let items = [
Item(name: "Item 1", detail: "Detail 1"),
Item(name: "Item 2", detail: "Detail 2"),
Item(name: "Item 3", detail: "Detail 3")
]
var body: some View {
List(items) { item in
VStack(alignment: .leading) {
Text(item.name)
.font(.headline)
Text(item.detail)
.font(.subheadline)
}
.padding()
}
}
}
}}
** 列表的交互 [#e85b4052]
List 支持多种交互功能，如行的删除、移动等。
删除列表项
#codeprettify{{
struct ContentView: View {
@State private var items = ["Item 1", "Item 2", "Item...
var body: some View {
List {
ForEach(items, id: \.self) { item in
Text(item)
}
.onDelete(perform: delete) // 修饰符允许用户...
}
}
func delete(at offsets: IndexSet) {
items.remove(atOffsets: offsets)
}
}
}}
** 移动列表项 [#h1b057ab]
#codeprettify{{
struct ContentView: View {
@State private var items = ["Item 1", "Item 2", "Item...
var body: some View {
List {
ForEach(items, id: \.self) { item in
Text(item)
}
.onMove(perform: move) // 修饰符允许用户移动...
}
.navigationBarItems(trailing: EditButton()) // 进...
}
func move(from source: IndexSet, to destination: Int) {
items.move(fromOffsets: source, toOffset: destina...
}
}
}}
* 导航视图（NavigationView） [#seda5f23]
NavigationView 是用于在应用程序中创建导航层次结构的视图容...
#codeprettify{{
//基本用法
struct ContentView: View {
var body: some View {
NavigationView {
Text("Welcome to SwiftUI")
.navigationTitle("Home")
}
}
}
//基本导航链接
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: DetailView())...
Text("Go to Detail View")
}
.padding()
}
.navigationTitle("Home")
}
}
}
struct DetailView: View { //显示了一个简单的文本，并设置...
var body: some View {
Text("This is the detail view")
.navigationTitle("Detail")
}
}
}}
** 通过导航链接传递数据到目标视图。 [#f2e069d9]
#codeprettify{{
struct ContentView: View {
let items = ["Item 1", "Item 2", "Item 3"]
var body: some View {
NavigationView {
List(items, id: \.self) { item in
NavigationLink(destination: DetailView(it...
Text(item)
}
}
.navigationTitle("Items")
}
}
}
struct DetailView: View {// 接受一个 item 参数，通过 Navi...
let item: String
var body: some View {
Text("Detail for \(item)")
.navigationTitle(item)
}
}
}}
** 调整导航栏的样式，例如背景颜色、透明度等。 [#j6a7f50b]
#codeprettify{{
struct ContentView: View {
init() {
UINavigationBar.appearance().backgroundColor = UI...
UINavigationBar.appearance().largeTitleTextAttrib...
}
var body: some View {
NavigationView {
VStack {
Text("Welcome to SwiftUI")
}
.navigationTitle("Home")
.navigationBarTitleDisplayMode(.large)
}
}
}
}}
#hr();
Comment：
#comment_kcaptcha
終了行:
[[iPhone]]
#contents
* SwiftUI基础 [#jc9f447d]
** SwiftUI的视图结构和声明式语法 [#pae42e69]
*** 视图结构 [#odfd92b6]
SwiftUI的视图结构是基于一种嵌套和组合的方式来构建UI界面的...
- View：所有的UI组件都是视图（View）。视图可以是简单的文...
- Container Views：这些视图用于组合其他视图，常见的容器视...
-- VStack：垂直堆栈，将子视图垂直排列。
-- HStack：水平堆栈，将子视图水平排列。
-- ZStack：层叠视图，将子视图层叠在一起。
-- List：列表视图，显示动态内容列表。
- Control Views：用于用户交互的视图，如
-- 按钮（Button）
-- 滑块（Slider）
-- 文本输入框（TextField）等
- Modifier：修饰符可以应用于视图，以更改其外观或行为。例...
*** 声明式语法 [#p6ef7a94]
SwiftUI使用声明式语法来描述UI的外观和行为，与传统的命令式...
- 简单和直观：您只需描述UI应该显示什么样子，而不是告诉计...
- 无需手动更新：当视图的状态（state）发生变化时，SwiftUI...
- 数据驱动：视图通常会绑定到某些数据，当数据变化时，视图...
- 组合性：可以将小的视图组合成更大的视图，形成复杂的UI结...
- 预览功能：Xcode的实时预览功能允许开发者在编写代码时即时...
#codeprettify{{
import SwiftUI
struct ContentView: View {
@State private var isButtonVisible = true // 属性包...
var body: some View {
VStack { // 垂直堆栈视图 (VStack)
Text("Hello, SwiftUI!") // 简单文本视图
if isButtonVisible {
Button("Toggle Button") {
self.isButtonVisible.toggle()
}
}
}
.padding() // 修饰符，添加内边距
}
}
// 实时预览
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
}}
** 布局和视图组合 [#je1627c9]
在SwiftUI中，布局和视图组合是构建用户界面的关键部分。Swif...
*** 布局视图 [#gfa97de0]
SwiftUI中的布局视图是用来排列和组织其他视图的容器，常用的...
VStack：垂直堆栈视图，将子视图垂直排列。
#codeprettify{{
VStack {
Text("Item 1")
Text("Item 2")
Text("Item 3")
}
}}
HStack：水平堆栈视图，将子视图水平排列。
#codeprettify{{
HStack {
Text("Left")
Spacer()
Text("Right")
}
}}
ZStack：层叠视图，将子视图层叠在一起。
#codeprettify{{
ZStack {
Circle()
.foregroundColor(.blue)
.frame(width: 100, height: 100)
Text("Centered Text")
.foregroundColor(.white)
}
}}
List：列表视图，用于显示动态内容列表。
#codeprettify{{
List {
Text("Item 1")
Text("Item 2")
Text("Item 3")
}
}}
Form：表单视图，用于显示表单和输入控件。
#codeprettify{{
Form {
TextField("Username", text: $username)
SecureField("Password", text: $password)
Button("Login") {
// Login action
}
}
}}
*** 视图组合 [#g991795c]
视图组合是指将多个视图组合在一起形成复杂的UI结构，可以通...
- 使用 VStack 将视图垂直堆叠。
- 在 VStack 中使用 HStack 将图标和标题水平排列。
- 使用 Spacer() 在垂直堆栈中创建一个可伸缩的空间。
- 在底部添加一个带有动作的按钮，并对其进行内边距修饰。
#codeprettify{{
VStack {
Text("Welcome to SwiftUI!")
.font(.largeTitle)
HStack {
Image(systemName: "star.fill")
.foregroundColor(.yellow)
Text("SwiftUI Basics")
.font(.title)
}
Spacer()
Button("Get Started") {
// Action to start the app
}
.padding()
}
.padding()
}}
* 基本组件 [#w7b1fab6]
** 文本（Text） [#od83e6c6]
Text 是用来显示文本内容的视图组件。它允许您在应用程序中轻...
#codeprettify{{
struct ContentView: View {
var body: some View {
Text("Hello, SwiftUI， \(username)!") //使用字符...
.font(.title) //字体
.foregroundColor(.blue) //字体颜色
.multilineTextAlignment(.center) //对齐方式
.bold() //加粗
.italic() //斜体
.lineLimit(nil) //如果文本...
.multilineTextAlignment(.leading) //左对齐：l...
.border(Color.gray) //修饰符，用于在视图的边...
}
}
}}
** 图像（Image） [#v1da32be]
Image 是用来显示图像内容的视图组件。它允许您在应用程序中...
#codeprettify{{
struct ContentView: View {
var body: some View {
Image("yourImageName")
.resizable() // 可调整大小
.scaledToFit() // 按原始宽高比缩放适合父视图
.frame(width: 200, height: 200) // 设置框架大小
.clipShape(Circle()) // 添加圆形遮罩
.overlay(Circle().stroke(Color.blue, lineWidt...
.shadow(radius: 10) // 添加阴影效果
}
}
}}
*** 加载网络图像 [#c4b3367e]
#codeprettify{{
struct RemoteImage: View {
var imageUrl: String
var body: some View {
if let url = URL(string: imageUrl), let imageData...
Image(uiImage: UIImage(data: imageData)!)
.resizable()
.scaledToFit()
.frame(width: 200, height: 200)
} else {
Text("Image not found")
}
}
}
struct ContentView: View {
var body: some View {
RemoteImage(imageUrl: "https://example.com/yourIm...
}
}
}}
** 按钮（Button） [#v11420c6]
Button 是用来创建用户可以点击的交互性控件。它允许您在应用...
#codeprettify{{
struct ContentView: View {
var body: some View {
Button(action: {
// 点击按钮后的操作
print("Button tapped!")
}) {
Text("Tap me!")
.font(.title)
.foregroundColor(.white)
.padding()
.background(Color.blue)
.cornerRadius(10)
}
}
}
}}
*** 自定义按钮样式 [#hfefaf99]
#codeprettify{{
Button(action: {
// 点击按钮后的操作
}) {
HStack {
Image(systemName: "person.fill")
Text("Login")
.fontWeight(.semibold)
}
.padding()
.foregroundColor(.white)
.background(Color.green)
.cornerRadius(8)
.shadow(radius: 5)
}
}}
*** 动态按钮 [#k69c86b8]
可以根据视图状态来动态更改按钮的标签或样式。
#codeprettify{{
struct ContentView: View {
@State private var isLogged = false
var body: some View {
Button(action: {
self.isLogged.toggle()
}) {
Text(isLogged ? "Logout" : "Login")
.fontWeight(.semibold)
.padding()
.foregroundColor(.white)
.background(isLogged ? Color.red : Color....
.cornerRadius(8)
}
}
}
}}
***按钮响应和动作 [#ab546cbd]
每个按钮都需要一个操作（action），当用户点击按钮时，这个...
#codeprettify{{
Button(action: {
print("Button tapped!")
}) {
Text("Tap me!")
}
}}
* 列表和导航 [#e82a02bd]
** 列表视图（List） [#o42989bd]
List 是一个用于显示可滚动的内容列表的视图组件。List 适用...
#codeprettify{{
struct ContentView: View {
var body: some View {
List { // 显示了三个列表项
Text("Item 1")
Text("Item 2")
Text("Item 3")
}
}
}
}}
**动态数据 [#ta7c5cb7]
通常情况下，List 用于展示动态数据，您可以将数据绑定到 Lis...
基本动态数据
#codeprettify{{
struct ContentView: View {
let items = ["Item 1", "Item 2", "Item 3", "Item 4"]
var body: some View {
List(items, id: \.self) { item in
Text(item)
}
}
}
}}
** 使用自定义数据模型 [#c75cbee4]
#codeprettify{{
struct Item: Identifiable {
var id = UUID()
var name: String
var detail: String
}
struct ContentView: View {
let items = [
Item(name: "Item 1", detail: "Detail 1"),
Item(name: "Item 2", detail: "Detail 2"),
Item(name: "Item 3", detail: "Detail 3")
]
var body: some View {
List(items) { item in
VStack(alignment: .leading) {
Text(item.name)
.font(.headline)
Text(item.detail)
.font(.subheadline)
}
.padding()
}
}
}
}}
** 自定义列表项 [#s273e3f4]
可以自定义每个列表项的视图，添加更多的视图元素和样式。
#codeprettify{{
struct Item: Identifiable {
var id = UUID()
var name: String
var detail: String
}
struct ContentView: View {
let items = [
Item(name: "Item 1", detail: "Detail 1"),
Item(name: "Item 2", detail: "Detail 2"),
Item(name: "Item 3", detail: "Detail 3")
]
var body: some View {
List(items) { item in
VStack(alignment: .leading) {
Text(item.name)
.font(.headline)
Text(item.detail)
.font(.subheadline)
}
.padding()
}
}
}
}}
** 列表的交互 [#e85b4052]
List 支持多种交互功能，如行的删除、移动等。
删除列表项
#codeprettify{{
struct ContentView: View {
@State private var items = ["Item 1", "Item 2", "Item...
var body: some View {
List {
ForEach(items, id: \.self) { item in
Text(item)
}
.onDelete(perform: delete) // 修饰符允许用户...
}
}
func delete(at offsets: IndexSet) {
items.remove(atOffsets: offsets)
}
}
}}
** 移动列表项 [#h1b057ab]
#codeprettify{{
struct ContentView: View {
@State private var items = ["Item 1", "Item 2", "Item...
var body: some View {
List {
ForEach(items, id: \.self) { item in
Text(item)
}
.onMove(perform: move) // 修饰符允许用户移动...
}
.navigationBarItems(trailing: EditButton()) // 进...
}
func move(from source: IndexSet, to destination: Int) {
items.move(fromOffsets: source, toOffset: destina...
}
}
}}
* 导航视图（NavigationView） [#seda5f23]
NavigationView 是用于在应用程序中创建导航层次结构的视图容...
#codeprettify{{
//基本用法
struct ContentView: View {
var body: some View {
NavigationView {
Text("Welcome to SwiftUI")
.navigationTitle("Home")
}
}
}
//基本导航链接
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: DetailView())...
Text("Go to Detail View")
}
.padding()
}
.navigationTitle("Home")
}
}
}
struct DetailView: View { //显示了一个简单的文本，并设置...
var body: some View {
Text("This is the detail view")
.navigationTitle("Detail")
}
}
}}
** 通过导航链接传递数据到目标视图。 [#f2e069d9]
#codeprettify{{
struct ContentView: View {
let items = ["Item 1", "Item 2", "Item 3"]
var body: some View {
NavigationView {
List(items, id: \.self) { item in
NavigationLink(destination: DetailView(it...
Text(item)
}
}
.navigationTitle("Items")
}
}
}
struct DetailView: View {// 接受一个 item 参数，通过 Navi...
let item: String
var body: some View {
Text("Detail for \(item)")
.navigationTitle(item)
}
}
}}
** 调整导航栏的样式，例如背景颜色、透明度等。 [#j6a7f50b]
#codeprettify{{
struct ContentView: View {
init() {
UINavigationBar.appearance().backgroundColor = UI...
UINavigationBar.appearance().largeTitleTextAttrib...
}
var body: some View {
NavigationView {
VStack {
Text("Welcome to SwiftUI")
}
.navigationTitle("Home")
.navigationBarTitleDisplayMode(.large)
}
}
}
}}
#hr();
Comment：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
