59 lines
41 KiB
HTML
59 lines
41 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
<script type="text/javascript">/*<![CDATA[*/window.__chunkMapping={"main":["/main.f66713773e9ba37b90fe.css","/main.7a48394ebc7e47422c98.js"],"component---site-src-pages-index-jsc-4-f-f99":["/component---site-src-pages-index-jsc-4-f-f99.71bf8f44fd9ac59b6a50.css","/component---site-src-pages-index-jsc-4-f-f99.505b05deaa8813d82ea6.js"],"component---theme-blog-post-pageccc-cab":["/component---theme-blog-post-pageccc-cab.eaf730b8c654a212f785.js"],"content---blog-welcome-286-e55":["/content---blog-welcome-286-e55.76c213cf9ce75984ae91.js"],"metadata---blog-welcome-27-a-91f":["/metadata---blog-welcome-27-a-91f.ef07fafa6070c2acef91.js"],"component---theme-blog-list-pagea-6-a-7ba":["/component---theme-blog-list-pagea-6-a-7ba.697ec326a8cebf60b287.js"],"content---blogaf-1-856":["/content---blogaf-1-856.f79900332b57f969c09a.js"],"metadata---blog-83-c-2b0":["/metadata---blog-83-c-2b0.46c7be8f307d8da2c120.js"],"component---theme-doc-legacy-page-9-e-7-ca5":["/component---theme-doc-legacy-page-9-e-7-ca5.3c38a2f40a51efdd72a0.css","/component---theme-doc-legacy-page-9-e-7-ca5.d31182005d6c21dd63ac.js"],"docsMetadata---docs-150-2d6":["/docsMetadata---docs-150-2d6.050a67cf2c62a9aa0583.js"],"component---theme-doc-legacy-item-031-769":["/component---theme-doc-legacy-item-031-769.1f1ce10374de019f5d3a.css","/component---theme-doc-legacy-item-031-769.6e8a6ea08d218712d94a.js"],"content---docs-doc-1-b-2-f-e80":["/content---docs-doc-1-b-2-f-e80.b11e6221286a094dd836.js"],"metadata---docs-doc-12-a-3-5a1":["/metadata---docs-doc-12-a-3-5a1.bb87820e31f222c12801.js"],"content---docs-faq-048-db5":["/content---docs-faq-048-db5.a3f7755c1443136d038e.js"],"metadata---docs-faq-59-d-2b9":["/metadata---docs-faq-59-d-2b9.985713e75ca070fdde14.js"],"content---docs-mdxce-3-7d1":["/content---docs-mdxce-3-7d1.36f8da190939bb0f0b99.js"],"metadata---docs-mdx-786-f56":["/metadata---docs-mdx-786-f56.6c0450d5f4f4bf4b0f24.js"],"content---docs-api-component-4-ef-195":["/content---docs-api-component-4-ef-195.1ebedb4f37e2304eb832.js"],"metadata---docs-api-component-3-e-5-43d":["/metadata---docs-api-component-3-e-5-43d.0893689f20edabdccdd1.js"],"content---docs-api-node-widget-080-a39":["/content---docs-api-node-widget-080-a39.f21482facb1d1599ab0d.js"],"metadata---docs-api-node-widgeta-92-a4f":["/metadata---docs-api-node-widgeta-92-a4f.4e8e4c2fcd8d294d5d33.js"],"content---docs-api-event-widgetac-6-11b":["/content---docs-api-event-widgetac-6-11b.a5cf10d898002591a15a.js"],"metadata---docs-api-event-widget-39-a-9ea":["/metadata---docs-api-event-widget-39-a-9ea.3ad7032e5b20d9cd659e.js"],"content---docs-api-flex-layout-3-dc-a16":["/content---docs-api-flex-layout-3-dc-a16.315f47480f7da4c659d5.js"],"metadata---docs-api-flex-layoutecf-540":["/metadata---docs-api-flex-layoutecf-540.51456ecddd02966bba3f.js"],"content---docs-api-q-abstract-scroll-area-3-e-6-d7f":["/content---docs-api-q-abstract-scroll-area-3-e-6-d7f.a166f0f57747870e0ec4.js"],"metadata---docs-api-q-abstract-scroll-area-59-d-279":["/metadata---docs-api-q-abstract-scroll-area-59-d-279.830987a049e659e13eb5.js"],"content---docs-api-q-applicationd-3-e-0a3":["/content---docs-api-q-applicationd-3-e-0a3.6fa95396d7fbee9da501.js"],"metadata---docs-api-q-applicationc-1-d-8a4":["/metadata---docs-api-q-applicationc-1-d-8a4.7e8fedb5dc575b7eb1e4.js"],"content---docs-api-node-layoutd-28-11a":["/content---docs-api-node-layoutd-28-11a.0dace98927a219b41b44.js"],"metadata---docs-api-node-layout-1-e-9-c15":["/metadata---docs-api-node-layout-1-e-9-c15.ceab155a191e8fd6b3f8.js"],"content---docs-api-q-clipboard-69-d-2ef":["/content---docs-api-q-clipboard-69-d-2ef.189654ea9b37adaada9b.js"],"metadata---docs-api-q-clipboard-486-b21":["/metadata---docs-api-q-clipboard-486-b21.541daebe97727e2fe521.js"],"content---docs-api-q-cursor-362-d51":["/content---docs-api-q-cursor-362-d51.7f14f85b8c20c1f5cbf5.js"],"metadata---docs-api-q-cursor-887-11e":["/metadata---docs-api-q-cursor-887-11e.2565c6f4292aaac41bc4.js"],"content---docs-api-q-abstract-slider-3-e-0-54d":["/content---docs-api-q-abstract-slider-3-e-0-54d.1a794a8d8e995ff3f3bc.js"],"metadata---docs-api-q-abstract-sliderdfa-ab7":["/metadata---docs-api-q-abstract-sliderdfa-ab7.a0fe110c4922ec9b163b.js"],"content---docs-api-q-dial-80-b-99a":["/content---docs-api-q-dial-80-b-99a.27cba315ea3b12bad153.js"],"metadata---docs-api-q-dialbfb-aef":["/metadata---docs-api-q-dialbfb-aef.1833a299cf00db0c1dd6.js"],"content---docs-api-q-check-boxd-9-b-c95":["/content---docs-api-q-check-boxd-9-b-c95.ecff488106003dd95b58.js"],"metadata---docs-api-q-check-box-132-293":["/metadata---docs-api-q-check-box-132-293.2bcffc7e89579f4aa0b8.js"],"content---docs-api-q-grid-layouta-4-e-552":["/content---docs-api-q-grid-layouta-4-e-552.f8384f91986e144a1e06.js"],"metadata---docs-api-q-grid-layout-7-db-030":["/metadata---docs-api-q-grid-layout-7-db-030.f3764e551a2bc1cf18a8.js"],"content---docs-api-q-label-2-f-9-04b":["/content---docs-api-q-label-2-f-9-04b.1cdeec52a70db8ef7cc7.js"],"metadata---docs-api-q-label-165-210":["/metadata---docs-api-q-label-165-210.945d42961dfc88295677.js"],"content---docs-api-q-icone-5-f-b0d":["/content---docs-api-q-icone-5-f-b0d.adda17d3830828da9941.js"],"metadata---docs-api-q-icone-6-d-093":["/metadata---docs-api-q-icone-6-d-093.ed4791cba37b43cdef97.js"],"content---docs-api-q-pixmap-8-dd-cb2":["/content---docs-api-q-pixmap-8-dd-cb2.3d67d264575cf7bec65c.js"],"metadata---docs-api-q-pixmapfdf-820":["/metadata---docs-api-q-pixmapfdf-820.f23b49133b8588f3daec.js"],"content---docs-api-q-line-editea-0-53d":["/content---docs-api-q-line-editea-0-53d.fc2fdf237ea0256a9bc8.js"],"metadata---docs-api-q-line-edit-13-f-b8a":["/metadata---docs-api-q-line-edit-13-f-b8a.fca0ca35e830f02efb9d.js"],"content---docs-api-q-progress-barc-46-afe":["/content---docs-api-q-progress-barc-46-afe.9cecbb65c33965b0e7f5.js"],"metadata---docs-api-q-progress-bar-43-d-07e":["/metadata---docs-api-q-progress-bar-43-d-07e.08ee1613bacad45a5510.js"],"content---docs-api-q-plain-text-edit-7-c-8-081":["/content---docs-api-q-plain-text-edit-7-c-8-081.f6a618e75ea9b4f15f6b.js"],"metadata---docs-api-q-plain-text-edit-161-ecc":["/metadata---docs-api-q-plain-text-edit-161-ecc.e89eb96f17b29e76629e.js"],"content---docs-api-q-radio-buttone-54-746":["/content---docs-api-q-radio-buttone-54-746.c46ca58051e6e9f427b9.js"],"metadata---docs-api-q-radio-button-367-f7c":["/metadata---docs-api-q-radio-button-367-f7c.e2815cee23af3e7e2c18.js"],"content---docs-api-q-scroll-area-8-c-4-3fd":["/content---docs-api-q-scroll-area-8-c-4-3fd.fd2d29a876286d824831.js"],"metadata---docs-api-q-scroll-area-46-a-96e":["/metadata---docs-api-q-scroll-area-46-a-96e.4a0fe78cc1b07f72fe78.js"],"content---docs-api-q-main-window-0-e-7-299":["/content---docs-api-q-main-window-0-e-7-299.b20554db200b1aa6187b.js"],"metadata---docs-api-q-main-window-04-f-efb":["/metadata---docs-api-q-main-window-04-f-efb.809594a718b59ff458c2.js"],"content---docs-api-q-spin-box-1-ce-bfd":["/content---docs-api-q-spin-box-1-ce-bfd.d62b3746ba69df91f4e1.js"],"metadata---docs-api-q-spin-box-809-ae0":["/metadata---docs-api-q-spin-box-809-ae0.055050a90b41e50bfa5a.js"],"content---docs-api-q-push-button-06-c-73e":["/content---docs-api-q-push-button-06-c-73e.18589cda96f10dc9259f.js"],"metadata---docs-api-q-push-button-96-d-c92":["/metadata---docs-api-q-push-button-96-d-c92.41704120c43af310af19.js"],"content---docs-api-q-tab-widget-508-95e":["/content---docs-api-q-tab-widget-508-95e.b35876b3da49da08bcb5.js"],"metadata---docs-api-q-tab-widgetebc-5aa":["/metadata---docs-api-q-tab-widgetebc-5aa.558f01cb9860e9184f4f.js"],"content---docs-api-qt-enumsfd-7-cf3":["/content---docs-api-qt-enumsfd-7-cf3.0f709b0fb9cdc99aa034.js"],"metadata---docs-api-qt-enums-423-cf9":["/metadata---docs-api-qt-enums-423-cf9.0270a53b7868fcd4cd97.js"],"content---docs-api-yoga-widgeta-42-cc7":["/content---docs-api-yoga-widgeta-42-cc7.700c0279e1a09c33064e.js"],"metadata---docs-api-yoga-widget-95-c-f8b":["/metadata---docs-api-yoga-widget-95-c-f8b.525eb323f1249d3f9ae6.js"],"content---docs-api-q-widget-04-a-59f":["/content---docs-api-q-widget-04-a-59f.64a7421274fdc2d19599.js"],"metadata---docs-api-q-widget-287-e6c":["/metadata---docs-api-q-widget-287-e6c.7f4508b8aa6a625ea9c9.js"],"content---docs-api-process-5-ec-b1e":["/content---docs-api-process-5-ec-b1e.81baa4658f7e9a835392.js"],"metadata---docs-api-process-32-d-09e":["/metadata---docs-api-process-32-d-09e.9dd820231565148c88a2.js"],"content---docs-api-synopsis-7-bb-e1c":["/content---docs-api-synopsis-7-bb-e1c.2cede4e9cd42a20dcab1.js"],"metadata---docs-api-synopsis-21-f-a62":["/metadata---docs-api-synopsis-21-f-a62.a376081207def93aa340.js"],"content---docs-development-readme-149-437":["/content---docs-development-readme-149-437.115b92599d48666d0070.js"],"metadata---docs-development-readm-ec-6-c-332":["/metadata---docs-development-readm-ec-6-c-332.49158ed40eba176b8d72.js"],"content---docs-development-setting-up-28-c-666":["/content---docs-development-setting-up-28-c-666.7f499704e941e164e2f8.js"],"metadata---docs-development-setting-up-979-75f":["/metadata---docs-development-setting-up-979-75f.208e7e24443dbc777f36.js"],"content---docs-development-getting-started-139-387":["/content---docs-development-getting-started-139-387.861ce8c24b970f99c241.js"],"metadata---docs-development-getting-started-89-b-c7a":["/metadata---docs-development-getting-started-89-b-c7a.84e0a166655b36efc010.js"],"content---docs-development-debuggingb-54-9ed":["/content---docs-development-debuggingb-54-9ed.373640edebafbcf8aeb7.js"],"metadata---docs-development-debuggingc-36-26a":["/metadata---docs-development-debuggingc-36-26a.155c6553de08c9ea3273.js"],"content---docs-development-signal-and-event-handling-7-d-4-f3f":["/content---docs-development-signal-and-event-handling-7-d-4-f3f.7fe7b32c2a017187656e.js"],"metadata---docs-development-signal-and-event-handling-0-b-5-692":["/metadata---docs-development-signal-and-event-handling-0-b-5-692.55ae9e21c216869373d9.js"],"content---docs-development-common-errorsf-15-a5b":["/content---docs-development-common-errorsf-15-a5b.7c3d3a75915f21303100.js"],"metadata---docs-development-common-errors-402-ef4":["/metadata---docs-development-common-errors-402-ef4.6ddd37623148595ab0b3.js"],"content---docs-guides-debugging-in-vscodebd-7-cec":["/content---docs-guides-debugging-in-vscodebd-7-cec.d799d1baeab3224d227d.js"],"metadata---docs-guides-debugging-in-vscodebf-8-5b0":["/metadata---docs-guides-debugging-in-vscodebf-8-5b0.b2a95b4e9c9da3fbb308.js"],"content---docs-development-styling-293-cad":["/content---docs-development-styling-293-cad.57e29364f10ab314cd95.js"],"metadata---docs-development-styling-1-c-2-0d6":["/metadata---docs-development-styling-1-c-2-0d6.cf646f298080dd60416c.js"],"content---docs-development-wrapping-widgets-84-b-538":["/content---docs-development-wrapping-widgets-84-b-538.9af215364af775c2b0eb.js"],"metadata---docs-development-wrapping-widgets-303-fb8":["/metadata---docs-development-wrapping-widgets-303-fb8.5e7e3a338110292682bd.js"],"content---docs-guides-getting-startedc-9-e-20f":["/content---docs-guides-getting-startedc-9-e-20f.6269380e01c70ace49d2.js"],"metadata---docs-guides-getting-started-2-b-7-1a4":["/metadata---docs-guides-getting-started-2-b-7-1a4.0aedf083610e316d1470.js"],"content---docs-guides-custom-nodegui-native-plugin-632-9db":["/content---docs-guides-custom-nodegui-native-plugin-632-9db.0fa0bcc582ed28185441.js"],"metadata---docs-guides-custom-nodegui-native-plugin-92-b-12f":["/metadata---docs-guides-custom-nodegui-native-plugin-92-b-12f.62211867bef7e4d21f3b.js"],"content---docs-guides-images-991-065":["/content---docs-guides-images-991-065.03db921dafc991a62e06.js"],"metadata---docs-guides-images-915-5ee":["/metadata---docs-guides-images-915-5ee.10ba1ee39e0b960585b2.js"],"content---docs-guides-debuggingf-3-f-cf5":["/content---docs-guides-debuggingf-3-f-cf5.17fd90b10558819cfd2c.js"],"metadata---docs-guides-debugging-970-fb8":["/metadata---docs-guides-debugging-970-fb8.15de673c97f148cf7fdb.js"],"content---docs-guides-handle-events-160-4b0":["/content---docs-guides-handle-events-160-4b0.ab24a11d869da8e962ad.js"],"metadata---docs-guides-handle-events-5-eb-540":["/metadata---docs-guides-handle-events-5-eb-540.1892b7b22980fc96357e.js"],"content---docs-guides-scroll-view-76-e-87c":["/content---docs-guides-scroll-view-76-e-87c.53cea080302f9bac3ecf.js"],"metadata---docs-guides-scroll-view-9-a-9-2ac":["/metadata---docs-guides-scroll-view-9-a-9-2ac.931ff1d4cdaec943a9e3.js"],"content---docs-guides-stylingfec-977":["/content---docs-guides-stylingfec-977.abdc3277928e484ba13d.js"],"metadata---docs-guides-styling-9-ea-213":["/metadata---docs-guides-styling-9-ea-213.aed0dbfc3f7bae90bf3d.js"],"content---docs-guides-tutoriale-53-6ab":["/content---docs-guides-tutoriale-53-6ab.fdd707e116c3ba754ce0.js"],"metadata---docs-guides-tutorial-1-f-1-23b":["/metadata---docs-guides-tutorial-1-f-1-23b.2ae8509926cea9815368.js"],"content---docs-guides-using-native-node-modules-3-ab-104":["/content---docs-guides-using-native-node-modules-3-ab-104.b133066cc00c3c88720f.js"],"metadata---docs-guides-using-native-node-modules-31-f-551":["/metadata---docs-guides-using-native-node-modules-31-f-551.4f0e3fec075ffe7b94ed.js"],"content---docs-guides-networking-374-03e":["/content---docs-guides-networking-374-03e.623d4b8cadf85b6d5cd8.js"],"metadata---docs-guides-networkingdfd-ce0":["/metadata---docs-guides-networkingdfd-ce0.e38d2bac3793e1a62e11.js"],"content---docs-guides-layoutdf-5-a64":["/content---docs-guides-layoutdf-5-a64.63d6b1efae1bc7129dfc.js"],"metadata---docs-guides-layoutf-65-d7d":["/metadata---docs-guides-layoutf-65-d7d.e307dcf56dcf4385338a.js"],"content---docs-guides-nodegui-architecture-262-19e":["/content---docs-guides-nodegui-architecture-262-19e.8b39872b2c36c2047291.js"],"metadata---docs-guides-nodegui-architecture-550-b82":["/metadata---docs-guides-nodegui-architecture-550-b82.7ea088d08ebcc99cbe05.js"],"component---theme-blog-tags-posts-page-687-b6c":["/component---theme-blog-tags-posts-page-687-b6c.7cbecfb8c53ab9b2f9ba.js"],"metadata---blog-tags-nodegui-632-d46":["/metadata---blog-tags-nodegui-632-d46.73df93301c6a1152b2fe.js"],"metadata---blog-tags-hellob-02-3e8":["/metadata---blog-tags-hellob-02-3e8.cdf356c9ee24382e453e.js"],"component---theme-blog-tags-list-page-01-a-d0b":["/component---theme-blog-tags-list-page-01-a-d0b.f9af53c8c6b12587c378.js"],"tags---blog-tags-8-d-7-36d":["/tags---blog-tags-8-d-7-36d.1243f2728e886299c73e.js"]};/*]]>*/</script>
|
|
|
|
<title data-react-helmet="true">styling</title>
|
|
|
|
<meta data-react-helmet="true" charset="utf-8"/><meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"/><meta data-react-helmet="true" name="viewport" content="width=device-width"/><meta data-react-helmet="true" property="og:title" content="styling"/><meta data-react-helmet="true" name="description" content="# How styling works?"/><meta data-react-helmet="true" property="og:description" content="# How styling works?"/><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/development/styling"/><meta data-react-helmet="true" name="twitter:card" content="summary"/>
|
|
|
|
<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"/>
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/main.f66713773e9ba37b90fe.css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/1.196ce05925ea6d776920.css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/2.702de9bbb01fe4f46fa1.css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/component---theme-doc-legacy-page-9-e-7-ca5.3c38a2f40a51efdd72a0.css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/component---theme-doc-legacy-item-031-769.1f1ce10374de019f5d3a.css" />
|
|
|
|
</head>
|
|
<body >
|
|
<div id="__docusaurus">
|
|
<nav class="navbar navbar--light navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a aria-current="page" class="navbar__brand active" href="/"><img class="navbar__logo" src="/img/logo-circle.png" alt="NodeGui Logo"/><strong>NodeGui</strong></a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" label="Docs" position="right" href="/docs/guides/getting-started">Docs</a><a class="navbar__item navbar__link" label="API" position="right" href="/docs/api/QApplication">API</a><a class="navbar__item navbar__link" label="Blog" position="right" href="/blog">Blog</a><a class="navbar__item navbar__link" href="https://github.com/nodegui/nodegui" label="GitHub" position="right" target="_blank" rel="noopener noreferrer">GitHub</a><div class="react-toggle displayOnlyInLargeViewport_1gtM"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_16vC moon_1N64"></span></div><div class="react-toggle-track-x"><span class="toggle_16vC sun_3CZP"></span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"/></div></div></div><div role="presentation" class="navbar__sidebar__backdrop"></div><div class="navbar__sidebar"><div class="navbar__sidebar__brand"><a aria-current="page" class="navbar__brand active" href="/"><img class="navbar__logo" src="/img/logo-circle.png" alt="NodeGui Logo"/><strong>NodeGui</strong></a></div><div class="navbar__sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" label="Docs" position="right" href="/docs/guides/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" label="API" position="right" href="/docs/api/QApplication">API</a></li><li class="menu__list-item"><a class="menu__link" label="Blog" position="right" href="/blog">Blog</a></li><li class="menu__list-item"><a class="menu__link" href="https://github.com/nodegui/nodegui" label="GitHub" position="right" target="_blank" rel="noopener noreferrer">GitHub</a></li></ul></div></div></div></nav><div class="container container--fluid"><div class="row"><div class="col col--3"></div><main class="col"><div><div class="padding-vert--lg"><div class="row"><div class="col"><div class="docItemContainer_3Gws"><header><h1 class="margin-bottom--lg">styling</h1></header><article><div class="markdown"><h1><a aria-hidden="true" class="anchor" id="how-styling-works"></a><a aria-hidden="true" class="hash-link" href="#how-styling-works">#</a>How styling works?</h1><p>There are two parts to styling.</p><ol><li>Layout</li><li>Painting : Colors, text color, etc</li></ol><h2><a aria-hidden="true" class="anchor" id="painting"></a><a aria-hidden="true" class="hash-link" href="#painting">#</a>Painting</h2><p>The regular styles such as text color, font-size, font weight etc are achieved using Qt's stylesheet.
|
|
We just call Qt's setStyleSheet method on the native widget and pass in the styles as a string.</p><p>This method is implemented as part of <code>QWIDGET_WRAPPED_METHODS_DECLARATION</code> in <code>qwidget_macro.h</code>.
|
|
So all widgets using this macro will get the setStyleSheet method.</p><h2><a aria-hidden="true" class="anchor" id="layout"></a><a aria-hidden="true" class="hash-link" href="#layout">#</a>Layout</h2><p>Layouting is basically positioning widgets on the screen. It takes into account everything from margins, paddings, positions etc. Our main focus will be Flex layouting. For flex layout we are using yoga library from facebook. This is the same library used by React Native. Before looking at flaxlayout in this libarary I recommend browsing Yoga's C API doc here: <code>deps/yoga/doc.md</code></p><p>In case <code>nodegui</code>. I have implemented a custom Qt layout by extending <code>QLayout</code>, hence Qt is able to take over automagically when window is resized or any other layouting event occurs.
|
|
You can find the implementation at <code>src/cpp/core/FlexLayout/flexlayout.h</code>.</p><p>The c++ api provided by this custom layout looks like this:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-cpp codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// FlexLayout is a custom Layout built for QT. This layout will be used to layout qt widgets using facebook's yoga library.</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// Thus giving ability to layout Qt Widgets using Flexbox.</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// Usage:</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> QWidget </span><span class="token operator" style="color:rgb(127, 219, 202)">*</span><span class="token plain">container </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">QWidget</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> YGNodeRef root </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">YGNodeNew</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> YGNodeRef child1 </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">YGNodeNew</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> YGNodeRef child2 </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">YGNodeNew</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> FlexLayout </span><span class="token operator" style="color:rgb(127, 219, 202)">*</span><span class="token plain"> flayout </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">FlexLayout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">container</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain">root</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// or FlexLayout * flayout = new FlexLayout(container);</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// or FlexLayout *flayout = new FlexLayout();</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> flayout</span><span class="token operator" style="color:rgb(127, 219, 202)">-></span><span class="token function" style="color:rgb(130, 170, 255)">addWidget</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">btn1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> child1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> flayout</span><span class="token operator" style="color:rgb(127, 219, 202)">-></span><span class="token function" style="color:rgb(130, 170, 255)">addWidget</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">btn2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> child2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>This layout is exported to Javascript side via <code>src/cpp/core/FlexLayout/flexlayout_wrap.h</code></p><p>The JS Api looks like this:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-js codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> view </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">QWidget</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">rootView</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> flayout </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">FlexLayout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// Create layout</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">flayout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">setFlexNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">view</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">getFlexNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// Set widget's flex as layout's flex node.</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">view</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">setLayout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">flayout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// set layout as view's layout</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> label </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">QLabel</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">view</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">label</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">setText</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">"Hello12321"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> label2 </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">QLabel</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">view</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">label2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">setText</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">"SECOND LABEL"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">flayout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">addWidget</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">getFlexNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// Add child to layout</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">flayout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">addWidget</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">getFlexNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// Add child to layout</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><h3><a aria-hidden="true" class="anchor" id="implementation"></a><a aria-hidden="true" class="hash-link" href="#implementation">#</a>Implementation</h3><ol><li><p>Every widget that wants to use flex layout should extend from <code>flexItem</code> found at <code>src/cpp/core/FlexLayout/flexitem.h</code>.
|
|
For example, see <code>nlabel.h</code> at <code>src/cpp/QtWidgets/QLabel/nlabel.h</code></p><p>NLabel inherits from <code>NodeWidget</code> which inherits from <code>YogaWidget</code> which inturn inherits from <code>FlexItem</code></p><ul><li><code>FlexItem</code> adds a YogaNode to every widget.</li><li><code>YogaWidget</code> adds Yoga specific q-properties to the widget, which is useful to assign yoga properties via qstylesheet. More on this below.</li><li><code>NodeWidget</code> adds layout support via <code>YogaWidget</code> and event handling support via <code>EventWidget</code></li></ul></li></ol><h3><a aria-hidden="true" class="anchor" id="flexitem"></a><a aria-hidden="true" class="hash-link" href="#flexitem">#</a>FlexItem</h3><p>FlexItem : <code>src/cpp/core/FlexLayout/flexitem.h</code> add flexnode to each widget.
|
|
FlexItem adds methods like getFlexNode.</p><h3><a aria-hidden="true" class="anchor" id="yogawidget"></a><a aria-hidden="true" class="hash-link" href="#yogawidget">#</a>YogaWidget</h3><p>Qt StyleSheet allows you to specify style properties just like in web. You could specify font-size, margin, padding, etc. Qt StyleSheet also allows custom style properties via Qt's q-property system.</p><p>So in order to enable yoga based properties like alignItems, justifyContent, flex, etc via qt's stylesheet we
|
|
declare and define q properties for each of those custom properties we want.
|
|
This allows us to use something like:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-js codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token plain">view</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">setStyleSheet</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token template-string string" style="color:rgb(173, 219, 103)">`</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)"> background-color:green;</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)"> qproperty-flex: 1;</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)"> qproperty-alignItems: 'center';</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)">`</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>Notice <code>qproperty-</code> prefix? These are the custom q-properties we defined in <code>YogaWidget.h</code>. We do not need to prefix <code>qproperty-</code> if a stylehsheet string is passed through <code>StyleSheet.create()</code>. StyleSheet.create has an autoprefixer which will do the right thing.</p><h3><a aria-hidden="true" class="anchor" id="nodewidget"></a><a aria-hidden="true" class="hash-link" href="#nodewidget">#</a>NodeWidget</h3><p>Every widget we implement should inherit from NodeWidget. This helps us add all the properties we want in the widgets via a single class. NodeWidget is the class that contains properties and methods shared by all widgets. This class allows us to add features to all widgets easily.</p></div></article><div class="margin-top--xl margin-bottom--lg"><nav class="pagination-nav"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_2wxO"><ul class="contents contents__left-border"><li><a href="#painting" class="contents__link">Painting</a></li><li><a href="#layout" class="contents__link">Layout</a><ul class=""><li><a href="#implementation" class="contents__link">Implementation</a></li><li><a href="#flexitem" class="contents__link">FlexItem</a></li><li><a href="#yogawidget" class="contents__link">YogaWidget</a></li><li><a href="#nodewidget" class="contents__link">NodeWidget</a></li></ul></li></ul></div></div></div></div></div></main></div></div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="/runtime~main.5401bcebbcd08e3b96ec.js"></script>
|
|
|
|
<script type="text/javascript" src="/main.7a48394ebc7e47422c98.js"></script>
|
|
|
|
<script type="text/javascript" src="/0.821df7f17f7288aebb5e.js"></script>
|
|
|
|
<script type="text/javascript" src="/1.9b3d421a0f44576af60f.js"></script>
|
|
|
|
<script type="text/javascript" src="/2.27a81c22b5dfa23bfe9b.js"></script>
|
|
|
|
<script type="text/javascript" src="/component---theme-doc-legacy-page-9-e-7-ca5.d31182005d6c21dd63ac.js"></script>
|
|
|
|
<script type="text/javascript" src="/docsMetadata---docs-150-2d6.050a67cf2c62a9aa0583.js"></script>
|
|
|
|
<script type="text/javascript" src="/component---theme-doc-legacy-item-031-769.6e8a6ea08d218712d94a.js"></script>
|
|
|
|
<script type="text/javascript" src="/content---docs-development-styling-293-cad.57e29364f10ab314cd95.js"></script>
|
|
|
|
<script type="text/javascript" src="/metadata---docs-development-styling-1-c-2-0d6.cf646f298080dd60416c.js"></script>
|
|
|
|
</body>
|
|
</html> |