1. RoundedRectangle CheckBox
Với loại checkbox đầu tiên chúng tạo tạo một struct view và thêm RoundedRectangle. Sử dụng hàm stroke và thêm cho nó StrikeStyle với kích thước dòng kẻ mà bạn mong muốn.
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">struct</span> <span class="token builtin">CheckBoxView</span><span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> body<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span> <span class="token function">RoundedRectangle</span><span class="token punctuation">(</span>cornerRadius<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span>from<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> to<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">stroke</span><span class="token punctuation">(</span>style<span class="token punctuation">:</span> <span class="token function">StrokeStyle</span><span class="token punctuation">(</span>lineWidth<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">frame</span><span class="token punctuation">(</span>width<span class="token punctuation">:</span> <span class="token number">70</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">70</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">foregroundColor</span><span class="token punctuation">(</span><span class="token punctuation">.</span>green<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Tiếp theo đưa RoundedRectangle vào ZStack và thêm một RoundedRectangle khác vào. Chắc chắn rằng RoundedRectangle thứ hai nhỏ hơn cái trước đó.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">struct</span> <span class="token builtin">CheckBoxView</span><span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> body<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span> <span class="token builtin">ZStack</span> <span class="token punctuation">{</span> <span class="token function">RoundedRectangle</span><span class="token punctuation">(</span>cornerRadius<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span>from<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> to<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">stroke</span><span class="token punctuation">(</span>style<span class="token punctuation">:</span> <span class="token function">StrokeStyle</span><span class="token punctuation">(</span>lineWidth<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">frame</span><span class="token punctuation">(</span>width<span class="token punctuation">:</span> <span class="token number">70</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">70</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">foregroundColor</span><span class="token punctuation">(</span><span class="token punctuation">.</span>green<span class="token punctuation">)</span> <span class="token function">RoundedRectangle</span><span class="token punctuation">(</span>cornerRadius<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span>from<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> to<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token builtin">Color</span><span class="token punctuation">.</span>green<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">frame</span><span class="token punctuation">(</span>width<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Khai báo một biến Bool binding gọi là checked ở đầu struct. Thêm dấu tick bên dưới RoundedRectangle thứ hai như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <span class="token keyword">struct</span> <span class="token builtin">CheckBoxView</span><span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">{</span> @<span class="token builtin">Binding</span> <span class="token keyword">var</span> checked<span class="token punctuation">:</span> <span class="token builtin">Bool</span> <span class="token keyword">var</span> body<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span> <span class="token builtin">ZStack</span> <span class="token punctuation">{</span> <span class="token function">RoundedRectangle</span><span class="token punctuation">(</span>cornerRadius<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span>from<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> to<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">stroke</span><span class="token punctuation">(</span>style<span class="token punctuation">:</span> <span class="token function">StrokeStyle</span><span class="token punctuation">(</span>lineWidth<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">frame</span><span class="token punctuation">(</span>width<span class="token punctuation">:</span> <span class="token number">70</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">70</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">foregroundColor</span><span class="token punctuation">(</span>checked <span class="token operator">?</span> <span class="token builtin">Color</span><span class="token punctuation">.</span>green <span class="token punctuation">:</span> <span class="token builtin">Color</span><span class="token punctuation">.</span>gray<span class="token punctuation">.</span><span class="token function">opacity</span><span class="token punctuation">(</span><span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token function">RoundedRectangle</span><span class="token punctuation">(</span>cornerRadius<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span>from<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> to<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span>checked <span class="token operator">?</span> <span class="token builtin">Color</span><span class="token punctuation">.</span>green <span class="token punctuation">:</span> <span class="token builtin">Color</span><span class="token punctuation">.</span>gray<span class="token punctuation">.</span><span class="token function">opacity</span><span class="token punctuation">(</span><span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">frame</span><span class="token punctuation">(</span>width<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">)</span> <span class="token keyword">if</span> checked <span class="token punctuation">{</span> <span class="token function">Image</span><span class="token punctuation">(</span>systemName<span class="token punctuation">:</span> <span class="token string">"checkmark"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">foregroundColor</span><span class="token punctuation">(</span><span class="token builtin">Color</span><span class="token punctuation">.</span>white<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Khai báo một biến khác để kiểm soát hàm trim của RoundedRectangle đầu tiên. Nó sẽ dùng để tạo ra animation.
1 2 3 4 5 6 7 | @<span class="token builtin">Binding</span> <span class="token keyword">var</span> trimVal<span class="token punctuation">:</span> <span class="token builtin">CGFloat</span> <span class="token keyword">var</span> animationData<span class="token punctuation">:</span> <span class="token builtin">CGFloat</span> <span class="token punctuation">{</span> <span class="token keyword">get</span> <span class="token punctuation">{</span> trimVal <span class="token punctuation">}</span> <span class="token keyword">set</span> <span class="token punctuation">{</span> trimVal <span class="token operator">=</span> newValue <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Sau đó hãy thay đổi trim bằng giá trị biến mới.
1 2 3 4 5 6 | <span class="token function">RoundedRectangle</span><span class="token punctuation">(</span>cornerRadius<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span>from<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> to<span class="token punctuation">:</span> trimVal<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">stroke</span><span class="token punctuation">(</span>style<span class="token punctuation">:</span> <span class="token function">StrokeStyle</span><span class="token punctuation">(</span>lineWidth<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">frame</span><span class="token punctuation">(</span>width<span class="token punctuation">:</span> <span class="token number">70</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">70</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">foregroundColor</span><span class="token punctuation">(</span>checked <span class="token operator">?</span> <span class="token builtin">Color</span><span class="token punctuation">.</span>green <span class="token punctuation">:</span> <span class="token builtin">Color</span><span class="token punctuation">.</span>gray<span class="token punctuation">.</span><span class="token function">opacity</span><span class="token punctuation">(</span><span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> |
Bạn đã xong bước khởi tạo giờ quay lại ContentView để thêm CheckBoxView vào đó.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">struct</span> <span class="token builtin">ContentView</span><span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">{</span> @<span class="token builtin">State</span> <span class="token keyword">var</span> trimVal<span class="token punctuation">:</span> <span class="token builtin">CGFloat</span> <span class="token operator">=</span> <span class="token number">0</span> @<span class="token builtin">State</span> <span class="token keyword">var</span> checked <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token keyword">var</span> body<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span> <span class="token function">Button</span><span class="token punctuation">(</span>action<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">CheckBoxView</span><span class="token punctuation">(</span>checked<span class="token punctuation">:</span> $checked<span class="token punctuation">,</span> trimVal<span class="token punctuation">:</span> $trimVal<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Kết quả thu được như sau:
2. Circular CheckBox
Bạn có thể trở lại file CheckBoxView và thay đổi shape thành circle như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token keyword">var</span> body<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span> <span class="token builtin">ZStack</span> <span class="token punctuation">{</span> <span class="token function">Circle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span>from<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> to<span class="token punctuation">:</span> trimVal<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">stroke</span><span class="token punctuation">(</span>style<span class="token punctuation">:</span> <span class="token function">StrokeStyle</span><span class="token punctuation">(</span>lineWidth<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">frame</span><span class="token punctuation">(</span>width<span class="token punctuation">:</span> <span class="token number">70</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">70</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">foregroundColor</span><span class="token punctuation">(</span><span class="token keyword">self</span><span class="token punctuation">.</span>checked <span class="token operator">?</span> <span class="token builtin">Color</span><span class="token punctuation">.</span>green <span class="token punctuation">:</span> <span class="token builtin">Color</span><span class="token punctuation">.</span>gray<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">overlay</span><span class="token punctuation">(</span> <span class="token function">Circle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token keyword">self</span><span class="token punctuation">.</span>checked <span class="token operator">?</span> <span class="token builtin">Color</span><span class="token punctuation">.</span>green <span class="token punctuation">:</span> <span class="token builtin">Color</span><span class="token punctuation">.</span>gray<span class="token punctuation">.</span><span class="token function">opacity</span><span class="token punctuation">(</span><span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">frame</span><span class="token punctuation">(</span>width<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token keyword">if</span> checked <span class="token punctuation">{</span> <span class="token function">Image</span><span class="token punctuation">(</span>systemName<span class="token punctuation">:</span> <span class="token string">"checkmark"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">foregroundColor</span><span class="token punctuation">(</span><span class="token builtin">Color</span><span class="token punctuation">.</span>white<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
3. Capsule CheckBox
Tiếp theo hãy tạo một loại thú vị hơn nhé. Thêm hai biến width và removeText .
Thuộc tính width được sử dụng cho capsule frame, để đảm bảo phần thứ 2 nhỏ hơn phần thứ nhất hãy lấy width – 10, cuối cùng hãy thêm nó vào một lệnh if như sau:
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 | <span class="token keyword">struct</span> <span class="token builtin">CheckBoxView</span><span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">{</span> @<span class="token builtin">Binding</span> <span class="token keyword">var</span> checked<span class="token punctuation">:</span> <span class="token builtin">Bool</span> @<span class="token builtin">Binding</span> <span class="token keyword">var</span> trimVal<span class="token punctuation">:</span> <span class="token builtin">CGFloat</span> @<span class="token builtin">Binding</span> <span class="token keyword">var</span> width<span class="token punctuation">:</span> <span class="token builtin">CGFloat</span> @<span class="token builtin">Binding</span> <span class="token keyword">var</span> removeText<span class="token punctuation">:</span> <span class="token builtin">Bool</span> <span class="token keyword">var</span> animationData<span class="token punctuation">:</span> <span class="token builtin">CGFloat</span> <span class="token punctuation">{</span> <span class="token keyword">get</span> <span class="token punctuation">{</span> trimVal <span class="token punctuation">}</span> <span class="token keyword">set</span> <span class="token punctuation">{</span> trimVal <span class="token operator">=</span> newValue <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">var</span> body<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span> <span class="token builtin">ZStack</span> <span class="token punctuation">{</span> <span class="token function">Capsule</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span>from<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> to<span class="token punctuation">:</span> trimVal<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">stroke</span><span class="token punctuation">(</span>style<span class="token punctuation">:</span> <span class="token function">StrokeStyle</span><span class="token punctuation">(</span>lineWidth<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">frame</span><span class="token punctuation">(</span>width<span class="token punctuation">:</span> width<span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">70</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">foregroundColor</span><span class="token punctuation">(</span><span class="token keyword">self</span><span class="token punctuation">.</span>checked <span class="token operator">?</span> <span class="token builtin">Color</span><span class="token punctuation">.</span>green <span class="token punctuation">:</span> <span class="token builtin">Color</span><span class="token punctuation">.</span>gray<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">overlay</span><span class="token punctuation">(</span> <span class="token function">Capsule</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token keyword">self</span><span class="token punctuation">.</span>checked <span class="token operator">?</span> <span class="token builtin">Color</span><span class="token punctuation">.</span>green <span class="token punctuation">:</span> <span class="token builtin">Color</span><span class="token punctuation">.</span>gray<span class="token punctuation">.</span><span class="token function">opacity</span><span class="token punctuation">(</span><span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">frame</span><span class="token punctuation">(</span>width<span class="token punctuation">:</span> width <span class="token operator">-</span> <span class="token number">10</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token keyword">if</span> checked <span class="token punctuation">{</span> <span class="token function">Image</span><span class="token punctuation">(</span>systemName<span class="token punctuation">:</span> <span class="token string">"checkmark"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">foregroundColor</span><span class="token punctuation">(</span><span class="token builtin">Color</span><span class="token punctuation">.</span>white<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">opacity</span><span class="token punctuation">(</span><span class="token function">Double</span><span class="token punctuation">(</span>trimVal<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token operator">!</span>removeText <span class="token punctuation">{</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"Check Mark"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Trong ContentView sẽ điều chỉnh lại như sau:
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 | <span class="token keyword">struct</span> <span class="token builtin">ContentView</span><span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">{</span> @<span class="token builtin">State</span> <span class="token keyword">var</span> trimVal<span class="token punctuation">:</span> <span class="token builtin">CGFloat</span> <span class="token operator">=</span> <span class="token number">0</span> @<span class="token builtin">State</span> <span class="token keyword">var</span> checked <span class="token operator">=</span> <span class="token boolean">false</span> @<span class="token builtin">State</span> <span class="token keyword">var</span> width<span class="token punctuation">:</span> <span class="token builtin">CGFloat</span> <span class="token operator">=</span> <span class="token number">200</span> @<span class="token builtin">State</span> <span class="token keyword">var</span> removeText<span class="token punctuation">:</span> <span class="token builtin">Bool</span> <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token keyword">var</span> body<span class="token punctuation">:</span> some <span class="token builtin">View</span> <span class="token punctuation">{</span> <span class="token function">CheckBoxView</span><span class="token punctuation">(</span>checked<span class="token punctuation">:</span> $checked<span class="token punctuation">,</span> trimVal<span class="token punctuation">:</span> $trimVal<span class="token punctuation">,</span> width<span class="token punctuation">:</span> $width<span class="token punctuation">,</span> removeText<span class="token punctuation">:</span> $removeText<span class="token punctuation">)</span> <span class="token punctuation">.</span>onTapGesture <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token operator">!</span><span class="token keyword">self</span><span class="token punctuation">.</span>checked <span class="token punctuation">{</span> <span class="token keyword">self</span><span class="token punctuation">.</span>removeText<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> withAnimation <span class="token punctuation">{</span> <span class="token keyword">self</span><span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token number">70</span> <span class="token punctuation">}</span> <span class="token function">withAnimation</span><span class="token punctuation">(</span><span class="token builtin">Animation</span><span class="token punctuation">.</span><span class="token function">easeIn</span><span class="token punctuation">(</span>duration<span class="token punctuation">:</span> <span class="token number">0.7</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">self</span><span class="token punctuation">.</span>trimVal <span class="token operator">=</span> <span class="token number">1</span> <span class="token keyword">self</span><span class="token punctuation">.</span>checked<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> withAnimation <span class="token punctuation">{</span> <span class="token keyword">self</span><span class="token punctuation">.</span>trimVal <span class="token operator">=</span> <span class="token number">0</span> <span class="token keyword">self</span><span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token number">200</span> <span class="token keyword">self</span><span class="token punctuation">.</span>checked<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">self</span><span class="token punctuation">.</span>removeText<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Ở trên mình chia sẻ một số loại cơ bản. Bạn có thể từ đó tạo ra nhiều loại animation đẹp mắt hơn nữa nhé.
Nguồn:
https://medium.com/better-programming/how-to-create-and-animate-checkboxes-in-swiftui-e428fe7cc9c1