在日常的SwiftUI开发过程中，常常会出现一些“小BUG”让咱们措手不及、头顶发凉。这些问题可能是因为咱们自己不熟悉SwiftUI语法导致的，也有是SwiftUI本身自带的缺陷，毕竟是一个新式语言。

那么本章就介绍一些SwiftUI开发的小技巧，协助咱们避避那些让咱们头秃的坑。

1、怎么在List列表视图去掉分割线LineSeparator？

SwiftUI中的List能够说是UIKit中TableView的进化版本，在UIKit中咱们运用separatorColor修饰符将分割线的款式改为无。示例：

tableView.separatorColor = .clear

在SwiftUI中运用的办法相似，SwiftUI中的List的底层运用的是UITableView，咱们能够调用AppearanceAPI来完成去掉分割线款式。示例：

UITableView.appearance().separatorColor = .clear

8个SwiftUI的小技巧让隔壁同事两眼放光，直呼太卷了

但是，运用这种办法会导致App中一切的List，包含其他页面的的List也会主动去掉分割线，这是因为UITableView是List的底层，咱们的修饰符是作用在UITableView上的。

往后咱们要在其他页面，比方设置页面，要康复分割线，咱们就需要赋予分割线的款式。示例：

UITableView.appearance().separatorColor = .systemGray4

8个SwiftUI的小技巧让隔壁同事两眼放光，直呼太卷了

2、怎么在List列表视图躲藏箭头？

在UIKit中，咱们运用accessoryType修饰符来禁用disclosure指示器，也就是右侧的箭头。示例：

cell.accessoryType = .none

在SwiftUI中，十分惋惜的是，Apple没有供给专门的API来设置躲藏disclosure指示器，这会有点麻烦。

咱们建立一个List列表来看看，当咱们运用NavigationLink跳转到DetailView详情页时，体系就会主动展现右侧的箭头，示例：

8个SwiftUI的小技巧让隔壁同事两眼放光，直呼太卷了

那么咱们试试自己来完成躲藏disclosure指示器。

struct ContentView: View {
var body: some View {
NavigationView {
List {
ForEach(1 ... 4, id: \.self) { index in
ZStack(alignment: .leading) {
NavigationLink(
destination: DetailView()) {
}
.opacity(0)
Text("第 \(index)页")
}
}
}.navigationTitle("列表")
}
}
}

8个SwiftUI的小技巧让隔壁同事两眼放光，直呼太卷了

上述代码中，咱们运用ZStack层叠视图将整个NavigationLink的视图包裹起来，然后运用opacity修饰符把disclosure指示器躲藏。

看起来不错！

3、怎么修正整个视图的布景色彩？

在List列表中，因为咱们运用SwiftUI自带的列表组件，它会默认给整个视图填充一个布景色彩以凸显列表，这时咱们追求页面整体性时，需要给List视图加一个布景色彩。

在UIKit中，咱们能够直接给视图加布景色彩，示例：

view.backgroundColor = UIColor.colorF6F7FB()

首要，咱们要去掉原有的List列表色彩，示例：

init() {
UITableView.appearance().backgroundColor = .clear
}

然后在事务代码中，咱们能够运用ZStack层叠视图和Color的办法设置List的布景色彩，示例：

Color(red: 132.0 / 255.0, green: 161.0 / 255.0, blue: 255.0 / 255.0).edgesIgnoringSafeArea(.all)

8个SwiftUI的小技巧让隔壁同事两眼放光，直呼太卷了

不错不错！

4、怎么经过网络请求显现一张网络图片？

在常用的设置页面或许我的页面，会运用到用户头像等作为用户登录示例，除了运用第三方网络请求框架外，咱们也能够运用SwiftUI自带的网络图片组件，示例：

AsyncImage(url: URL(string: imageURL))
 .aspectRatio(contentMode: .fit)
 .frame(minWidth: 120, maxWidth: 120, minHeight: 120, maxHeight: 120)
 .cornerRadius(8)

8个SwiftUI的小技巧让隔壁同事两眼放光，直呼太卷了

上述代码中，咱们只需要界说一个图片的网络地址，就能够运用AsyncImage组件呈现一张图片出来，并且AsyncImage和Image一样，能够运用修饰符修正巨细的参数。

5、怎么制作带有边角的图形？

在SwiftUI开发过程中，咱们常常会看到一些带有部分圆角的形状，这又是怎么完成的呢？

8个SwiftUI的小技巧让隔壁同事两眼放光，直呼太卷了

咱们能够经过图片的办法展现，也能够自己根据形状制作，下面咱们测验运用Shape形状来完成这个效果。示例：

struct CShape: Shape {
func path(in rect: CGRect) -> Path {
let path = UIBezierPath(
roundedRect: rect,
byRoundingCorners: [.topRight, .bottomLeft],
cornerRadii: CGSize(width: 55, height: 55)
)
return Path(path.cgPath)
}
}

上述代码中，咱们制作了一个形状CShape结构体，在结构体中咱们的界说了一个办法path，它回来一个Path路径。

咱们运用贝塞尔曲线UIBezierPath进行制作，在右上topRight和左下bottomLeft制作曲率。

接下来咱们在视图中运用，示例：

struct CShapeView: View {
var body: some View {
Rectangle()
.fill(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .leading, endPoint: .trailing))
.frame(width: 100, height: 100)
.clipShape(CShape())
}
}

8个SwiftUI的小技巧让隔壁同事两眼放光，直呼太卷了

上述代码中，咱们制作了一个矩形Rectangle，给它填充了一个蓝色过渡到绿色的渐变色，然后设置了巨细为100*100。

最终咱们运用clipShape修饰符切开曲线，切开办法为上面设置好的CShape。

这样，咱们就完成了一个相似叶子效果的带边角的形状。

6、怎么制作虚线边框？

在新版的Xcode中，咱们已经不能直接运用border修饰符给按钮加边框了，那咱们该怎么给按钮加边框线呢？

其实很简单，咱们能够运用overlay修饰符在按钮上掩盖一层边框，示例：

Text("文如秋雨")
 .font(.title)
 .foregroundColor(.blue)
 .padding()
 .overlay(
  RoundedRectangle(cornerRadius: 30)
   .stroke(Color(.systemGray5), lineWidth: 2)
 )

8个SwiftUI的小技巧让隔壁同事两眼放光，直呼太卷了

上述代码中，咱们运用overlay掩盖了一层圆角矩形RoundedRectangle，圆角度数为30，并且运用stroke修饰符给圆角赋予了一个灰色systemGray5，和2的线宽。

这是边框的完成办法，那么虚线边框咱们运用的是Capsule容器。示例：

Text("文如秋雨")
 .font(.title)
 .foregroundColor(.blue)
 .padding()
 .overlay(
  Capsule(style: .continuous)
   .stroke(Color.blue, style: StrokeStyle(lineWidth: 2, dash: [10]))
 )

8个SwiftUI的小技巧让隔壁同事两眼放光，直呼太卷了

上述代码中，咱们掩盖的是Capsule容器，然后将Capsule容器的款式指定为StrokeStyle，StrokeStyle款式中线宽为2，线段间距为10。

如此，咱们便完成了制作一个虚线边框。

7、怎么共享文本和图片？

在实践的开发应用中，咱们常常会在App中运用共享操作，将某一段文字或许图片共享出去，这是怎么完成的呢？

首要咱们先完成共享的办法，示例：

struct ShareSheet: UIViewControllerRepresentable {
var items: [Any]
func makeUIViewController(context: Context) -> UIActivityViewController {
let controller = UIActivityViewController(activityItems: items, applicationActivities: nil)
return controller
}
func updateUIViewController(_ uiViewController: UIActivityViewController, context: Context) {
}
}

上述代码中，咱们创建了一个ShareSheet结构体，它遵从UIViewControllerRepresentable协议。

咱们声明了一个items变量是随机类型，便于后续咱们存储不同类型的内容。然后界说了一个办法makeUIViewController，调用体系的UIActivityViewController视图办法，共享声明好的items内容。

接下来，咱们来完成视图部分，示例：

struct ShareLinkView: View {
let items = ["https:///user/3897092103223517"]
@State var showingSheet: Bool = false
var body: some View {
HStack {
Image(systemName: "square.and.arrow.up")
Text("共享")
}
.onTapGesture {
showingSheet.toggle()
}
.sheet(isPresented: $showingSheet) {
ShareSheet(items: items)
}
}
}

8个SwiftUI的小技巧让隔壁同事两眼放光，直呼太卷了

上述代码中，咱们声明了一个常量，存储咱们的网站地址，然后运用Image和Text创建了一个共享的款式，调用sheet弹窗办法打开弹窗，弹窗的内容为咱们声明好的ShareSheet视图，然后将声明好的内容传入进行共享。效果如下：

8个SwiftUI的小技巧让隔壁同事两眼放光，直呼太卷了

8、怎么在按钮点击时有震动反应？

iOS很杰出的一点是它的线性马达所带来的反应体验，让咱们在点击屏幕某些操作时能够接收到App供给的反应信息。

假如咱们需要给App的某些操作参加一些震动反应，该怎么完成？

咱们能够运用UINotificationFeedbackGenerator来完成震动反应的效果，示例：

struct Haptics {
static func hapticSuccess() {
let generator = UINotificationFeedbackGenerator()
generator.notificationOccurred(.success)
}
static func hapticWarning() {
let generator = UINotificationFeedbackGenerator()
generator.notificationOccurred(.warning)
}
}

上述代码中，咱们创建了一个结构体Haptics，在Haptics中界说了2个震动反应效果，一个时成功反应，一个是失利反应。

然后咱们在实践事务视图中运用它，示例：

struct HapticsView: View {
var body: some View {
VStack(spacing:40) {
Text("成功时的反应")
.padding()
.foregroundColor(.white)
.background(Color.green)
.cornerRadius(5)
.onTapGesture {
Haptics.hapticSuccess()
}
Text("失利时的反应")
.padding()
.foregroundColor(.white)
.background(Color.gray)
.cornerRadius(5)
.onTapGesture {
Haptics.hapticWarning()
}
}
}
}

8个SwiftUI的小技巧让隔壁同事两眼放光，直呼太卷了

上述代码中，咱们创建了2个按钮，分别赋予了不同的款式，当咱们点击按钮时，会调用震动反应的办法，从而完成让用户有点击的效果。

震动反应常用在长按或许一些警告事务场景中，能够视状况而运用。

小结

好啦！这就是本章的一切内容，是不是有点眼前一亮呢？

你还知道有哪些SwiftUI小技巧，不妨共享一下。

假如本专栏对你有协助，不妨点赞、评论、关注～

我正在参与技能社区创作者签约方案招募活动，点击链接报名投稿。