用Java的方式模擬Flutter的Widget的實現(多層括號巢狀)

AWeiLoveAndroid發表於2019-07-23

我已經研究Flutter很長時間了。我就想既然Flutter用的Dart語言,而且括號又是巢狀多層,很多人都表示不是很理解,也不是很喜歡那麼多層括號巢狀。其實完全不用擔心,既然選擇了它,就要接受它,當然是選擇原諒它。廢話少說,其實Java也是可以實現類似的語法的,下面帶領大家作死的嘗試一下使用Java模擬Flutter的Widget,歡迎各類開發人員前來觀戰。

Flutter最重要的是Widget,首先我們來寫一個類Widget,然後有一個build函式。如下所示:

Tips: (我是阿韋。我的公眾號Flutter 那些事,乾貨多多,歡迎關注。惦記我的資料,可以與我取得聯絡。有任何疑問,歡迎在本文後面留言回覆。)

public class Widget {

    private BuildContext mContext;

    public Widget build(BuildContext context){
        this.mContext = context;
        return this;
    }
}
複製程式碼

接著我們寫一個重要的類BuildContext,如下所示:

我們直接跳過細節了,這裡寫的都是核心點。

public class BuildContext {

    public BuildContext(){

    }
}
複製程式碼

接下來就是一個關鍵的類StatelessWidget,我們寫一個StatelessWidget類繼承自Widget,如下所示:

這裡面我們不做任何的邏輯處理。只是先把這個類寫出來。

public class StatelessWidget extends Widget{
    @Override
    public Widget build(BuildContext context) {
        return super.build(context);
    }
}
複製程式碼

接下來,我們寫寫一個Column類繼承自StatelessWidget,如下所示:

 public class Column extends StatelessWidget {

        Widget[] childrens;
        int width;
        int height;

        public Column(int width, int height, Widget... children) {
            this.width = width;
            this.height = height;
            this.childrens = children;
        }


        @Override
        public Widget build(BuildContext context) {
            return super.build(context);
        }
    }
複製程式碼

接下來,我們寫寫一個Row類繼承自StatelessWidget,如下所示:

 public class Row extends StatelessWidget {

        Widget[] childrens;
        int width;
        int height;

        public Row(int width, int height, Widget... children) {
            this.width = width;
            this.height = height;
            this.childrens = children;
        }


        @Override
        public Widget build(BuildContext context) {
            return super.build(context);
        }
    }
複製程式碼

接下來,我們寫寫一個Container類繼承自StatelessWidget,如下所示:

 public class Container extends StatelessWidget {

        Widget[] childrens;
        int width;
        int height;

        public Container(int width, int height, Widget... children) {
            this.width = width;
            this.height = height;
            this.childrens = children;
        }

        @Override
        public Widget build(BuildContext context) {
            return super.build(context);
        }
    }
複製程式碼

接下來,我們寫寫一個Text類繼承自StatelessWidget,如下所示:

    public class Text extends StatelessWidget {

        String text;
        float size;

        public Text(String text, float size) {
            this.text = text;
            this.size = size;
        }

        @Override
        public Widget build(BuildContext context) {
            return super.build(context);
        }
    }
複製程式碼

接下來就是我們的main函式的處理了,精彩不容錯過:

首先我們寫一個runApp函式,引數為Widget。具體邏輯我們暫時不做處理。如下所示:

public class Main {

    public static void main(String[] args) {
        runApp(new Home());
    }

    public static void runApp(Widget widget) {

    }
}
複製程式碼

接下來我們寫一個類Home繼承自StatelessWidget,如下所示:

public class Home extends StatelessWidget {
        @Override
        public Widget build(BuildContext context) {
            return new Column(
                    50,
                    30,
                    new Column(
                            100,
                            50,
                            new Row(
                                    200,
                                    100,
                                    new Text(
                                            "contents",
                                            20
                                    )
                            )
                    ),
                    new Container(
                            100,
                            150,
                            new Column(
                                    200,
                                    100,
                                    new Row(
                                            50,
                                            50,
                                            new Text(
                                                    "contents2",
                                                    30
                                            )
                                    )
                            )
                    )
            );
        }
    }
複製程式碼

OK,到此為止,就用Java語言實現了Flutter裡面的多個括號巢狀的類似場景,是不是很相似?其實還是那就話,語言都是想通的,Java也好,Dart也好,都是物件導向的語言,掌握物件導向程式設計思想很關鍵。哪怕以後換成了其它的物件導向的語言,只要掌握了物件導向程式設計思想,同樣也可以快速上手開發。

感謝大家觀看,歡迎大家來噴我。

相關文章