Styling QML mà không tự đánh dấu mỗi tài sản để được theo kiểu

Question

Tôi biết rằng QML không hỗ trợ kiểu CSS như widget làm, và tôi đã đọc lên trên cách tiếp cận thay thế cho phong cách/theming:

• https://qt-project.org/wiki/QmlStyling
• http://www.slideshare.net/BurkhardStubert/practical-qml-key-navigation/34

Phổ biến cho các phương pháp này là chúng yêu cầu nhà phát triển chỉ định các phần của QML có thể được tạo kiểu, hoặc bằng cách liên kết với thuộc tính trong "tệp QML kiểu dáng/singleton" hoặc bằng cách sử dụng Trình tải tải khác Thành phần QML dựa trên tên kiểu. Những gì tôi muốn là cái gì đó hoạt động giống như bộ chọn "id" trong CSS thay vì bộ chọn "lớp", để các tệp QML riêng lẻ không phải biết liệu chúng sẽ được tạo kiểu sau này hay không.

cách tiếp cận hiện tại của tôi làm cho tất cả các tập tin QML trông giống như này (sử dụng cách tiếp cận trong liên kết 2):

Main.qml

Rectangle { 
    Id: background 
    color: g_theme.background.color 
    //g_theme is defined in root context and loaded dynamically 
} 

Những gì tôi muốn làm là:

Main.qml

Rectangle { 
    Id: background 
    color: “green” // default color 
} 

Và sau đó có một file phong cách định nghĩa (hoặc tương tự)

Main.qml #background.color: red 

Đây có phải là có thể vào lúc này, hoặc cái gì đó là trong các đường ống cho một phiên bản Qt trong tương lai, hoặc cách ưa thích của phong cách sẽ tiếp tục là một cái gì đó tương tự như cách tiếp cận được mô tả trong các liên kết ở trên?

Answer 1

Cách ưa thích không áp dụng kiểu trên các thành phần mặc định, nhưng xuất phát từ các thành phần này để tạo thành phần tùy chỉnh được tạo kiểu trước.

Những gì tôi làm cho các dự án của tôi:

Trước tiên, tôi tạo ra một 'chủ đề' tập trung, như một module chia sẻ JavaScript:

// MyTheme.js 
.pragma library; 
var bgColor = "steelblue"; 
var fgColor = "darkred"; 
var lineSize = 2; 
var roundness = 6; 

Tiếp theo, tôi tạo các thành phần tùy chỉnh mà dựa vào nó:

// MyRoundedRect.qml 
import QtQuick 2.0; 
import "MyTheme.js" as Theme; 
Rectangle { 
    color: Theme.bgColor; 
    border { 
     width: Theme.lineSize; 
     color: Theme.fgColor; 
    } 
    radius: Theme.roundness; 
} 

Sau đó, tôi có thể sử dụng phần tiền theo kiểu của tôi ở khắp mọi nơi với một dòng mã:

MyRoundedRect { } 

Và phương pháp này có một lợi thế rất lớn: nó thực sự hướng đối tượng, không đơn giản skinning.

Nếu bạn muốn bạn thậm chí có thể thêm các đối tượng lồng nhau trong thành phần tùy chỉnh của bạn, như văn bản, hình ảnh, bóng, vv ... hoặc thậm chí một số logic UI, như thay đổi màu trên di chuột.

PS: vâng người ta có thể sử dụng đơn QML thay vì mô-đun JS, nhưng nó đòi hỏi thêm qmldir tệp và chỉ được hỗ trợ từ Qt 5.2, có thể giới hạn. Và rõ ràng, một C++ QObject bên trong một thuộc tính ngữ cảnh cũng sẽ hoạt động (ví dụ: nếu bạn muốn tải thuộc tính da từ một tệp trên đĩa ...).

Answer 2

Nó cũng có thể hữu ích để nhìn vào Qt Quick Controls Styles

Khi sử dụng Controls Styles nó không phải là cần thiết để gán một cách rõ ràng mỗi tài sản trong việc kiểm soát mục tiêu. Tất cả các thuộc tính có thể được xác định trong một thành phần riêng biệt [ControlName]Style (ví dụ: ButtonStyle).
Sau đó, trong thành phần đích (ví dụ: Button), bạn chỉ có thể tham chiếu đến thành phần kiểu trong một dòng mã.

Nhược điểm duy nhất ở đây là các thành phần Kiểu chỉ khả dụng cho Điều khiển nhanh Qt. Không cho bất kỳ thành phần Qt nào.