Nova Flow OS
Nova Flow OS
Nova Flow OS
  • Nova Flow en el Dial
  • Qt/QML en imágenes
    • Silica
      • Imágenes High Fidelity
    • MauiKit
      • Imágenes High Fidelity
      • KIO
      • Nepomuk
    • Plasma Components
      • Imágenes High Fidelity
    • QML-Asteroid
    • FishUI
      • Imágenes High Fidelity
    • Lomiri UI Toolkit
      • Imágenes High Fidelity
    • Dtk Declarative
      • Imágenes High Fidelity
    • ControlKit
      • Imágenes High Fidelity
    • QSkinny
      • Imágenes High Fidelity
    • Otros
    • Kirigami
      • Aplicaciones Kirigami con otros estilos
      • Imágenes High Fidelity
      • Estilo Windows 11 para Qt Quick Controls
  • MauiKit
    • Controles
      • ApplicationWindow
      • SettingsDialog
      • InfoDialog
      • InputDialog
      • PopupPage
      • SideBarView
      • TabView
      • AppViews
      • SplitView
      • TabBar
      • ToolBar
      • SelectionBar
      • GridBrowser
      • ListBrowser
      • ListItemTemplate
      • SwipeBrowserDelegate
      • GalleryRolItem
      • CollageItem
      • ToolButtonMenu
      • MenuItemActionRow
      • ToolActions
      • Page
      • FileDialog
      • Badge
      • Holder
      • FloatingButton
      • Chip
      • ColorsRow
      • CloseButton
      • IconItem
      • Notify
      • ShadowedRectangle
      • SearchField
      • Flow
      • Referencia completa: MauiKit
      • Referencia completa: Accounts
      • Referencia completa: Calendar
      • Referencia completa: File Browsing
      • Referencia completa: Image Tools
      • Referencia completa: Terminal
      • Referencia completa: Text Editor
      • Referencia completa: MauiMan
      • Qt Quick Controls
      • Referencia completa: tipos QML
    • Documentación útil
      • Aclaración
      • Links a recursos externos
        • Ejemplos
      • Actuaciones condicionales
      • Colores
      • Anclaje de controles
      • Eventos de respuesta
      • Animaciones
      • Efectos
      • Conectar funcionalidad C++ con la interfaz QML
      • Componentes modelo-delegado o listas y cuadrículas
      • Enviar señales
      • Añada contenido online a su aplicación
      • Compile y empaquete su aplicación
      • Integración con GitHub
  • Guía de programación QML para Qt6
  • KDE Dev Guide
Powered by GitBook
On this page
  • Personalizar etiquetas
  • Personalizar fondo
  • Propiedades
  1. MauiKit
  2. Controles

SettingsDialog

Muestra un diálogo de configuración. Dicho diálogo es añadido al código indicado en ApplicationWindow.

1. Añade el archivo SettingsDialog.qml desde KDevelop > File > New:

// SettingsDialog.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import org.mauikit.controls 1.3 as Maui

Maui.SettingsDialog
{
    Maui.SectionGroup
    {
        title: i18n("Results")
        description: i18n("Configure the editor behaviour.")

        Maui.SectionItem
        {
            label1.text: i18n("Search results")
            label2.text: i18n("Results per page")
            SpinBox {
                from: 5
                to: 50
                value: maxResults

                onValueModified: {
                    maxResults = value
                }
            }
        }

        Maui.SectionItem
        {
            label1.text:  i18n("Editor")
            label2.text: i18n("Enable editor")
            Switch {
            }
        }
    }

    Maui.SectionGroup
    {
        title: i18n("")
        description: i18n("General")

        Maui.SectionItem
        {
            label1.text: i18n("Auto save")
            label2.text: i18n("Auto saves your file every few seconds")
            Switch {
            }
        }
    }
}

2. Añade SettingsDialog.qml al fichero qml.qrc:

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
        <file>SettingsDialog.qml</file>
    </qresource>
</RCC>

3. Añade a main.qml:

import Qt.labs.settings 1.0

// En Maui.ApplicationWindow

property int maxResults: 50

Settings {
    property alias maxResults: root.maxResults
}

SettingsDialog
{
    id: settingsDialog
}

// En headBar.leftContent: Maui.ToolButtonMenu

MenuItem
{
    text: i18n("Settings")
    icon.name: "settings-configure"
    onTriggered: {
        settingsDialog.open()
    }
}

La configuración es almacenada en el archivo:

/home/user/.config/KDE/tuapp.conf

Personalizar etiquetas

Estas son las propiedades de SectionGroup y SectionItem:

Si quiere personalizar SectionGroup o SectionItem:

// En SectionGroup sustituya:
title: i18n("Results")
description: i18n("General")

// por
template.label1.text: i18n("Results")
template.label1.font.weight: Font.Normal
template.label1.font.pixelSize: 20

template.label2.text: i18n("General")
template.label2.font.weight: Font.Normal
// En SectionItem sustituya:
label1.text: i18n("Auto save")
label2.text: i18n("Auto saves your file every few seconds")

// Por:
template.label1.text: i18n("Auto save")
template.label1.font.weight: Font.Normal

template.label2.text: i18n("Auto saves your file every few seconds")
template.label2.font.weight: Font.Normal

Consulte las propiedades de template:

Consulte las propiedades de label. No olvide examinar "lista de todos los miembros", que incluye los miembros heredados:

Personalizar fondo

Aplique su propio fondo estableciendo background y headBar.background:

Maui.SettingsDialog
{
    headBar.background: Maui.ShadowedRectangle {
        anchors.fill: parent

        Maui.Theme.inherit: false
        Maui.Theme.colorSet: Maui.Theme.View

        border.width: 0
        border.color: Qt.lighter("#dadada",1.08)
        shadow.size: 15
        shadow.color: Maui.ColorUtils.brightnessForColor(Maui.Theme.backgroundColor) == Maui.ColorUtils.Light ? Qt.darker("#dadada",1.1) : "#2c2c2c"
        shadow.xOffset: -1
        shadow.yOffset: 0

        color: Maui.Theme.backgroundColor
        corners.topLeftRadius: 6
        corners.topRightRadius: 6
    }

    background: Maui.ShadowedRectangle {
        anchors.fill: parent

        Maui.Theme.inherit: false
        Maui.Theme.colorSet: Maui.Theme.View

        border.width: 0
        border.color: Qt.lighter("#dadada",1.08)
        shadow.size: 15
        shadow.color: Maui.ColorUtils.brightnessForColor(Maui.Theme.backgroundColor) == Maui.ColorUtils.Light ? Qt.darker("#dadada",1.1) : "#2c2c2c"
        shadow.xOffset: -1
        shadow.yOffset: 0

        color: Maui.Theme.backgroundColor
        corners.topLeftRadius: 6
        corners.topRightRadius: 6
        corners.bottomLeftRadius: 6
        corners.bottomRightRadius: 6
    }
}

Propiedades

PreviousApplicationWindowNextInfoDialog

Last updated 1 year ago

MauiKit Controls - SectionGroup Class Reference
Logo
MauiKit Controls - SectionItem Class Reference
Logo
MauiKit Controls - ListItemTemplate Class Reference
Label QML Type | Qt Quick Controls 5.15.16
Logo
MauiKit Controls - SettingsDialog Class Reference
Logo
Logo