QSplitter muestra un divisor o un margen entre los dos widgets

Question

Tengo un QSplitter y dos widgets en cada lado, pero quiero poder tener un margen, para que haya una transición clara entre los dos widgets. Busqué en QSplitter y QSplitterHandle pero no veo ninguna forma explícita de hacerlo.

¿Cómo agrego un divisor entre los dos widgets?

Answer 1

Las hojas de estilo son un mecanismo poderoso para cambiar la apariencia de cualquier widget en Qt.

Consulte here para obtener un tutorial rápido, y here para obtener una guía de referencia. Las hojas de estilo se pueden asignar usando un editor en el Diseñador, o pasarlas como una cadena usando setStylesheet (QString). Ciertamente es más fácil usar el Diseñador porque entonces puedes ver cómo se verá tu widget antes de ejecutarlo.

Ahora, para su problema específico. Un QSplitter es esencialmente un QFrame. Pero también incluye un mango, como sabes. Por lo general, eso es lo que generalmente se llama estilo.

Así, por ejemplo, usted puede hacer esto:

QSplitter::handle { 
     image: url(:/images/splitter.png); 
    } 

que proporciona una imagen de la manija divisor. Esto es un poco similar a lo que se hace en Motif, donde siempre hay un pequeño asa rectangular que el usuario puede hacer clic para mover el divisor.

Con un poco de experimentación puede crear una línea de separación fresca para su mango.

QSplitter::handle { 
    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, 
stop:0 rgba(255, 255, 255, 0), 
stop:0.407273 rgba(200, 200, 200, 255), 
stop:0.4825 rgba(101, 104, 113, 235), 
stop:0.6 rgba(255, 255, 255, 0)); 
    image: url(:/images/splitter.png); 
    } 

O algo más como esto.

QSplitter::handle:horizontal { 
background: qlineargradient(x1:0, y1:0, x2:1, y2:1, 
    stop:0 #eee, stop:1 #ccc); 
border: 1px solid #777; 
width: 13px; 
margin-top: 2px; 
margin-bottom: 2px; 
border-radius: 4px; 
} 

Para este último, que específicamente sólo anulan el divisor horizontal, debido a algunas de las propiedades - como margen-parte superior e inferior, y la anchura que tendría que ser diferente si estábamos cambiando el divisor vertical.

Espero que esto ayude. Una vez que empiezas a jugar con hojas de estilo, la diversión realmente comienza.

Answer 2

El QSplitter tiene una propiedad handleWidth que puede establecer.

Answer 3

Sin entrar en todos los detalles morbosos de las hojas de estilo Te puedo dar un par de opciones:

1) Es posible diseño de un par de QFrames en su divisor, darles diseños y poner sus widgets en el interior de esos cuadros. Puede usar las opciones de espaciado de los diseños (consulte QLayout :: setContentsMargin()) para agregar espacio entre sus widgets.

2) La forma de hoja de estilo (y, en mi opinión, superior) es configurar algunas hojas de estilo para sus widgets. Durante un breve ejemplo, usted puede hacer algo como esto en sus widgets que son en su divisor:

widget->setStyleSheet("margin-left: 10px") 

Si estás haciendo cualquier tipo de diseño de interfaz gráfica de usuario con Qt, le recomiendo que aprenda todo acerca de las hojas de estilo, que eres tu amigo Vea the Qt style sheets reference para cierta documentación.