我并不是專業(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使用示例,可以看出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使用示例影暴,定義了一個整型變量、一個使變量自增的方法以及一個可點(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è)定的名稱。