激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

給我一塊畫(huà)布，我可以造一個(gè)全新的跨端UI

發(fā)布時(shí)間：2024-01-04 15:03:05 瀏覽量：244次

一、源起

??作者是名超大齡程序員，曾涉及了包括Web端、桌面端、移動(dòng)端等各類前端技術(shù)，深受這些前端技術(shù)的苦，主要但不限于：

1. 每種技術(shù)編寫(xiě)代碼的語(yǔ)言及技術(shù)完全不同，同樣呈現(xiàn)形式的組件各端無(wú)法通用；

2. 大部分前端開(kāi)發(fā)語(yǔ)言跟后端開(kāi)發(fā)語(yǔ)言不同，不能共用一些數(shù)據(jù)結(jié)構(gòu)；

??前端UI的本質(zhì)是在顯示器上呈現(xiàn)由像素點(diǎn)組成的畫(huà)面，并且響應(yīng)外部輸入事件作出相應(yīng)的重繪。由于作者對(duì)Skia2D繪圖引擎比較熟悉，又恰好可以借鑒一下Flutter引擎的跨端實(shí)現(xiàn)，所以作者動(dòng)起了重新造一個(gè)跨端UI的念頭。 阿基米德說(shuō)過(guò)：“給我一個(gè)支點(diǎn)，我可以撬動(dòng)地球”，那作者要說(shuō)："給我一塊畫(huà)布，我可以造一個(gè)全新的跨端UI"。

二、畫(huà)布及畫(huà)筆:

??有了畫(huà)布才能繪制用戶界面，目前畫(huà)布的來(lái)源主要是兩類：

1. Web端參考Flutter的實(shí)現(xiàn)，利用編譯為WebAssembly的CanvasKit提供；

2. 桌面端及移動(dòng)端參考Xamarin的實(shí)現(xiàn)，利用原生操作系統(tǒng)的視窗結(jié)合Skia的SkCanvas提供;

??每個(gè)窗體的畫(huà)布分為兩層，一層繪制Widget，另一層用于彈出層的繪制及一些組件裝飾器的繪制。繪制引擎暫統(tǒng)一由Skia來(lái)處理，將來(lái)可能會(huì)考慮抽象繪制引擎。

三、組件樹(shù)、布局及樣式

??Flutter有三棵樹(shù)，作者嫌啰嗦所以只有一棵WidgetTree，好處是實(shí)現(xiàn)簡(jiǎn)單且方便維持組件實(shí)例的狀態(tài)。每個(gè)界面都由組件樹(shù)結(jié)構(gòu)組成。有些組件為布局類的（eg: Column、Stack等），具備單或多子組件；有些組件為葉子節(jié)點(diǎn)(eg: Text、PieChart等)，通過(guò)設(shè)置相應(yīng)的屬性后直接繪制至畫(huà)布。

四、組件狀態(tài)

??實(shí)現(xiàn)組件時(shí)如果需要外部狀態(tài)驅(qū)動(dòng)，可以定義狀態(tài)變量并綁定至組件的相關(guān)屬性，這樣當(dāng)狀態(tài)值發(fā)生變更時(shí)，綁定的組件根據(jù)狀態(tài)影響進(jìn)行重新布局或僅重新繪制。

public class DemoCounter : View 
{
    private readonly State<int> _counter = 0; //定義狀態(tài)
    
    public DemoCounter() 
    {
        Child = new Column
        {
            Children = new Widget[]
            {
                new Text(_counter.AsStateOfString()/*綁定至組件*/),
                new Button("+") { OnTap = e => _counter.Value+=1/*改變狀態(tài)值*/ }
            }
        };
    }
}

五、組件動(dòng)畫(huà)

??動(dòng)畫(huà)實(shí)現(xiàn)基本照搬Flutter的實(shí)現(xiàn)方式，由AnimationController在指定時(shí)間段內(nèi)驅(qū)動(dòng)各Animation的動(dòng)畫(huà)值變化，從而連續(xù)改變組件的狀態(tài)值。

public class DemoAnimation : View
{
    private readonly AnimationController _controller;
    private readonly Animation<Offset> _offsetAnimation;
    
    public DemoAnimation()
    {
        _controller = new AnimationController(1000/*動(dòng)畫(huà)時(shí)長(zhǎng)*/);
        _offsetAnimation = new OffsetTween(new Offset(-1, 0), new Offset(1, 0))
            .Animate(_controller); //位移變換并綁定至動(dòng)畫(huà)控制器
        
        Child = new Column
        {
            Children = new Widget[]
            {
                new Button("播放動(dòng)畫(huà)") { OnTap = e => _controller.Forward() },
                new SlideTransition(_offsetAnimation)
                {
                    Child = new Text("動(dòng)畫(huà)")
                }
            }
        };
    }
}


六、后續(xù)

??力量有限，在此拋磚引玉希望更多感興趣的伙伴加入完善，也希望成為跟華為ArkUI類似的國(guó)產(chǎn)UI，對(duì)了暫時(shí)就叫PixUI吧。

熱門(mén)課程推薦

熱門(mén)資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定