C 語言桌面端圖形界面開發(fā)庫

開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是一個使用 C、XML 和 CSS 構(gòu)建簡單的跨平臺桌面應(yīng)用的開發(fā)庫——LCUI。

LCUI 是一個用 C 編寫的圖形界面開發(fā)庫，你可以用 C、XML 和 CSS 創(chuàng)建簡單的桌面應(yīng)用，包括傳統(tǒng)的 Win32 桌面應(yīng)用、Windows 通用應(yīng)用。

功能特性

C 語言編寫：適用于體積較小且主要使用 C 語言實(shí)現(xiàn)的應(yīng)用程序，以及偏向使用 C 語言編寫簡單應(yīng)用的開發(fā)者。
跨平臺：支持 Windows 和 GNU/Linux 系統(tǒng)，可開發(fā)簡單的 Windows 桌面應(yīng)用和通用應(yīng)用，以及 Linux 桌面應(yīng)用。
XML + CSS：預(yù)置 XML 和 CSS 解析器，你可以使用 XML 和 CSS 來描述界面結(jié)構(gòu)和樣式。
與網(wǎng)頁類似的開發(fā)體驗：由于 LCUI 的布局、樣式和渲染器等相關(guān)功能的設(shè)計和實(shí)現(xiàn)大都參考了 MDN 文檔和一些 Web 前端流行的開發(fā)庫，因此開發(fā)體驗和界面效果會與網(wǎng)頁有一些相似之處，如果你已經(jīng)有用 HTML 和 CSS 編過網(wǎng)頁的經(jīng)驗，那么會比較容易上手。
可縮放：支持全局縮放，支持使用基于屏幕密度的 sp 和 dp 單位表示界面元素的位置和大小。

效果圖

相關(guān)項目

用于開發(fā) LCUI 應(yīng)用程序的命令行工具

項目地址： https://github.com/lc-ui/lcui-cli

LCUI 的路由管理器，用于解決 LCUI 應(yīng)用內(nèi)多視圖的切換和狀態(tài)管理問題

項目地址： https://github.com/lc-soft/lcui-router

專為 LCUI 開發(fā)的組件庫，包含了一些通用組件和 CSS 樣式，組件設(shè)計參考自 Bootstrap、ElementUI、AntDesign

項目地址： https://github.com/lc-ui/lc-design

圖片管理器，LCUI 的旗艦級應(yīng)用程序

項目地址： https://github.com/lc-soft/LC-Finder

基于 JavaScript 語法且可編譯為 C 的語言，預(yù)置 LCUI 綁定，提供類似于 React 的聲明式 UI 開發(fā)體驗

項目地址： https://github.com/lc-soft/trad

此項目使用MIT開源協(xié)議，更多內(nèi)容大家可自行前往閱讀。

開源地址：https://github.com/lc-soft/LCUI

語：有時候在電腦上網(wǎng)的時候看見自己喜歡的網(wǎng)站或特別的頁面，自己已經(jīng)點(diǎn)擊電腦屏幕上方的星號收藏這個頁面了，但有時候看收藏夾又被密密麻麻的內(nèi)容弄得頭昏眼花，這時，我的處理方法是把收藏的頁面導(dǎo)出來，新建文件夾分類整理好，這樣下次想看什么內(nèi)容就不用只看收藏夾里小小的字，而是在文件夾中能夠清楚的，按照自己的習(xí)慣，分好類別的，整潔的頁面了。下面是具體操作，根據(jù)提示的1、2、3······進(jìn)行操作，就可以了。

首先打開瀏覽器。找到自己喜歡的頁面，我打開了自己的收藏夾，找到自己喜歡的頁面。然后點(diǎn)擊文字跳轉(zhuǎn)到具體的那個喜歡的頁面。

然后點(diǎn)擊屏幕上方，瀏覽器的三個點(diǎn)“···”。

然后點(diǎn)擊“更多工具”。

然后點(diǎn)擊“將頁面另存為”。

選擇文件夾，把頁面保存下來。

最后打開電腦你保存文件在什么地方，就能在該地方找到保存的喜歡頁面，該頁面在文件夾里保存的形式為“html”文件。

在程序員開發(fā)軟件界面系統(tǒng)也都是有多種多樣，每種開發(fā)語言基本上都有一種或多種界面引擎如：C skin, Direct UI , 還有金山、迅雷等廠商的界面SDK。

今天推薦一個輕量級、自由度高、使用方便的界面庫 Htmlayout/Sciter。HTMLayout是一個免費(fèi)的開源界面庫（核心未開源），以DLL的方式運(yùn)行，并提供一個API的調(diào)用接口和一系列的C++封裝和sample例程。HTMLayout: 快速，輕量、嵌入式的，基于HTML/CSS渲染技術(shù)和布局管理的界面引擎組件，可以高效地解析和渲染HTML網(wǎng)頁。其幾乎支持所有的HTML元素和CSS3標(biāo)準(zhǔn)，并根據(jù)界面庫的特征，做了很多有用的功能性擴(kuò)展。

界面預(yù)覽

這里著重地說一下在 aardio 軟件中的使用，作者把 HTMLayout和 Sciter 制作成了擴(kuò)展庫, 并且免費(fèi)開源, 通過這個擴(kuò)展庫你知道會一點(diǎn)點(diǎn) HTML 和 CSS 知識就可以方便地制作各種漂亮的 ui。通過作者的努力你還可以直接在界面上使用現(xiàn)在最流行的字體圖標(biāo)，還使擴(kuò)展庫支持了模板功能，你可以像寫PHP一樣寫桌面軟件的界面HTML，雖然看起來簡單的代碼，但用起來會非常方便。

效果圖

言歸正傳, 我們用aardio一步步來制作一個最簡單的界面。

1、打開軟件》新建工程》選擇web界面》選擇HTMLayout》創(chuàng)建工程

字體圖標(biāo)

效果圖

aardio 里查看 main.aardio 源碼

 import win.ui;
/*DSG{{*/
var winform=win.form(text="htmlayout";right=761;bottom=609;border="none")
winform.add()
/*}}*/

import web.layout; 
import web.layout.behavior.windowCommand;
import web.layout.behavior.tabs;
// 加載網(wǎng)頁
var wbLayout=web.layout( winform );
wbLayout.go("\layout\ui.html");

if(_STUDIO_INVOKED){
	import web.layout.debug;
	wbLayout.attachEventHandler( web.layout.debug );
} 

//添加陰影邊框
import win.ui.shadow;
win.ui.shadow( winform,50,3 );

winform.show() 
win.loopMessage();

從上面我們可以看出，軟件的主要界面是由 ui.html，ui.css，tabs.css 這幾個文件組成的。然后你可以根據(jù)自己軟件界面的需要進(jìn)行調(diào)整。

工程項目

以下是我自己這二天搭建的一個軟件的界面，就是一個簡單的軟件基本框架。

演示圖上

工程項目目錄結(jié)構(gòu)

如果你對htmlayout感興趣，可以查看 https://bbs.aardio.com/forum.php?mod=forumdisplay&fid=128&page=1 了解更多更詳細(xì)的教程。

在線咨詢

上一篇：JS 判斷瀏覽器類型，獲取位置信息，如何讓手機(jī)震動
下一篇：抖音頁面的制作實(shí)戰(zhàn)，原來如此簡單？-BEM命名規(guī)范介

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

C 語言桌面端圖形界面開發(fā)庫

功能特性

效果圖

相關(guān)項目

您的項目需求