# Swift UI 绘制三角形并适应宽高

## 固定宽高

![image-20200819100148468](./assets/image-20200819100148468.png)

> Path绘制完成三角形以后直接使用frame修饰符固定宽高

如果不固定宽高，三角形会尽可能大的占据宽高导致的效果会

![image-20200819100349553](./assets/image-20200819100349553.png)

## 固定高度，宽度自适应

![image-20200819095940097](file:///Users/wangjian/docs/swift%20ui/assets/image-20200819095940097.png?lastModify=1597802701)

```
 GeometryReader{} /// 保证内部的Path绘制的三角形能够自适应宽高
 
```

如果删除固定高度的frame修饰符也会尽可能大的占据高度

![image-20200819100701913](./assets/image-20200819100701913.png)

>  使用GeometryReader构造的三角形适应性不强，也不是组件化

## 使用Shape构造

![image-20200819101041396](./assets/image-20200819101041396.png)

代码分析:

1. 首先定义一个三角形(Triangle)结构体实现Shape协议
2. 实现Shape协议需要重写path方法，path方法是在一个矩形内绘制路径
3. 直接在使用的地方调用Triangle的storke描边方法绘制

> 现在是无论整体的Hstack的frame高度变化或者左右的文本变化，三角形同样能自适应高度宽度。



## 扩展

在swift ui中的矩形、圆角矩形、圆形都是在遵循Shape协议的

![image-20200819101715451](./assets/image-20200819101715451.png)



![image-20200819101745571](./assets/image-20200819101745571.png)



![image-20200819101759054](./assets/image-20200819101759054.png)

