一點(diǎn)一滴學(xué)習(xí)Flutter (4)——— StatefulWidget和StatelessWidget的使用

我并不是專業(yè)的程序員肴敛,所學(xué)的專業(yè)與軟件開發(fā)沒有太大的關(guān)系医男,一直以來都是將編程學(xué)習(xí)作為一項愛好而持續(xù)著捻勉。之前自學(xué)過C語言,JAVA报账,Python禽捆、單片機(jī)嵌入式開發(fā)等,這次看到Flutter1.0版本發(fā)布后就想著自學(xué)琐凭,然后用Flutter寫出一個安卓軟件浊服。零零碎碎地學(xué)習(xí)到現(xiàn)在也將近兩個月了,寫下這些文章牙躺,為的是將閱讀官方文檔所學(xué)到的知識回顧總結(jié)出來,更是為了記錄下那些踩過的坑吨掌,如果有表述得不專業(yè)或者錯誤的地方脓恕,還請指出。

StatefulWidget和StatelessWidget的使用參考了官方文檔:1秋茫、Write your first Flutter app乃秀; 2圆兵、StatefulWidget class殉农;3局荚、StatelessWidget class

我所選用的IDE工具是google官方的Andriod Studio,官方下載鏈接為:Android Studio 钙畔;

系統(tǒng)運(yùn)行環(huán)境為windows10 專業(yè)版 17763.316

系列文章鏈接如下:1簿盅、一點(diǎn)一滴學(xué)習(xí)Flutter (1)——— Flutter的安裝揍魂;2、一點(diǎn)一滴學(xué)習(xí)Flutter (2)——— Flutter項目的創(chuàng)建喜最;3庄蹋、一點(diǎn)一滴學(xué)習(xí)Flutter (3)——— Flutter項目的調(diào)試;4限书、一點(diǎn)一滴學(xué)習(xí)Flutter (4)——— StatefulWidget和StatelessWidget的使用倦西;


使用Flutter進(jìn)行安卓APP開發(fā),首先要面對的就是StatefulWidget和StatelessWidget這兩大類扰柠。用我的直觀感受概括來說,StatefulWidget創(chuàng)建的Widget是界面可變的Widget秦躯,而StatelessWidget創(chuàng)建的Widget則為界面不可變的Widget裆装。(Widget可以理解為Flutter提供給我們選擇使用的組件倡缠,使用Flutter開發(fā)的APP就是用一個接著一個的Widget嵌套昙沦、組裝而成载荔,有點(diǎn)類似與HTML語法。)

StatefulWidget在整個生命周期可以改變很多次丘损,在StatefulWidget的Widget可以在運(yùn)行的過程中變換多次進(jìn)行邏輯交互工扎,以傳達(dá)作者想要展示的信息。例如改變文字呈础、改變顏色、改變大小而钞、改變形狀拘荡、改變圖片等等我們經(jīng)常能夠見到的變化。

StatelessWidget在初始化之后就無法再改變官疲。想要使用StatelessWidget進(jìn)行邏輯交互亮隙,通過改變某些變量以改變Widget的樣式是不可行的,使用前應(yīng)當(dāng)注意维费。

以上只是我使用一段時間后的粗略概括促王,更詳細(xì)的內(nèi)容還需要閱讀官方文檔。

1)StatelessWidget使用示例:

import 'package:flutter/material.dart';//標(biāo)準(zhǔn)的開頭導(dǎo)入庫文件

void main() =>runApp(FlutterApp());//程序的入口函數(shù)阅畴,從main函數(shù)開始運(yùn)行整個程序迅耘。

class FlutterApp extends StatelessWidget {//創(chuàng)建一個繼承于StatelessWidget名字為FlutterApp的類

? @override

? Widget build(BuildContext context) {//FlutterApp的類的構(gòu)建函數(shù)

? ? return MaterialApp(

title:'StatelessWidgetTest',

home:Scaffold(

appBar:AppBar(

title:Text('StatelessWidgetTest'),//在APP的上方顯示標(biāo)題

? ? ? ? ),

body:Center(

child:Text("StatelessWidget Test"),//在APP的中間顯示文字

? ? ? ? ),

),

);

}

}


StatelessWidget示例

以上是一個簡單的StatelessWidget使用示例,可以看出Widget嵌套使用的特性纽哥,MaterialApp里有個Scaffold,Scaffold里有 AppBar晓避、Text和Center,這些都是Widget俏拱。當(dāng)使用嵌套太多時吼句,會產(chǎn)生很多小括號加冒號、小括號加逗號的組合,交叉出現(xiàn)分蓖,讓人眼花繚亂,不知道哪一個小括號是屬于哪一個Widget终娃,特別是要增加或者修改Widget時蒸甜,往往會刪錯了小括號,或者少刪了小括號柠新。所以,在使用Widegt時要注意格式以及縮進(jìn)蕊退,以方便我們增減憔恳。

2)StatefulWidget使用示例:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {? //使用StatelessWidget創(chuàng)建一個名為MyApp的類,這個類定義了軟件的整體布局

? @override

? Widget build(BuildContext context) {

? ? return MaterialApp(

? ? ? title: 'StatefulWidgetTest Demo',

? ? ? home: StatefulWidgetTest(),? //home參數(shù)則為軟件中我們所想要展示信息的區(qū)域输硝,它像是一塊畫布程梦,讓我們在上面作畫(放置Widget)

? ? );

? }

}

class StatefulWidgetTest extends StatefulWidget {? //StatefulWidgetTest和下面的StatefulWidgetTestState需配套使用

? @override

? StatefulWidgetTestState createState() => StatefulWidgetTestState();

}

class StatefulWidgetTestState extends State<StatefulWidgetTest> {

? int counter = 0;

? void Counter() {? //自定義一個用以使counter自增的函數(shù)

? ? setState(() {? //使用setState函數(shù)才能夠更新界面橘荠,否則只有counter的自增時不夠的砾医。setState函數(shù)相當(dāng)于使用了一次createState()衣厘,所以才能夠更新界面

? ? ? counter++;

? ? });

? }

? @override

? Widget build(BuildContext context) {

? ? return Scaffold(

? ? ? appBar: AppBar(

? ? ? ? title: Text("StatefulWidgetTest"), //appBar展示的標(biāo)題信息

? ? ? ),

? ? ? body: Center(

? ? ? ? child: Column(? //可在垂直方向排列足夠多Widget的Widget

? ? ? ? ? children: <Widget>[

? ? ? ? ? ? Text(

? ? ? ? ? ? ? '請點(diǎn)擊加號',

? ? ? ? ? ? ),

? ? ? ? ? ? Text(

? ? ? ? ? ? ? '$counter', //引用counter變量

? ? ? ? ? ? ),

? ? ? ? ? ],

? ? ? ? ),

? ? ? ),

? ? ? floatingActionButton: FloatingActionButton(

? ? ? ? onPressed: Counter, //onPressed參數(shù)定義了按鈕點(diǎn)擊后執(zhí)行什么操作

? ? ? ? child: Icon(Icons.add),

? ? ? ),

? ? );

? }

}


StatefulWidget示例

以上是一個簡單的StatefulWidget使用示例影暴,定義了一個整型變量、一個使變量自增的方法以及一個可點(diǎn)擊的浮動按鈕撬呢,實(shí)現(xiàn)通過點(diǎn)擊按鈕使數(shù)字增加的功能妆兑。在使用MaterialApp的title參數(shù)時,我發(fā)現(xiàn)這個參數(shù)會在某些手機(jī)查看最近使用應(yīng)用時顯示出來搁嗓,一般我們在手機(jī)上查看最近使用應(yīng)用時,應(yīng)用截圖的上方會顯示應(yīng)用名稱荷愕,但是在某些手機(jī)上棍矛,會顯示MaterialApp的title設(shè)定的名稱。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末荐类,一起剝皮案震驚了整個濱河市茁帽,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌厌小,老刑警劉巖战秋,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異癣蟋,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)濒生,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進(jìn)店門幔欧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人觉义,你說我怎么就攤上這事浴井。” “怎么了磺浙?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵撕氧,是天一觀的道長。 經(jīng)常有香客問我呵曹,道長奄喂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任跨新,我火速辦了婚禮域帐,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘肖揣。我一直安慰自己浮入,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布彤断。 她就那樣靜靜地躺著,像睡著了一般宰衙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上供炼,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天劲蜻,我揣著相機(jī)與錄音,去河邊找鬼先嬉。 笑死,一個胖子當(dāng)著我的面吹牛含懊,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播岔乔,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼雏门,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了茁影?” 一聲冷哼從身側(cè)響起丧凤,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎浩螺,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體要出,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡厨幻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了饭宾。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡看铆,死狀恐怖弹惦,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情棠隐,我是刑警寧澤,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布助泽,位于F島的核電站嚎京,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏诫睬。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一摄凡、第九天 我趴在偏房一處隱蔽的房頂上張望蚓曼。 院中可真熱鬧,春花似錦辟躏、人聲如沸土全。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至籽御,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間技掏,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工劲阎, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鸠真,地道東北人。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓锡垄,卻偏偏與公主長得像,于是被迫代替她去往敵國和親货岭。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評論 2 344