学习使用SwiftUI开发MacOS应用 - 第4节 单选框与单选组的实现美化及流式布局

最新推荐文章于 2024-08-24 09:01:58 发布
最新推荐文章于 2024-08-24 09:01:58 发布
阅读量1k 收藏 3
点赞数 3
分类专栏： SwiftUI 开发 MacOS App
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wj008/article/details/115403592
版权

在SwiftUI 中 是没有单选框的这个视图控件的，要实现单选框 单选组需要借助 Picker 视图来实现，它会使用系统默认的风格，这可能不是我们想要的效果，为了制作漂亮的单选框我们需要自己动手来实现相应的功能。
首先 我们先看看系统自带的效果：

代码如下：

struct ContentView: View {
    @State var selection = 0
    var body: some View {
        VStack{
            Text("Hello, World!").frame(maxWidth: .infinity, maxHeight: 100)
            HStack {
            Picker(selection: $selection, label: Text("标题:")) {
                    //每个选项
                    Text("第1个选项").tag(1).frame(minWidth: 80)
                    Text("第2个选项").tag(2).frame(minWidth: 80)
                    Text("第3个选项").tag(3).frame(minWidth: 80)
                    Text("第4个选项").tag(4).frame(minWidth: 80)
                    Text("第5个选项").tag(5).frame(minWidth: 80)
                }
            }.pickerStyle(RadioGroupPickerStyle())
            Spacer().frame(maxWidth: .infinity, minHeight: 100)
        }
    }
}

系统默认的是 纵向排列的，如果需要横向排列 则可以使用 

struct ContentView: View {
    @State var selection = 0
    var body: some View {
        VStack {
            Text("Hello, World!").frame(maxWidth: .infinity, maxHeight: 100)

            Picker(selection: $selection, label: Text("标题:")) {
                //每个选项
                Text("第1个选项").tag(1).frame(minWidth: 80)
                Text("第2个选项").tag(2).frame(minWidth: 80)
                Text("第3个选项").tag(3).frame(minWidth: 80)
                Text("第4个选项").tag(4).frame(minWidth: 80)
                Text("第5个选项").tag(5).frame(minWidth: 80)
                Text("第6个选项").tag(6).frame(minWidth: 80)
                Text("第7个选项").tag(7).frame(minWidth: 80)
                Text("第8个选项").tag(8).frame(minWidth: 80)
            } .pickerStyle(RadioGroupPickerStyle())
                    //使之横向排列
                    .horizontalRadioGroupLayout()
            Spacer().frame(maxWidth: .infinity, minHeight: 100)
        }
    }
}

得到的效果如下


真头大，这个效果也不是我们希望的效果，我们应该希望它如果过多就自动换行：
目前为止我们只能自己让它排两行：

struct ContentView: View {
    @State var selection = 0
    var body: some View {
        VStack{
            Text("Hello, World!").frame(maxWidth: .infinity, maxHeight: 100)
            VStack {
                HStack{
                    Text("标题：")
                    VStack{
                        Picker("", selection: $selection) {
                            //每个选项
                            Text("第1个选项").tag(1).frame(minWidth: 80)
                            Text("第2个选项").tag(2).frame(minWidth: 80)
                            Text("第3个选项").tag(3).frame(minWidth: 80)
                            Text("第4个选项").tag(4).frame(minWidth: 80)
                        }
                        Picker("", selection: $selection) {
                            //每个选项
                            Text("第5个选项").tag(5).frame(minWidth: 80)
                            Text("第6个选项").tag(6).frame(minWidth: 80)
                            Text("第7个选项").tag(7).frame(minWidth: 80)
                            Text("第8个选项").tag(8).frame(minWidth: 80)
                        }
                    }.pickerStyle(RadioGroupPickerStyle())
                            .horizontalRadioGroupLayout()
                    Spacer()
                }
            }
            Spacer().frame(maxWidth: .infinity, minHeight: 100)
        }
    }
}

最后效果：


接着 我们要讨论的是如何 制作自己想要的 RadioButton 
在开发项目的时候，可能设计师给你的按钮不是默认系统的风格，这会和设计师给你的风格格格不入，是时候需要我们制作 RadioButton 了。
一个  RadioButton  可以理解为 一个按钮 和 一个文本框，按钮上的效果我们需要自己绘制，或者 使用图片来填充，基于此逻辑，我们开始来制作我们的 RadioButton。
参考 Button 的定义，我们在实现相应的功能，我们需要 RadioButton 可以在右侧装入文本Text视图.

FRadioButton.swfit 页面代码：

import SwiftUI

struct FRadioButton<Label>: View where Label: View {
    let label: Label  //右侧的视图区域
    let action: () -> Void  //定义点击事件
    var checked: Binding<Bool> //绑定的值
 
    public init(checked: Binding<Bool>,action callback: @escaping () -> Void = {}, @ViewBuilder label: () -> Label) {
        self.label = label()
        self.action = callback
        self.checked = checked
    }
    
    var body: some View {
        HStack {
            Button(action: {
                //这里还需要处理一下事件，点击按钮本身外面的HStack.onTapGesture 没有响应
                self.checked.wrappedValue = !self.checked.wrappedValue
                self.action()
            }) {
                Group {
                    //如果选中
                    if (checked.wrappedValue) {
                        ZStack {
                            //绘制选中的效果，你也可以使用图片
                            Circle()
                                    .fill(Color.white)
                                    .frame(width: 20, height: 20)
                                    .overlay(Circle().stroke(Color.gray, lineWidth: 1))
                            Circle()
                                    .fill(Color.blue)
                                    .frame(width: 8, height: 8)
                        }
                    } else {
                        //绘制未选中的效果
                        Circle()
                                .fill(Color.white)
                                .frame(width: 20, height: 20)
                                .overlay(Circle().stroke(Color.gray, lineWidth: 1))
                    }
                }
            }
                    //去掉按钮的边框
                    .buttonStyle(PlainButtonStyle())
            label
            Spacer()
        }.frame(minWidth:30,minHeight: 20)
                //用一个近似透明的背景来确定可点击的范围
                .background(Color.white.opacity(0.0001))
                .onTapGesture {
                    //点击事件处理，和按钮中的一致
                    self.checked.wrappedValue = !self.checked.wrappedValue
                    self.action()
                }
    }
}
//另外两种构造方式
extension FRadioButton where Label == Text {
    internal init<S>(_ title: S, checked: Binding<Bool>,action callback: @escaping () -> Void = {
    }) where S: StringProtocol {
        self.init(checked: checked, action: callback, label: {
            Text(title)
        })
    }
    internal init(_ titleKey: LocalizedStringKey, checked:Binding<Bool>,action callback: @escaping () -> Void = {
    }) {
        self.init(checked: checked, action: callback, label: {
            Text(titleKey)
        })
    }
}

这里 外面的单个点击按钮已经可以使用了，另外 这里我额外的补充一个鼠标经过手势的实现效果。

 

struct ContentView: View {
    @State var selection = 0
    @State var check = false
    var body: some View {
        VStack {
            Text("Hello, World!").frame(maxWidth: .infinity, maxHeight: 100)
            VStack {
                HStack {
                    Text("标题：")
                    VStack {
                        Picker("", selection: $selection) {
                            //每个选项
                            Text("第1个选项").tag(1).frame(minWidth: 80)
                            Text("第2个选项").tag(2).frame(minWidth: 80)
                            Text("第3个选项").tag(3).frame(minWidth: 80)
                            Text("第4个选项").tag(4).frame(minWidth: 80)
                        }
                        Picker("", selection: $selection) {
                            //每个选项
                            Text("第5个选项").tag(5).frame(minWidth: 80)
                            Text("第6个选项").tag(6).frame(minWidth: 80)
                            Text("第7个选项").tag(7).frame(minWidth: 80)
                            Text("第8个选项").tag(8).frame(minWidth: 80)
                        }
                    }.pickerStyle(RadioGroupPickerStyle())
                            .horizontalRadioGroupLayout()
                    Spacer()
                }
            }

            FRadioButton("测试按钮", checked: $check) {
                //配合下面鼠标悬停 显示手势
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) {
                    NSCursor.pop()
                    NSCursor.pointingHand.push()
                }
            }
                    //添加鼠标手势，不过这里有一个问题，就是 当点击后 不知道什么原因 会被重置 所以 就有了 上面点击0.01秒后再重新设置
                    .onHover { hover in
                        if hover {
                            NSCursor.pointingHand.push()
                        } else {
                            NSCursor.pop()
                        }
                    }
                    .frame(width: 100).foregroundColor(Color.red)


            Spacer().frame(maxWidth: .infinity, minHeight: 100)
        }
    }
}

效果如下：

接着我们来写 RadioGroup 也就是把我们的按钮归组处理，我们需要先给我们使用的数据定义个模型
 

struct RadioModel {
    let value: String
    let text: String
    init(_ v: String, _ t: String? = nil) {
        value = v
        if (t == nil) {
            text = v
        } else {
            text = t!
        }
    }
}

这样我们就可以传入多个模型数组进行绘制分组数据了。最终代码如下：

import SwiftUI

struct FRadioButton<Label>: View where Label: View {
    let label: Label  //右侧的视图区域
    let action: () -> Void  //定义点击事件
    var checked: Binding<Bool> //绑定的值

    public init(checked: Binding<Bool>,action callback: @escaping () -> Void = {}, @ViewBuilder label: () -> Label) {
        self.label = label()
        self.action = callback
        self.checked = checked
    }

    var body: some View {
        HStack {
            Button(action: {
                //这里还需要处理一下事件，点击按钮本身外面的HStack.onTapGesture 没有响应
                self.checked.wrappedValue = !self.checked.wrappedValue
                self.action()
            }) {
                Group {
                    //如果选中
                    if (checked.wrappedValue) {
                        ZStack {
                            //绘制选中的效果，你也可以使用图片
                            Circle()
                                    .fill(Color.white)
                                    .frame(width: 20, height: 20)
                                    .overlay(Circle().stroke(Color.gray, lineWidth: 1))
                            Circle()
                                    .fill(Color.blue)
                                    .frame(width: 8, height: 8)
                        }
                    } else {
                        //绘制未选中的效果
                        Circle()
                                .fill(Color.white)
                                .frame(width: 20, height: 20)
                                .overlay(Circle().stroke(Color.gray, lineWidth: 1))
                    }
                }
            }
                    //去掉按钮的边框
                    .buttonStyle(PlainButtonStyle())
            label
            Spacer()
        }.frame(minWidth:30,minHeight: 20)
                //用一个近似透明的背景来确定可点击的范围
                .background(Color.white.opacity(0.0001))
                .onTapGesture {
                    //点击事件处理，和按钮中的一致
                    self.checked.wrappedValue = !self.checked.wrappedValue
                    self.action()
                }
    }
}
//另外两种构造方式
extension FRadioButton where Label == Text {
    internal init<S>(_ title: S, checked: Binding<Bool>,action callback: @escaping () -> Void = {
    }) where S: StringProtocol {
        self.init(checked: checked, action: callback, label: {
            Text(title)
        })
    }
    internal init(_ titleKey: LocalizedStringKey, checked:Binding<Bool>,action callback: @escaping () -> Void = {
    }) {
        self.init(checked: checked, action: callback, label: {
            Text(titleKey)
        })
    }
}

//每项的数据
struct RadioModel {
    let value: String
    let text: String
    init(_ v: String, _ t: String? = nil) {
        value = v
        if (t == nil) {
            text = v
        } else {
            text = t!
        }
    }
}
//分组实现
struct FRadioGroup: View {
    @State var options: [RadioModel]
    var selected: Binding<String>
    var spacing: CGFloat = 20
    var action: ((RadioModel) -> ())! = nil
    var body: some View {
        ForEach(0 ..< options.count, id:\.self){ index in
            FRadioButton(options[index].text, checked: .constant(selected.wrappedValue == options[index].value) ) {
                selected.wrappedValue = options[index].value
                if (action != nil) {
                    self.action!(options[index])
                }
            }.frame(minWidth:200)
        }
    }
}

我们在视图框中使用如下：
 

struct ContentView: View {
    @State var selection = 0
    @State var check = false
    @State var selected = ""
    var body: some View {
        VStack {
            Text("Hello, World!").frame(maxWidth: .infinity, maxHeight: 100)
            VStack {
                HStack {
                    Text("标题：")
                    VStack {
                        Picker("", selection: $selection) {
                            //每个选项
                            Text("第1个选项").tag(1).frame(minWidth: 80)
                            Text("第2个选项").tag(2).frame(minWidth: 80)
                            Text("第3个选项").tag(3).frame(minWidth: 80)
                            Text("第4个选项").tag(4).frame(minWidth: 80)
                        }
                        Picker("", selection: $selection) {
                            //每个选项
                            Text("第5个选项").tag(5).frame(minWidth: 80)
                            Text("第6个选项").tag(6).frame(minWidth: 80)
                            Text("第7个选项").tag(7).frame(minWidth: 80)
                            Text("第8个选项").tag(8).frame(minWidth: 80)
                        }
                    }.pickerStyle(RadioGroupPickerStyle())
                            .horizontalRadioGroupLayout()
                    Spacer()
                }
            }

            FRadioButton("测试按钮", checked: $check) {
                //配合下面鼠标悬停 显示手势
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) {
                    NSCursor.pop()
                    NSCursor.pointingHand.push()
                }
            }
                    //添加鼠标手势，不过这里有一个问题，就是 当点击后 不知道什么原因 会被重置 所以 就有了 上面点击0.01秒后再重新设置
                    .onHover { hover in
                        if hover {
                            NSCursor.pointingHand.push()
                        } else {
                            NSCursor.pop()
                        }
                    }
                    .frame(width: 100).foregroundColor(Color.red)

            FRadioGroup(options:[
                RadioModel("1","测试1"),
                RadioModel("2","测试2"),
                RadioModel("3","测试3"),
                RadioModel("4","测试4"),
                RadioModel("5","测试5"),
                RadioModel("6","测试6"),
                RadioModel("7","测试7"),
            ],selected: $selected,spacing:30){ m in
                print(m)
            }.font(.system(size: 16))

            Spacer().frame(maxWidth: .infinity, minHeight: 100)
        }
    }
}

效果如下：

到了这里 我们自定义的RadioGroup 已经实现了，至于排版，我们可以在ForEach 中定义，在大多数情况下，我们希望可以流式布局，自己根据高宽调整。
所以我这里用到了另外一位网友对 流式布局的实现代码，其实如果我实现了也大体会和他做的一样，所以就不自己去实现了
他的链接在这里：https://zhuanlan.zhihu.com/p/352976474
他的代码在最后监视 高度更新的时候忘记调用了刷新
 

.modifier(FrameHeightPreference())
        .onPreferenceChange(ViewKey<FrameHeight>.self) { values in
            values.forEach { val in
                self.frameHeight = val.frameHeight
                //这里原作者忘记这一句了，会导致高度刷新的时候这里布局被重置。
                self.freshRanges()
            }
        }

我这里改过后的代码文件：
WrapForEach.swift 
 


import SwiftUI

struct ViewKey<Element>: PreferenceKey {
    typealias Value = [Element]
    static var defaultValue: Value { Value() }
    static func reduce(value: inout Value, nextValue: () -> Value) {
        value.append(contentsOf: nextValue())
    }
}

struct BindID<ID: Hashable, Value: Hashable>: Hashable {
    let id: ID
    let value: Value
}

struct WidthWithID<ID: Hashable>: ViewModifier {
    typealias Element = BindID<ID, CGFloat>
    let id: ID
    func body(content: Content) -> some View {
        content.background(
            GeometryReader { geo in
                Spacer().preference(
                    key: ViewKey<Element>.self,
                    value: [Element(id: id, value: geo.size.width)]
                )
            }
        )
    }
}

struct FrameWidth: Hashable {
    let frameWidth: CGFloat
}

struct FrameWidthPreference: ViewModifier {
    func body(content: Content) -> some View {
        content.background(
            GeometryReader { geo in
                Spacer().preference(
                    key: ViewKey<FrameWidth>.self,
                    value: [FrameWidth(frameWidth: geo.size.width)]
                )
            }
        )
    }
}

struct FrameHeight: Hashable {
    let frameHeight: CGFloat
}

struct FrameHeightPreference: ViewModifier {
    func body(content: Content) -> some View {
        content.background(
            GeometryReader { geo in
                Color.clear.preference(
                    key: ViewKey<FrameHeight>.self,
                    value: [FrameHeight(frameHeight: geo.size.height)]
                )
            }
        )
    }
}

struct WrapForEach<Data, ID, Content>: View
where Data: RandomAccessCollection, ID: Hashable, Content: View {
  
    let data: Array<Data.Element>
    let keyPath: KeyPath<Data.Element, ID>
    let content: (Data.Element) -> Content
    
    class ViewModel<Data: RandomAccessCollection>: ObservableObject {
           @Published var ranges: [Range<Int>]
           init(data: Data) {
               ranges = [0..<data.count]
           }
    }
    
    @ObservedObject var model: ViewModel<Data>
    @State private var frameWidth: CGFloat = .zero
    @State private var frameHeight: CGFloat = .zero
    @State private var subWidths: [ID: CGFloat] = [:]
    
    init(_ data: Data, id: KeyPath<Data.Element, ID>, @ViewBuilder content: @escaping (Data.Element) -> Content) {
           self.data = data.map { val in val }
           self.keyPath = id
           self.content = content
           self.model = ViewModel(data: data)
       }
    
    var body: some View {
        GeometryReader { reader in
            HStack {
                VStack(alignment: .leading, spacing: 0) {
                    ForEach(model.ranges, id: \.self) { range in
                        HStack(spacing: 0) {
                            ForEach(range) { i in
                                content(data[i]).fixedSize().modifier(WidthWithID(id: data[i][keyPath: keyPath]))
                            }
                        }
                    }
                }.onPreferenceChange(ViewKey<WidthWithID<ID>.Element>.self) { values in
                    self.subWidths = [:]
                    values.forEach { val in
                        self.subWidths[val.id] = val.value
                    }
                    self.freshRanges()
                }
                Spacer(minLength: 0)
            }
            .frame(width: reader.size.width)
                        .modifier(FrameWidthPreference())
                        .onPreferenceChange(ViewKey<FrameWidth>.self) { values in
                            values.forEach { val in
                                self.frameWidth = val.frameWidth
                            }
                            self.freshRanges()
                        }
                        .modifier(FrameHeightPreference())
                        .onPreferenceChange(ViewKey<FrameHeight>.self) { values in
                            values.forEach { val in
                                self.frameHeight = val.frameHeight
                            }
                            self.freshRanges()
                        }
        } .frame(height: frameHeight)
    }
    
    func freshRanges() {
            print("freshRanges")
            guard frameWidth != .zero && subWidths.count == data.count else {
                return
            }
            model.ranges = []
            var start = 0, last = 0, sum: CGFloat = .zero
            for (i, value) in data.enumerated() {
                let width = subWidths[value[keyPath: keyPath]] ?? .zero
                if sum + width >= frameWidth {
                    model.ranges.append(start..<i)
                    sum = .zero
                    start = i
                }
                sum += width
                last = i
            }
            if start <= last && data.count != 0 {
                model.ranges.append(start..<(last + 1))
            }
        }
}

然后在  RadioGroup 视图代码中 把 ForEach 替换成 WrapForEach 即可


struct FRadioGroup: View {
    @State var options: [RadioModel]
    var selected: Binding<String>
    var spacing: CGFloat = 20
    @State  var itemWidth: CGFloat = 80
    @State  var itemHeight: CGFloat = 30
    var action: ((RadioModel) -> ())! = nil
    var body: some View {
        //ForEach 替换成 WrapForEach 就可以实现流式布局了
        WrapForEach(0..<options.count, id: \.self) { index in
            FRadioButton(options[index].text, checked: .constant(selected.wrappedValue == options[index].value)) {
                selected.wrappedValue = options[index].value
                if (action != nil) {
                    self.action!(options[index])
                }
            }.frame(minWidth:itemWidth,minHeight:itemHeight)
        }
    }
}

extension FRadioGroup {
    func itemFrame(width: CGFloat = 0, height: CGFloat = 0) -> some View {
        let _width = width == 0 ? self.itemWidth : width
        let _height = height == 0 ? self.itemHeight : height
        return FRadioGroup(options: self.options, selected: self.selected, spacing: self.spacing, itemWidth: width, itemHeight: height, action: self.action)
    }
}

最终效果如下：

 

阅读量和评论数太少，先暂停更新... 
 

wj008
关注
专栏目录
swiftui 轨迹_Swift - 使用网格（UICollectionView）进行流布局
weixin_39918084的博客
01-14 435
(本文代码已升级至Swift5)一、网格UICollectionView最典型的例子是iBooks。其主要属性如下：1、layout该属性表示布局方式，有Flow、Custom两种布局方式。默认是Flow流式布局。2、Accessories是否显示页眉和页脚3、各种尺寸属性Cell Size：单元格尺寸Header Size：页眉尺寸Footer Size：页脚尺寸Min Spacing：单元格之...
SwiftUI 中通过Toggle实现单选框和复选框效果
qq_36924683的博客
11-28 1966
import SwiftUI struct ContentView: View { @State private var bo = false var body: some View { Toggle("开关", isOn: $bo) .toggleStyle(CheckBoxToggleStyle(shape: .square)) } struct CheckBoxToggleStyle: ToggleStyle{
iOS 平台的单选按钮组件（Swift UI）
weixin_44469545的博客
07-23 242
Button：RadioButton被点击时的回调函数，作用把selfID赋值给selectedID。2、在主View视图里面对上定义的RadioButtonView组件进行调用。selectedID：当前被选中的RadioButton的ID。1、自定义一个RadioButton组件的View视图。selfID:当前RadioButton自身ID。
Swift - 选择框（UIPickerView）的用法
weixin_34224941的博客
09-25 268
1，选择框可以让用户以滑动的方式选择值。示例如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 ...
SwiftUI流式布局教程
最新发布
gitblog_00772的博客
08-24 746
SwiftUI流式布局教程 swiftui-flow-layoutFlow layout / tag cloud / collection view in SwiftUI.项目地址:https://gitcode.com/gh_mirrors/sw/swiftui-flow-layout 项目介绍 SwiftUI Flow Layout 是一个基于 Swift 和 SwiftUI 的开源库，旨...
swift-FlowLayout-适用于iOS的双向布局框架
08-14
FlowLayout - 适用于iOS的双向布局框架
swiftui-app-icon-creator:使用SwiftUI在Xcode中创建iOS和macOS应用程序图标
05-09
使用SwiftUI在Xcode中创建iOS和macOS应用程序图标 需要Xcode 12和macOS 11 支持暗模式 :memo: 如何 TL; DR：在此存储库中签出。 :keycap_1: 创建一个新的Swift包 在Package.swift定义两个产品： 将包含您的...
ecommerce-admin-macos-swiftui:使用SwiftUI为macOS创建电子商务管理仪表板
04-11
在本文中，我们将深入探讨如何使用SwiftUI为macOS构建一个电子商务管理仪表板。SwiftUI是Apple推出的一种现代化用户界面框架，它允许开发者以声明式的方式编写代码，从而简化了跨平台应用的开发过程。macOS是Apple的...
mail-swiftui-sample:使用SwiftUI在macOS上的示例邮件应用
03-19
总结，"mail-swiftui-sample"项目为我们提供了一个实践SwiftUI和macOS应用开发的宝贵实例，通过学习和研究这个项目，我们可以深入了解如何利用SwiftUI构建具有完整功能的邮件应用，同时掌握声明式UI编程的思想和技巧...
slack-macos-swiftui-sample:Slack macOS Big Sur SwiftUI示例应用程序
03-19
"slack-macos-swiftui-sample" 是一个项目名称，表明这是一个与Slack（一款流行的团队协作工具）相关的 macOS 应用程序。它特别提到了 "Big Sur"，这是苹果操作系统的一个版本，暗示这个应用是针对 macOS Big Sur ...
适用于macOS的SwiftUI Reddit客户端-Swift开发
05-27
在本文中，我们将深入探讨如何使用SwiftUI框架开发一个适用于macOS的Reddit客户端。SwiftUI是Apple推出的新一代用户界面构建工具，它为开发者提供了一种声明式编程的方式来设计跨平台的应用程序界面，包括iOS、iPad...
swift-FlowStack是一个用于SwiftUI的网格布局视图
08-15
FlowStack是一个用于SwiftUI的网格布局视图
swift瀑布流自定义布局
04-26
仿照MJ瀑布流设计思路,自定义布局实现瀑布流,简单易用,不错的设计思路 https://github.com/liwei5bao/SwiftWaterfallProject.git
swift-AMChoiceiOS的单选按钮和复选框
08-15
AMChoice：iOS的单选按钮和复选框
swift-VegaScroll流式布局列表及卡片收纳式动效。Swift4iOS11
08-14
一版很 Fancy 的滑动 Cell 遮盖效果。VegaScroll 流式布局列表及卡片收纳式动效。Swift 4, iOS 11。
CheckboxButton:使用Swift构建的iOS的复选框按钮UI组件
05-18
复选框按钮 使用Swift构建的iOS的复选框按钮UI组件。 CheckboxButton UIControl的子类。 容器将适合控件的框架，同时保持其长宽比。 安装 该项目可以通过不同的方式安装： 手动的 下载专案 只需将CheckboxButton.swift复制到您的项目中 框架 下载专案 构建CheckboxButton框架 将框架嵌入到您的项目中 在您的Cartfile文件中添加github "chrisamanse/CheckboxButton" 用法 CheckboxButton可以以两种不同的方式使用： 界面生成器只需将UIView的类更改为CheckboxButton 。 代码使用初始化程序： init(frame: CGRect) 您可以运行位于同一项目中的示例应用程序，以查看其用法。 切换 当发生.TouchedUpInside事件时，将切换Checkb
SwiftUI RadioButton单选多选互斥组件(教程含源码 经典补充)
iCloudEnd的博客
08-11 795
文章看点 本文不仅为大家提供一套原生RadioButton组件，而且还学习SwiftUI数据流的最佳案例 实战需求 RadioButton 是Windows 窗体的控件，为用户提供由两个或多个互斥选项组成的选项集。常用于男女性别、是否开关等用于场景。可惜SwiftUI目前还未提供该组件，让我们用SwiftUI原生的组件实现一个吧！ 本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 掌握ViewModifier使用方法 掌握@escaping基础使用 基础知识 ViewMo
iOS/swift 单选框和复选框
代码解释生活
01-21 4410
1.********复选框******* /** 复选框 */ import UIKit class LYBmutipleSelectView: UIView { var selectindexs:[Int]=[]//选中的 //标题数组 var titleArr:[String]=[""]{ didSet{ for i...
Swift学习：Lesson8 --------- 项目应用（瀑布流布局）
sl21910610的博客
07-06 354
1、使用collectionView实现瀑布流布局：（1）该方法准备布局初始化： override func prepare() {} (2)用于设置ContentView的ContentViewSize//swiftt3.0 废除了该方法：override func collectionViewContentSize()-&gt;CGSize{ } override va...
Swift编程入门：使用Swift和Xcode开发macOS应用
"macOS Programming for Absolute Beginners: Developing Apps Using Swift and Xcode" 是一本由Wallace Wang编著的书籍，旨在引导初学者通过Swift和Xcode开发macOS应用程序。这本书针对完全不懂编程的新手，同时也...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值