SwiftUI代码重构:让界面开发更清爽高效

做iOS开发的都知道,刚写SwiftUI那会儿图省事,把一堆视图逻辑堆在一个结构里,结果改个按钮颜色都得翻半天。上周我同事小李就碰上这事儿,一个订单页面越改越卡,最后发现是View层层嵌套,状态管理乱成一锅粥。

别让臃肿代码拖慢开发节奏

刚开始写SwiftUI,谁没试过把所有东西塞进一个body里?比如做个登录页,文本框、按钮、验证逻辑全挤在一起。短期看着快,可一旦产品经理说“密码框加个可见开关”,你就得在密密麻麻的代码里扒拉半个多小时。

struct LoginView: View {
    var body: some View {
        VStack {
            TextField("用户名", text: $username)
            SecureField("密码", text: $password)
            Button("登录") { submit() }
            // 还有更多杂七杂八的修饰
        }
    }
}

拆分视图组件,各管一摊

重构第一步就是拆。把登录框单独拎成CredentialsForm,按钮封装成PrimaryButton。这样改样式只动对应组件,别人接手也一眼看懂结构。

struct CredentialsForm: View {
    @Binding var username: String
    @Binding var password: String

    var body: some View {
        VStack {
            TextField("用户名", text: $username)
            SecureField("密码", text: $password)
        }
    }
}

状态管理别乱传

常见问题是父View把一堆@State往下传,子View再用@Binding接,传着传着就丢值或者触发多余刷新。这时候可以考虑用ObservableObject集中管理,比如把登录状态放进AuthViewModel,需要的地方直接引用。

提取可复用的修饰符

项目里按钮风格统一吗?别每个按钮都写一遍.font(.headline).padding().background(Color.blue)。写个ButtonStyle扩展,改主题色时改一处全项目生效。

struct PrimaryButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(.white)
            .padding()
            .background(Color.blue)
            .cornerRadius(8)
    }
}

预览也得跟着重构

别忘了PreviewProvider。拆完组件后给每个小模块加上独立预览,点一下Xcode右边就能看效果,不用每次都进模拟器跑完整流程。省下来的时间够你多喝两杯咖啡。