kivyandcss 1.1

kivy-css kivy-css là một thư viện đơn giản giúp bạn dễ dàng áp dụng các style CSS vào ứng dụng Kivy. Thư viện này cho phép bạn sử dụng cú pháp CSS quen thuộc để thiết kế giao diện, đồng thời hỗ trợ dễ dàng tích hợp vào các dự án Kivy.

Đây là link GitHub thư viện của tai bạn có thể clone nó https://github.com/hqmdokkai/kivyandcss.git git clone https://github.com/hqmdokkai/kivyandcss.git cd kivyandcss pip install .

Cài đặt thư viện qua pip:

pip install kivy-css

Sử dụng cơ bản Dưới đây là một ví dụ cơ bản về cách sử dụng thư viện kivy-css để áp dụng style CSS cho một ứng dụng Kivy.

1. Tạo file style.css Trước hết, bạn cần tạo file style.css để chứa các style CSS bạn muốn áp dụng. Ví dụ:

#style.css

Label { color: red; font-size: 24sp; }

BoxLayout { background-color: #B0E57C; /* màu nền xanh nhạt */ } 2. Sử dụng thư viện trong ứng dụng Kivy Dưới đây là ví dụ về ứng dụng Kivy sử dụng kivy-css để áp dụng các style từ file CSS:

from kivy.app import App from kivy.uix.label import Label from kivy.uix.boxlayout import BoxLayout from kivy.lang import Builder from kivy.graphics import Rectangle, Color from kivy_css import CssParser # Import class CssParser từ thư viện kivy-css

class MainApp(App): def build(self): # Parse CSS và lấy KV styles css_parser = CssParser() kv_styles = css_parser.parse_file('style.css')

    # Load KV styles vào Builder
    Builder.load_string(kv_styles)
    
    # Tạo và trả về widget gốc
    root = BoxLayout()
    
    # Thêm màu nền cho BoxLayout
    with root.canvas.before:
        Color(0.5, 0.5, 0.5, 1)  # Thay đổi màu nền (xám ở đây)
        self.rect = Rectangle(pos=root.pos, size=root.size)
    
    # Liên kết kích thước và vị trí của rectangle với widget gốc
    root.bind(pos=self.update_rect, size=self.update_rect)
    
    header = Label(text='Welcome to My App')
    root.add_widget(header)
    return root

def update_rect(self, instance, value):
    self.rect.pos = instance.pos
    self.rect.size = instance.size

if name == 'main': MainApp().run()

3. Giải thích mã CssParser: Đây là lớp chịu trách nhiệm đọc và chuyển đổi các style từ file CSS thành các chuỗi KV mà Kivy có thể hiểu được. Builder.load_string(kv_styles): Sau khi các style CSS được chuyển thành KV, chúng sẽ được tải vào ứng dụng Kivy để áp dụng. root.canvas.before: Đoạn mã này sử dụng Kivy.graphics để thêm một màu nền cho BoxLayout trước khi hiển thị các widget con. Label: Widget Label sẽ nhận style từ file CSS, thay đổi màu chữ thành đỏ và kích thước font thành 24sp.
4. Chạy ứng dụng Đảm bảo rằng bạn có file style.css trong cùng thư mục với mã Python. Sau đó, chỉ cần chạy ứng dụng:

python main.py Ứng dụng sẽ khởi động với màu nền cho BoxLayout và style cho Label được áp dụng từ file CSS.