http://kenji.blog/ar/tags/qt-extension-pack/Recent content in Qt Extension Pack on kenji.blogHugo -- gohugo.ioarkenjinoteFri, 13 Sep 2024 00:53:53 +0900http://kenji.blog/ar/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/Fri, 13 Sep 2024 00:53:53 +0900http://kenji.blog/ar/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/<img src="http://kenji.blog/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/img_1.png" alt="Featured image of post لقد جربت تثبيت حزمة إضافات Qt في Visual Studio Code" /><h1 id="بدء-تطوير-qt-في-vscode-كيفية-تثبيت-حزمة-إضافات-qt">بدء تطوير Qt في VSCode: كيفية تثبيت حزمة إضافات Qt </h1><p>مرحبًا، أنا Kenji. هذه المرة سأقدم &ldquo;كيفية إعداد بيئة تطوير Qt في Visual Studio Code (والمعروف باسم VSCode)&rdquo;.</p> <p>في الآونة الأخيرة، بالإضافة إلى Qt Creator الرسمي، تزايدت الأصوات التي ترغب في تطوير تطبيقات Qt باستخدام VSCode خفيف الوزن وعالي القابلية للتوسيع. نوصي هؤلاء الأشخاص بـ ** &ldquo;حزمة إضافات Qt&rdquo; **. بمجرد تثبيت حزمة الإضافات هذه، ستتوفر لديك جميع الإضافات الرئيسية المتعلقة بـ Qt دفعة واحدة.</p> <hr> <h2 id="الجمهور-المستهدف">الجمهور المستهدف </h2><ul> <li>أولئك الذين يرغبون في البدء في تطوير تطبيقات واجهة المستخدم الرسومية (GUI) باستخدام Qt</li> <li>أولئك الذين يرغبون في التطوير باستخدام VSCode بدلاً من Qt Creator</li> <li>أولئك الذين يجدون صعوبة في البحث عن الإضافات واحدة تلو الأخرى</li> </ul> <hr> <h2 id="المتطلبات-الأساسية">المتطلبات الأساسية </h2><ul> <li>أن يكون VSCode مثبتًا بالفعل (<a class="link" href="https://code.visualstudio.com/" target="_blank" rel="noopener" >يمكنك تنزيله مجانًا من الموقع الرسمي</a>)</li> <li>أن تكون مكتبة Qt الأساسية مثبتة (<a class="link" href="https://www.qt.io/" target="_blank" rel="noopener" >موقع Qt الرسمي</a>)</li> </ul> <hr> <h2 id="ما-هي-حزمة-إضافات-qt">ما هي حزمة إضافات Qt؟ </h2><p>حزمة إضافات Qt هي حزمة إضافات لـ VSCode. من خلال تثبيتها، ستتم إضافة الميزات التالية تلقائيًا:</p> <ul> <li>دعم ملفات <code>.ui</code> (Qt Designer)</li> <li>تمييز بناء الجملة لملفات <code>.pro</code> وملفات <code>.qrc</code></li> <li>إكمال كود C++ لـ Qt، والبناء، ودعم تصحيح الأخطاء</li> <li>متصفح موارد Qt (تصفح الموارد)</li> </ul> <hr> <h2 id="خطوات-التثبيت">خطوات التثبيت </h2><h3 id="1-افتح-vscode">1. افتح VSCode </h3><p>أولاً، قم بتشغيل VSCode.</p> <h3 id="2-افتح-عرض-الإضافات">2. افتح عرض الإضافات </h3><p>انقر على شريط النشاط على اليسار (رمز المربع) لعرض &ldquo;الإضافات&rdquo;.</p> <p>أو يمكنك الضغط على الاختصار <code>Ctrl + Shift + X</code>.</p> <h3 id="3-ابحث-عن-qt-extension-pack">3. ابحث عن &ldquo;Qt Extension Pack&rdquo; </h3><p>أدخل الكلمة الرئيسية التالية في شريط البحث:</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">Qt Extension Pack </span></span></code></pre></td></tr></table> </div> </div><p><img src="http://kenji.blog/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/img.png" width="867" height="228" srcset="http://kenji.blog/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/img_hua3a606fe260b4f1c55a0f37b6ed054ec_30325_480x0_resize_box_3.png 480w, http://kenji.blog/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/img_hua3a606fe260b4f1c55a0f37b6ed054ec_30325_1024x0_resize_box_3.png 1024w" loading="lazy" alt="img.png" class="gallery-image" data-flex-grow="380" data-flex-basis="912px" ></p> <h3 id="4-انقر-فوق-زر-التثبيت">4. انقر فوق زر التثبيت </h3><p>بمجرد ظهور الحزمة المستهدفة، انقر فوق الزر &ldquo;تثبيت&rdquo;. سيؤدي هذا إلى تثبيت الإضافات المتعددة التالية دفعة واحدة:</p> <ul> <li>Qt Language Support</li> <li>QML Support</li> <li>Qt Designer Integration</li> <li>CMake Tools (مطلوب لتطوير Qt المتوافق مع CMake)</li> </ul> <hr> <h2 id="إضافة-حول-إعدادات-المشروع-مثال-cmake--qt">إضافة حول إعدادات المشروع (مثال CMake + Qt) </h2><p>إذا كنت تستخدم Qt استنادًا إلى CMake، فنوصي بدمجه مع الإضافات التالية:</p> <ul> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.cmake-tools" target="_blank" rel="noopener" >CMake Tools</a></li> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=twxs.cmake" target="_blank" rel="noopener" >CMake Language Support</a></li> </ul> <p>أيضًا، إذا أضفت الكود التالي إلى CMakeLists.txt، فسيكون التكامل مع Qt سلسًا:</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-cmake" data-lang="cmake"><span class="line"><span class="cl"><span class="nb">find_package</span><span class="p">(</span><span class="s">Qt6</span> <span class="s">REQUIRED</span> <span class="s">COMPONENTS</span> <span class="s">Widgets</span><span class="p">)</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="nb">target_link_libraries</span><span class="p">(</span><span class="s">MyApp</span> <span class="s">PRIVATE</span> <span class="s">Qt6::Widgets</span><span class="p">)</span><span class="err"> </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="مكافأة-كيف-تفتح-ملفات-ui">مكافأة: كيف تفتح ملفات .ui؟ </h2><p>يمكن تحرير ملفات <code>.ui</code> في Qt Designer. في VSCode، يمكنك النقر بزر الماوس الأيمن على ملف <code>.ui</code> ثم اختيار <code>Open with Qt Designer</code> (يجب أن يكون Qt Designer مضمنًا في متغير البيئة <code>PATH</code>).</p> <hr> <h2 id="الخلاصة">الخلاصة </h2><table> <thead> <tr> <th>الخطوة</th> <th>الوصف</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>تشغيل VSCode</td> </tr> <tr> <td>2</td> <td>فتح لوحة الإضافات</td> </tr> <tr> <td>3</td> <td>البحث عن &ldquo;Qt Extension Pack&rdquo;</td> </tr> <tr> <td>4</td> <td>النقر فوق زر التثبيت</td> </tr> </tbody> </table> <p>أصبح إعداد بيئة Qt في VSCode أسهل بكثير من ذي قبل. يحتوي على ميزات كافية ليكون بديلاً لـ Qt Creator، ونوصي به لأولئك الذين يرغبون في العمل بخفة.</p> <hr> <h2 id="مجموعة-روابط-موصى-بها">مجموعة روابط موصى بها </h2><ul> <li><a class="link" href="https://www.qt.io/" target="_blank" rel="noopener" >موقع Qt الرسمي</a></li> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=TheQtCompany.qt" target="_blank" rel="noopener" >Qt Extension Pack - Visual Studio Marketplace</a></li> <li><a class="link" href="https://code.visualstudio.com/" target="_blank" rel="noopener" >موقع VSCode الرسمي</a></li> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.cmake-tools" target="_blank" rel="noopener" >إضافة CMake Tools</a></li> </ul> <hr> <h2 id="أخيرا">أخيرًا </h2><p>في المستقبل، أخطط لمواصلة التطوير باستخدام أدوات واجهة المستخدم لـ Qt و QML في هذه البيئة. في المرة القادمة، أخطط لشرح ** كيفية بناء وتشغيل تطبيق Hello World في Qt من VSCode **.</p> <p>أراكم لاحقًا!</p>