实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(2)

简介: 实战教程·元宇宙来了,准备好你的电子名片了吗?(七)

声明双向绑定变量还需要在预览PlatformPicker时增加参数的默认值,如下代码所示:


PlatformPicker(platformIcon: .constant("icon_juejin"), platformName: .constant("稀土掘金技术社区"))

image.png

下一步到IndexURLView视图,将原来NewView中的indexURLView视图代码复制过来,如下代码所示:


import SwiftUI
struct IndexURLView: View {
    @Binding var indexURL:String
    var body: some View {
        ZStack(alignment: .topLeading) {
            TextEditor(text: $indexURL)
                .font(.system(size: 17))
                .padding(15)
                .disableAutocorrection(true)
                .autocapitalization(.none)
            if indexURL.isEmpty {
                Text("请输入主页链接")
                    .foregroundColor(Color(UIColor.placeholderText))
                    .padding(20)
            }
        }
        .background(Color(.systemGray6))
        .cornerRadius(8)
        .padding()
        .frame(maxHeight: 240)
    }
}
struct IndexURLView_Previews: PreviewProvider {
    static var previews: some View {
        IndexURLView(indexURL: .constant(""))
    }
}

image.png

完成之后,我们就可以回到NewView视图中,将原来的参数以及titleInputView平台输入框视图、platformPicker平台选择器视图、indexURLView链接地址视图的代码删掉,如下图所示:

image.png

删除代码后,我们使用单独搭建的构件来重新搭建样式,如下代码所示:


TitleInputView(title: $title)
PlatformPicker(platformIcon: $platformIcon, platformName: $platformName)
IndexURLView(indexURL: $indexURL)

image.png

如此,NewView视图在维持原有功能样式不变的情况下,代码量也精简很多。


相关文章
|
7月前
|
存储 JSON 缓存
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(1)
实战教程·元宇宙来了,准备好你的电子名片了吗?
54 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(1)
|
7月前
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)
22 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(3)
|
7月前
|
JSON API 数据格式
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)(4)
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)
49 0
|
7月前
|
存储 XML Swift
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
55 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(2)
|
7月前
|
存储 JSON 测试技术
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)
35 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)(2)
|
7月前
|
存储 数据库 Swift
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
46 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(3)
|
7月前
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(5)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
34 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(5)
|
7月前
|
存储 前端开发 数据库
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(6)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
40 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(6)
|
7月前
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(4)
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)
42 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(4)
|
7月前
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)
39 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)(3)