Twitter: @OKorchytskyi

Fit 允许你将视图排列成行,而无需费心去分组或测量它们,这都归功于 Layout 协议的实现。

用法

像使用其他 SwiftUI 堆栈一样添加你的视图

import Fit

Fit {
    Text("Tags:")

    ForEach(tags) { tag in
        TagView(tag: tag)
    }

    TextField("New tag", text: $input)
}

tag_list_example

注意

此示例的完整代码:标签列表示例

自定义

Fit 提供了多种方式来自定义你的布局

行对齐和间距

// .leading (default), .center or .trailing
Fit(lineAlignment: .center, lineSpacing: 12) {
    // views
}

注意

默认的行间距是 .viewSpacing,它合并了行中所有项目的间距,然后使用垂直距离,ViewSpacing.distance,来添加行与行之间的间距。

项目对齐和间距

你可以像在 HStack 中一样对齐项目

// fixed item spacing
Fit(itemAlignment: .firstTextBaseline, itemSpacing: 8) {
    // views
}

// view's preferred spacing
Fit(itemAlignment: .firstTextBaseline, itemSpacing: .viewSpacing(minimum: 8)) {
    // views
}

换行

使用视图修饰符在特定视图之前或之后添加换行符

Fit {
    Text("Title:")
        .fit(lineBreak: .after)
    // next views
}

逐行样式

你可以使用 LineStyle 为每一行定义特定的样式

let conveyorBeltStyle: LineStyle = .lineSpecific { style, line in
    // reverse every second line
    style.reversed = (line.index + 1).isMultiple(of: 2)
    // if the line is reversed, it should start from the trailing edge
    style.alignment = style.reversed ? .trailing : .leading
}

Fit(lineStyle: conveyorBeltStyle) {
    // views
}

conveyor_belt_example

注意

此示例的完整代码:传送带示例

也可以创建可变样式

var fancyAlignJustified: LineStyle {
    .lineSpecific { style, line in
        if stretch {
            style.stretched = line.percentageFilled >= threshold
        }
    }
}

Fit(lineStyle: fancyAlignJustified) {
    // views
}

stretching_example

注意

此示例的完整代码:长文本示例

安装

使用 Swift Package Manager 获取 Fit

.package(url: "https://github.com/OlehKorchytskyi/Fit", from: "1.0.2")

Fit 导入到你的 Swift 代码中

import Fit

许可证

MIT 许可证。

版权所有 (c) 2024 Oleh Korchytskyi。

特此授予任何人免费许可,以获取本软件及相关文档文件(“软件”)的副本,并不受限制地处理本软件,包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售本软件的副本,并允许向获得本软件的人员提供本软件,但须符合以下条件:

上述版权声明和本许可声明应包含在本软件的所有副本或实质部分中。

本软件按“原样”提供,不提供任何形式的明示或暗示保证,包括但不限于适销性、特定用途适用性和不侵权的保证。在任何情况下,作者或版权持有人均不对任何索赔、损害或其他责任负责,无论是在合同、侵权行为或其他方面,因本软件或本软件的使用或其他处理而产生、发生或与之相关的责任。