Đầu ti&ecirc;n, với dữ liệu bạn muốn hiển thị trong b&aacute;nh xe, để tạo b&aacute;nh xe m&agrave;u, bạn c&oacute; thể lưu trữ gi&aacute; trị m&agrave;u, hoặc để tạo menu c&oacute; h&igrave;nh ảnh ở giữa b&aacute;nh xe, bạn c&oacute; thể th&ecirc;m một biến h&igrave;nh ảnh.
B&agrave;i viết n&agrave;y đang hiển thị c&aacute;c số dọc theo cạnh b&aacute;nh xe để người d&ugrave;ng chọn.
<pre class="language-python"><code>struct myVal : Equatable {
 let id = UUID()
 let val : String
}</code></pre>
Người d&ugrave;ng cần phải vuốt sang tr&aacute;i hoặc phải để di chuyển b&aacute;nh xe. Tạo kiểu dữ liệu enum về c&aacute;c bước di chuyển m&agrave; người d&ugrave;ng c&oacute; thể thực hiện.
<pre class="language-python"><code>enum Direction {
 case left
 case right
}</code></pre>
Tạo một chế độ xem v&agrave; th&ecirc;m c&aacute;c biến dưới đ&acirc;y v&agrave;o trong.
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>radius</code>: b&aacute;n k&iacute;nh của b&aacute;nh xe. Gi&aacute; trị n&agrave;y sau n&agrave;y sẽ thay đổi h&igrave;nh dạng b&ecirc;n trong sau khi lấy k&iacute;ch thước khung của b&aacute;nh xe từ chế độ xem ch&iacute;nh</li>
<li style="font-weight: 400;" aria-level="1"><code>direction</code>: giữ hướng vuốt của người d&ugrave;ng.</li>
<li style="font-weight: 400;" aria-level="1"><code>choosenIndex</code>: lưu trữ lựa chọn gi&aacute; trị của người d&ugrave;ng từ b&aacute;nh xe.</li>
<li style="font-weight: 400;" aria-level="1"><code>degree</code>: mức độ quay của b&aacute;nh xe v&agrave; c&aacute;c h&igrave;nh chiếu b&ecirc;n trong của n&oacute;.</li>
<li style="font-weight: 400;" aria-level="1"><code>array</code>: đ&acirc;y l&agrave; một mảng của myVal; c&oacute; cấu tr&uacute;c đ&atilde; tạo ở tr&ecirc;n. Mảng được sử dụng để x&acirc;y dựng c&aacute;c khung nh&igrave;n h&igrave;nh chiếu trong, ở b&ecirc;n trong b&aacute;nh xe.</li>
<li style="font-weight: 400;" aria-level="1">K&iacute;ch thước v&ograve;ng tr&ograve;n: gi&aacute; trị của chiều rộng v&agrave; chiều cao của v&ograve;ng tr&ograve;n.</li>
</ul>
<pre class="language-python"><code>struct WheelView: View {
 // Circle Radius
 @State var radius : Double = 150
 // Direction of swipe
 @State var direction = Direction.left
 // index of the number at the bottom of the circle
 @State var chosenIndex = 0
 // degree of circle and hue
 @Binding var degree : Double
 
 let array : [myVal]
 let circleSize : Double
 
 var body: some View {
 // BODY
 }
 
 }</code></pre>
Tạo h&agrave;m để di chuyển b&aacute;nh xe đến gi&aacute; trị tiếp theo, theo hướng vuốt của người d&ugrave;ng.
T&iacute;nh gi&aacute; trị g&oacute;c độ mới bằng c&aacute;ch lấy 360 chia cho số gi&aacute; trị b&ecirc;n trong mảng, v&agrave; theo d&otilde;i chỉ mục đ&atilde; chọn của người d&ugrave;ng.
<pre class="language-python"><code>func moveWheel() {
 withAnimation(.spring()) {
 if direction == .left {
 degree += Double(360/array.count)
 if chosenIndex == 0 {
 chosenIndex = array.count-1
 } else {
 chosenIndex -= 1
 }
 } else {
 degree -= Double(360/array.count)
 if chosenIndex == array.count-1 {
 chosenIndex = 0
 } else {
 chosenIndex += 1
 }
 }
 }
 }</code></pre>
Tiếp theo l&agrave;&nbsp; xử l&yacute; phần th&acirc;n với một số biến. Trước ti&ecirc;n, bạn cần biết khoảng c&aacute;ch / g&oacute;c giữa mỗi gi&aacute; trị b&ecirc;n trong mảng. Tiếp theo, tạo cử chỉ k&eacute;o với c&ocirc;ng cụ sửa đổi <code>onEnded ()</code>.
B&ecirc;n trong <code>onEnded</code>, lấy vị tr&iacute; bắt đầu x của lần vuốt v&agrave; so s&aacute;nh với vị tr&iacute; cuối của lần vuốt. Nếu gi&aacute; trị bắt đầu lớn hơn gi&aacute; trị kết th&uacute;c, người d&ugrave;ng vuốt sang tr&aacute;i v&agrave; ngược lại. Ở cuối <code>onEnded ()</code>, gọi h&agrave;m <code>moveWheel</code> để di chuyển b&aacute;nh xe.
<pre class="language-python"><code>var body: some View {
 ZStack {
 let anglePerCount = Double.pi * 2.0 / Double(array.count)
 let drag = DragGesture()
 .onEnded { value in
 if value.startLocation.x &gt; value.location.x + 10 {
 direction = .left
 } else if value.startLocation.x &lt; value.location.x - 10 {
 direction = .right
 }
 moveWheel()
 }
 }
 .frame(width: circleSize, height: circleSize)
 }</code></pre>
Để tạo b&aacute;nh xe, h&atilde;y nh&uacute;ng ZStack với <code>Circle ()</code>. Sau đ&oacute; lặp qua mảng gi&aacute; trị để th&ecirc;m v&agrave;o b&aacute;nh xe.
B&acirc;y giờ, h&atilde;y t&iacute;nh to&aacute;n g&oacute;c, độ lệch x v&agrave; độ lệch y cho mỗi gi&aacute; trị b&ecirc;n trong mảng.
Bạn c&oacute; thể chọn c&oacute; <code>Text ()</code> với c&aacute;c gi&aacute; trị từ 0 đến 10.
V&agrave;o chế độ xem đ&atilde; chọn, th&ecirc;m<code> </code><code>.rotationEffect ()</code> ở mức độ đang thống nhất với chế độ xem gốc. C&aacute;c h&igrave;nh chiếu b&ecirc;n trong di chuyển theo hướng ngược lại của b&aacute;nh xe.
B&ugrave; c&aacute;c gi&aacute; trị x v&agrave; y của c&aacute;c h&igrave;nh chiếu b&ecirc;n trong v&ograve;ng lặp bằng c&aacute;ch sử dụng tọa độ x v&agrave; y tr&ecirc;n m&agrave;n h&igrave;nh.
Cuối c&ugrave;ng, đ&aacute;nh dấu gi&aacute; trị đ&atilde; chọn b&ecirc;n trong b&aacute;nh xe. Dưới đ&acirc;y, t&ocirc;i đ&atilde; sử dụng một ph&ocirc;ng chữ kh&aacute;c cho chỉ mục đ&atilde; chọn.
Đối với Wheel&rsquo;s ZStack, h&atilde;y th&ecirc;m <code>RotationEffect ()</code> ở mức độ m&agrave; bạn đang thống nhất với chế độ xem ch&iacute;nh.
Th&ecirc;m cử chỉ k&eacute;o v&agrave;o ngăn xếp bằng c&ocirc;ng cụ sửa đổi .<code>gesture ()</code>.
<pre class="language-python"><code>var body: some View {
 ZStack {
 let anglePerCount = Double.pi * 2.0 / Double(array.count)
 let drag = DragGesture()
 .onEnded { value in
 if value.startLocation.x &gt; value.location.x + 10 {
 direction = .left
 } else if value.startLocation.x &lt; value.location.x - 10 {
 direction = .right
 }
 moveWheel()
 }
 // MARK: WHEEL STACK - BEGINNING
 ZStack {
 Circle().fill(EllipticalGradient(colors: [.orange,.yellow]))
 .hueRotation(Angle(degrees: degree))

 ForEach(0 ..&lt; array.count) { index in
 let angle = Double(index) * anglePerCount
 let xOffset = CGFloat(radius * cos(angle))
 let yOffset = CGFloat(radius * sin(angle))
 Text("\(array[index].val)")
 .rotationEffect(Angle(degrees: -degree))
 .offset(x: xOffset, y: yOffset )
 .font(Font.system(chosenIndex == index ? .title : .body, design: .monospaced))
 }
 }
 .rotationEffect(Angle(degrees: degree))
 .gesture(drag)
 .onAppear() {
 radius = circleSize/2 - 30 // 30 is for padding
 }
 // MARK: WHEEL STACK - END
 }
 .frame(width: circleSize, height: circleSize)
 }</code></pre>
<h1 style="text-align: justify;">WheelView</h1>
Đối với m&atilde; đầy đủ, h&atilde;y kiểm tra b&ecirc;n dưới:
<pre class="language-python"><code>struct WheelView: View {
 // Circle Radius
 @State var radius : Double = 150
 // Direction of swipe
 @State var direction = Direction.left
 // index of the number at the bottom of the circle
 @State var chosenIndex = 0
 // degree of circle and hue
 @Binding var degree : Double
// @State var degree = 90.0
 let array : [myVal]
 let circleSize : Double

 
 func moveWheel() {
 withAnimation(.spring()) {
 if direction == .left {
 degree += Double(360/array.count)
 if chosenIndex == 0 {
 chosenIndex = array.count-1
 } else {
 chosenIndex -= 1
 }
 } else {
 degree -= Double(360/array.count)
 if chosenIndex == array.count-1 {
 chosenIndex = 0
 } else {
 chosenIndex += 1
 }
 }
 }
 }
 
 var body: some View {
 ZStack {
 let anglePerCount = Double.pi * 2.0 / Double(array.count)
 let drag = DragGesture()
 .onEnded { value in
 if value.startLocation.x &gt; value.location.x + 10 {
 direction = .left
 } else if value.startLocation.x &lt; value.location.x - 10 {
 direction = .right
 }
 moveWheel()
 }
 // MARK: WHEEL STACK - BEGINNING
 ZStack {
 Circle().fill(EllipticalGradient(colors: [.orange,.yellow]))
 .hueRotation(Angle(degrees: degree))

 ForEach(0 ..&lt; array.count) { index in
 let angle = Double(index) * anglePerCount
 let xOffset = CGFloat(radius * cos(angle))
 let yOffset = CGFloat(radius * sin(angle))
 Text("\(array[index].val)")
 .rotationEffect(Angle(degrees: -degree))
 .offset(x: xOffset, y: yOffset )
 .font(Font.system(chosenIndex == index ? .title : .body, design: .monospaced))
 }
 }
 .rotationEffect(Angle(degrees: degree))
 .gesture(drag)
 .onAppear() {
 radius = circleSize/2 - 30 // 30 is for padding
 }
 // MARK: WHEEL STACK - END
 }
 .frame(width: circleSize, height: circleSize)
 }
}</code></pre>
<h1 style="text-align: justify;">Chế độ xem gốc</h1>
Trong chế độ xem gốc, h&atilde;y th&ecirc;m WheelView đ&atilde; tạo ở tr&ecirc;n. Chuyển g&oacute;c độ, d&atilde;y gi&aacute; trị b&aacute;nh xe v&agrave; k&iacute;ch thước của v&ograve;ng tr&ograve;n sang b&aacute;nh xe. Bạn c&oacute; thể sử dụng c&ocirc;ng cụ sửa đổi offset để định vị b&aacute;nh xe ở đầu m&agrave;n h&igrave;nh.
<pre class="language-python"><code>struct ContentView: View {
 @State var degree = 90.0
 let array : [myVal] = [myVal(val: "0"),
 myVal(val: "1"),
 myVal(val: "2"),
 myVal(val: "3"),
 myVal(val: "4"),
 myVal(val: "5"),
 myVal(val: "6"),
 myVal(val: "8"),
 myVal(val: "9"),
 myVal(val: "10")]

 var body: some View {
 ZStack (alignment: .center){
 Color.orange.opacity(0.4).ignoresSafeArea()
 .hueRotation(Angle(degrees: degree))
 
 WheelView(degree: $degree, array: array, circleSize: 400)
 .offset(y: -350)
 .shadow(color: .white, radius: 4, x: 0, y: 0)
 }
 }
}</code></pre>
<img style="width: 400px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/0ae4a588-04ee-4444-9c8f-fb8d1b2c07c3" alt="Bộ chọn b&aacute;nh xe trong SwiftUI" />
Cảm ơn bạn đ&atilde; d&agrave;nh thời gian đọc!
Theo d&otilde;i c&aacute;c b&agrave;i viết tiếp theo của <a href="https://tek4.vn/">Tek4.vn</a> để cập nhật những kiến thức về lập tr&igrave;nh v&agrave; c&ocirc;ng nghệ nh&eacute;!

Admin

Bộ chọn bánh xe trong SwiftUI

Cùng tác giả

Admin

Có liên quan