Tôi đang phát triển một ứng dụng qml và tôi muốn đặt các biểu tượng trên các nút. Tôi muốn sử dụng các biểu tượng tiêu chuẩn của Ubuntu để có giao diện ubfox thực cho ứng dụng của mình. Tôi có thể làm cái này như thế nào?
Tôi đang phát triển một ứng dụng qml và tôi muốn đặt các biểu tượng trên các nút. Tôi muốn sử dụng các biểu tượng tiêu chuẩn của Ubuntu để có giao diện ubfox thực cho ứng dụng của mình. Tôi có thể làm cái này như thế nào?
Câu trả lời:
Chủ đề biểu tượng chính thức của Ubuntu Touch được gọi là Ubuntu Mobile và có sẵn để cài đặt trong ubuntu-mobile-icons
gói. Dưới đây là một mẫu các biểu tượng được cung cấp:
Để sử dụng các biểu tượng trong mã của bạn, chỉ cần sử dụng đường dẫn đến biểu tượng. Ví dụ: để đặt biểu tượng trong nút thanh công cụ, hãy thực hiện thao tác tương tự như sau:
ToolbarButton {
text: i18n.tr("Refresh")
iconSource: Qt.resolvedUrl("/usr/share/icons/ubuntu-mobile/actions/scalable/reload.svg")
}
Để tránh phải lặp đi lặp lại đường dẫn gốc nhiều lần, tôi thường sử dụng một hàm nhỏ gọi là getIcon
đường dẫn trả về đường dẫn thực tế cho một biểu tượng:
function getIcon(name) {
return Qt.resolvedUrl("/usr/share/icons/ubuntu-mobile/actions/scalable/" + name + ".svg")
}
Ví dụ trước đó sẽ là:
ToolbarButton {
text: i18n.tr("Refresh")
iconSource: getIcon("reload")
}
Tôi mới chỉ bắt đầu học hỏi về QML, nhưng có vẻ như SDK Ubuntu cung cấp một cách để truy cập các biểu tượng từ chủ đề, thành phần Biểu tượng. Đây là một ví dụ Hello Worldish:
import QtQuick 2.0
import Ubuntu.Components 0.1
MainView {
id: root
objectName: "mainView"
width: units.gu(50)
height: units.gu(75)
property real margins: units.gu(2)
property real buttonWidth: units.gu(9)
Page {
title: i18n.tr("Icons!")
Column {
anchors {
fill: parent
margins: root.margins
}
spacing: units.gu(1)
Icon {
name: "call-start"
width: 48
height: 48
}
Icon {
name: "call-stop"
width: 48
height: 48
}
Icon {
name: "find"
width: 48
height: 48
}
}
}
}
Điều này mang lại cho bạn:
AFAICT, điều này dường như không thực sự hỗ trợ toàn bộ các biểu tượng được cung cấp bởi Đặc tả chủ đề biểu tượng Freedesktop mặc dù .....
Chủ đề mặc định cho Ubuntu di động là Suru và các biểu tượng được đặt trong /usr/share/icons/suru
Bất kỳ biểu tượng có thể được sử dụng theo tên. Ngay cả các biểu tượng bên ngoài bộ biểu tượng Suru.
Nếu tập tin là /usr/share/icons/suru/actions/scalable/like.svg
Mã có thể là:
Action {
id: likeAction
iconName: "like" // the files name without file ending
text: "I like this"
}
Cung cấp cho bạn một nút hành động với một biểu tượng trái tim.