01.Flutter自定義Widget、Center組件阅爽、Text組件路幸、MaterialApp組件、Scaffold組件

進(jìn)擊的巨人 Season 3

1.Flutter 第一個 Demo Center 組件的使用

在 Flutter 中自定義組件其實就是一個類付翁,這個類需要繼承StatelessWidget/StatefulWidget简肴。

前期我們都繼承 StatelessWidget。后期給大家講 StatefulWidget 的使用百侧。 StatelessWidget 是無狀態(tài)組件砰识,狀態(tài)不可變的 widget StatefulWidget 是有狀態(tài)組件,持有的狀態(tài)可能在 widget 生命周期改變佣渴。

import 'package:flutter/material.dart'

void main() => runApp(myApp());

class myApp extends StatelessWidget{
    @override
    Widget build(BuildContext context){
        return Center{
            child: Text{
                "我是一個文本內(nèi)容"辫狼,
                textDirection: TextDirection.ltr,
            }
        },
    };
}

2.給Text組件增加一些裝飾

import 'package:flutter/material.dart'; 

void main(){ runApp(MyApp()); }

class MyApp exstands StatelessWidget{
    @override
    Wigdet bluid(BluidContext context){
        return Center{
            child: Text{
                "我是 Dart 一個文本內(nèi)容",
                textDirection: TextDirection.ltr,
                style: TextStyle{
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    color: Color.fromRGBO(255, 222, 222, 0.5)
                }
            },
        };
    }
}

3.使用MaterialApp和Scaffold兩個組件裝飾App

1.MaterialApp

MaterialApp是一個方便的Widget,它封裝了應(yīng)用程序?qū)崿F(xiàn)Material Design所需要的一些Widget辛润。一般作為頂層widget使用膨处。

常用的屬性:

  1. home(主頁)
  2. title(標(biāo)題)
  3. color(顏色)
  4. theme(主題)
  5. routes(路由)
  6. ...
2.Scaffold

Scaffold是Material Design布局結(jié)構(gòu)的基本實現(xiàn)。此類提供了用于顯示drawer频蛔、snackbar和底部sheet的API灵迫。

常用的屬性:

  1. appBar - 顯示在界面頂部的一個 AppBar
  2. body - 當(dāng)前界面所顯示的主要內(nèi)容 Widget
  3. drawer - 抽屜菜單控件
  4. ...
import 'package:flutter/material.dart'; 

void main(){ runApp(MyApp()); }

class MyApp extends s StatelessWidget{
    @override 
    Widget build(BuildContext context) {
        return MateriaApp{
            title: "我是一個標(biāo)題",
            home: Scaffold{
                appBar: AppBar{
                    title: Text('appBar title'),
                    elevation: 30.0, //設(shè)置標(biāo)題陰影
                },
                body: MyHome(),
            },
            theme: ThemeData{
                //設(shè)置主題顏色
                primarySwatch: Colors.yellow,
            },
        };
    }
}

class MyHome extends StatelessWidget{
    @override 
    Widget build(BuildContext context) {
        return Center{
            child: Text{
                "我是 Dart 一個文本內(nèi)容",
                textDirection: TextDirection.ltr,
                style: TextStyle{
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.black38,
                }
            },
        };
    }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市晦溪,隨后出現(xiàn)的幾起案子瀑粥,更是在濱河造成了極大的恐慌,老刑警劉巖三圆,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件狞换,死亡現(xiàn)場離奇詭異,居然都是意外死亡舟肉,警方通過查閱死者的電腦和手機(jī)修噪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來路媚,“玉大人黄琼,你說我怎么就攤上這事≌鳎” “怎么了脏款?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵围苫,是天一觀的道長。 經(jīng)常有香客問我撤师,道長剂府,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任剃盾,我火速辦了婚禮腺占,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘痒谴。我一直安慰自己衰伯,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布闰歪。 她就那樣靜靜地躺著嚎研,像睡著了一般。 火紅的嫁衣襯著肌膚如雪库倘。 梳的紋絲不亂的頭發(fā)上临扮,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天,我揣著相機(jī)與錄音教翩,去河邊找鬼杆勇。 笑死,一個胖子當(dāng)著我的面吹牛饱亿,可吹牛的內(nèi)容都是我干的蚜退。 我是一名探鬼主播,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼彪笼,長吁一口氣:“原來是場噩夢啊……” “哼钻注!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起配猫,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤幅恋,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后泵肄,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體捆交,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年腐巢,在試婚紗的時候發(fā)現(xiàn)自己被綠了品追。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡冯丙,死狀恐怖肉瓦,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤泞莉,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布洁墙,位于F島的核電站,受9級特大地震影響戒财,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜捺弦,卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一饮寞、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧列吼,春花似錦幽崩、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至理郑,卻和暖如春蹄溉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背您炉。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工柒爵, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人赚爵。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓棉胀,卻偏偏與公主長得像,于是被迫代替她去往敵國和親冀膝。 傳聞我的和親對象是個殘疾皇子唁奢,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,440評論 2 348

推薦閱讀更多精彩內(nèi)容