Barra desplazamiento


([N3] GSI) #1

Tenemos desarrolladas varias App para Tablet y nos encontramos el problema de que las barra de desplazamiento vertical es demasiado estrecha para moverla con el dedo, alguien sabe como gestionar el ancho de las barras en las rejillas. Gracias.


([N3] NexusFireMan) #2

Buenos días,

Para estos menesteres tienes 2 opciones:

  1. Usar CSS para cambiar el aspecto de la barra y ademas la rejilla.
  2. Crear las listas en QML con las formas que te gusten.

Animo y suerte.


([N3] GSI) #3

Se trata solo de las barras, se algo de CSS pero no lo suficiente, se agradeciera un ejemplo.


([N3] NexusFireMan) #4

Buenos días,

Perdona la tardanza pero he estado un poco liado, empecemos con unos ejemplos:

/* - - - - - - - - - - - - - - - - SCROLL VERTICAL Y HORIZONTAL- - - - - - - - - - - - - - - - - - - - - */

QScrollBar:vertical {
 background: #FFF;
 border: 1px solid #CECECE;
 width: 15px;
 margin: 20px 0 20px 0;
}
QScrollBar:horizontal {
 background: #FFF;
 border: 1px solid #CECECE;
 width: 15px;
 margin: 0px 20px 0px 20px;
}
QScrollBar::handle:vertical, QScrollBar::handle:horizontal {
 background: #CECECE;
 border: 1px solid #CECECE;
 min-height: 20px;
}
QScrollBar::handle:hover {
 background: #727272;
 border: 1px solid #727272;
}
QScrollBar::add-line:vertical {
 border: 1px solid #CECECE;
 background: #CECECE;
 height: 20px;
 subcontrol-position: bottom;
 subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal {
 border: 1px solid #CECECE;
 background: #CECECE;
 width: 20px;
 subcontrol-position: right;
 subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
 border: 1px solid #CECECE;
 background: #CECECE;
 height: 20px;
 subcontrol-position: top;
 subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
 border: 1px solid #CECECE;
 background: #CECECE;
 width: 20px;
 subcontrol-position: left;
 subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
 width: 5px;
 height: 3px;
 background: #FFF;
}
QScrollBar::up-arrow:vertical:hover, QScrollBar::down-arrow:vertical:hover {
 background-color: #727272;
}
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
 width: 3px;
 height: 5px;
 background: #FFF;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical, QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
 background: none;
}

También puedes probar con estos:

/* - - - - - - - - - - - - - - - - REJILLA- - - - - - - - - - - - - - - - - - - - - */

QTableView {
 selection-background-color: #A6C7EE;
 selection-color: #000;
 column-background-color: #FFF;
 column-color: #757575;
 alternate-background-color: #EEEEEE;
 padding: 5px;
 border-width: 1px;
 border-style: solid;
 border-color: #CECECE;
 background: #FFF;
}
QTableView:focus {
 border-width: 2px;
 border-style: solid;
 border-color: #A7C6EE;
}
QTableView QHeaderView::section:horizontal{
 border-style: none;
 font-weight: bold;
 border:1px solid #FFFFFF;
 border-bottom:1px solid #CECECE;
 padding: 3px;
 margin-top:2px;
 min-height: 18px;
 color: #000;
 background: #FFFFFF;
}
QTableView QTableCornerButton::section {
 background: #FFF;
 border: 0px;
}
QHeaderView::section:active{
 background:  #FFF;
}
QHeaderView::down-arrow{
 margin:0;
 padding:2px 0 0 0;
}
QHeaderView::up-arrow{
 margin:0;
 padding:2px 0 0 0 ;
}
QTableView::item {
 color:transparent;
}
/* PIE DE REJILLA */
VCFootView {
 min-height:20px;
 background: #FFFFFF;
 border:1px solid #FFFFFF;
}
VCFootView::section:active {
 border-right: 1px solid #FFFFFF;
 margin-right:2px;
 border-top:1px solid #CECECE;
 padding:5px 2px 2px 2px;
 font-weight: bold;
}
VCFootView::section:!active {
 background: #FFFFFF;
 border-right: 1px solid #FFFFFF;
 margin-right:2px;
 border-top:1px solid #CECECE;
 padding:5px 2px 2px 2px;
 font-weight: bold;
}

Están sacados de ejemplos de Velneo, pero se pueden personalizar dependiendo de lo que necesites.

Así mismo para las etiquetas de los controles se usan las de QT, solo tienes que ir a la web oficial y mirar los StyleSheet.