Skip to content
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Fx Studio
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Written by chuotfx on August 28, 2019

SwiftUI – Render a gradients

SwiftUI

Chào các bạn đã quay lại với bài tutorial này của mình. Và

Bây giờ đến với tiết học làm đẹp. Ahihi!

​ Trong giới làm app iOS nói chung thì có rất nhiều kiểu làm đẹp cho app. Trong đó khi nói tới Gradientthì hầu như mọi người đều muốn sử dụng image có sẵn để tốn công render hoặc nó cũng hơi phức tạp một chút.

​ Đây là 3 ví dụ đơn giản trong SwiftUI để tạo ra 1 gradient một cách nhanh chóng nhất.

Nguyên tắc

    1. Ta set background cho View.
    2. Background ở đây thì có thể từ bất kì thứ nào và với mong muốn Gradient thì sử dụng LinearGradient .
    3. Với LinearGradient thì ta lại cần 2 tham số chính.
      1. Dãy màu là 1 array Color.
      2. Vị trí 2 điểm start và end

Coding

 Ví dụ 1: Trắng và đen + từ trên xuống dưới.

LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom)

Ví dụ 2: Sử dụng 3 màu “Trắng, Cam, Đỏ”.

LinearGradient(gradient: Gradient(colors: [.white, .yellow, .red]), startPoint: .top, endPoint: .bottom)

Ví dụ 3: Sử dụng nhiều màu hơn và đi từ phải sang trái.

LinearGradient(gradient: Gradient(colors: [.green, .blue, .orange, .red]), startPoint: .leading, endPoint: .trailing)

Kết hợp vào background.

.background(LinearGradient(gradient: Gradient(colors: [.white, .yellow, .red]), startPoint: .top, endPoint: .bottom), cornerRadius: 0)

Full code cho hình trên cùng!

struct ContentView : View {
    var body: some View {
        VStack {
            Text("Hello World")
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                .font(.title)
                .foregroundColor(.white)
                .background(LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom), cornerRadius: 0)
            Text("Hello World again")
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                .font(.title)
                .foregroundColor(.white)
                .background(LinearGradient(gradient: Gradient(colors: [.white, .yellow, .red]), startPoint: .top, endPoint: .bottom), cornerRadius: 0)
            Text("Hello World again and again")
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                .font(.title)
                .foregroundColor(.white)
                .background(LinearGradient(gradient: Gradient(colors: [.green, .blue, .orange, .red]), startPoint: .leading, endPoint: .trailing), cornerRadius: 0)
        }
    }
}

​ Cảm ơn bạn đã đọc và theo dõi bài viết này. Ngoài ra, bạn muốn xem trực quan sinh động hơn thì có thể xem ở link video sau.

 

FacebookTweetPinYummlyLinkedInPrintEmailShares18

Related Posts:

  • Tích hợp UIView (UIKit) vào SwiftUI Project - SwiftUI Notes #15
    Tích hợp UIView (UIKit) vào SwiftUI Project - SwiftUI Notes…
  • Tích hợp UIViewController (UIKit) vào SwiftUI Project - SwiftUI Notes #14
    Tích hợp UIViewController (UIKit) vào SwiftUI Project -…
  • SwiftUI - Phần 1 :  Làm quen với SwiftUI
    SwiftUI - Phần 1 : Làm quen với SwiftUI
  • Creating your UI - SwiftUI Notes #2
    Creating your UI - SwiftUI Notes #2
Tags: gradients, SwiftUI
Written by chuotfx

Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Donate – Buy me a coffee!

Recent Posts

  • Map type – Dart Tour
  • Set type – Dart Tour
  • List type – Dart Tour
  • Null safety – Dart Tour
  • Classes & Objects – Dart Tour
  • Quick trong 10 phút
  • Nimble trong 10 phút
  • Functions – Dart Tour
  • Control Flow – Dart Tour
  • API Testing (UnitTest) with OHHTTPStubs

Fan page

Fx Studio

Archives

  • August 2022 (4)
  • July 2022 (7)
  • June 2022 (8)
  • May 2022 (5)
  • April 2022 (1)
  • March 2022 (3)
  • February 2022 (5)
  • January 2022 (4)
  • December 2021 (6)
  • November 2021 (8)
  • October 2021 (8)
  • September 2021 (8)
  • August 2021 (8)
  • July 2021 (9)
  • June 2021 (8)
  • May 2021 (7)
  • April 2021 (11)
  • March 2021 (12)
  • February 2021 (3)
  • January 2021 (3)
  • December 2020 (3)
  • November 2020 (9)
  • October 2020 (7)
  • September 2020 (17)
  • August 2020 (1)
  • July 2020 (3)
  • June 2020 (1)
  • May 2020 (2)
  • April 2020 (3)
  • March 2020 (20)
  • February 2020 (5)
  • January 2020 (2)
  • December 2019 (12)
  • November 2019 (12)
  • October 2019 (19)
  • September 2019 (17)
  • August 2019 (10)

Tags

Actor Advanced Swift api AppDistribution Asynchronous autolayout basic ios tutorial blog callback ci/cd closure collectionview combine concurrency CoreData Core Location crashlytics darkmode dart dart basic dart tour Declarative decoding delegate deploy fabric fastlane firebase flavor flutter GCD iOS mapview MVVM optional protocol rxswift Swift Swift 5.5 SwiftUI SwiftUI Notes tableview testing TravisCI unittest

You may also like:

  • SwiftUI - Phần 1 : Làm quen với SwiftUI
    SwiftUI - Phần 1 :  Làm quen với SwiftUI
  • SwiftUI App Life Cycle - SwiftUI Notes #6
    SwiftUI App Life Cycle - SwiftUI Notes #6
  • SwiftUI - Phần 9 : Routing in SwiftUI
    SwiftUI - Phần 9 : Routing in SwiftUI
  • Tích hợp UIViewController (UIKit) vào SwiftUI Project -…
    Tích hợp UIViewController (UIKit) vào SwiftUI Project - SwiftUI Notes #14
  • Hello SwiftUI
    Hello SwiftUI

About me

Education, Mini Game, Digital Art & Life of coders
Contacts:
contacts@fxstudio.dev

Fx Studio

  • Home
  • About me
  • Contact us
  • Mail
  • Privacy Policy
  • Donate
  • Sitemap

Categories

  • Art (1)
  • Blog (20)
  • Code (4)
  • Combine (22)
  • Flutter & Dart (16)
  • iOS & Swift (83)
  • RxSwift (37)
  • SwiftUI (75)
  • Tutorials (69)

Newsletter

Stay up to date with our latest news and posts.
Loading

Copyright © 2022 Fx Studio - All rights reserved.

Share this ArticleLike this article? Email it to a friend!

Email sent!