在Flutter中,全部的顯示都是Widget,Widget是一切的基礎,咱們能夠經過修改數據,再用setState設置數據(調用setState()來通知框架,框架會再次調用State的構建方法來更新用戶界面),Flutter會自動經過綁定的數據更新Widget,因此你須要作的就是實現Widget界面,而且和數據綁定起來。html
Widget分爲有狀態StatefulWidget和無狀態StatelessWidget兩種,在Flutter中,Widget僅支持一幀,理解起來就是一次性繪製整個界面,無狀態就是指當繪製完這一幀後,保持在這一幀的狀態下不會變化,而有狀態的Widget當數據更新時,實際上是繪製了新的Widget,只是state實現了跨幀的數據同步保存。網絡
上面簡單的說了有狀態和無狀態兩種Widget,那麼咱們該怎麼選擇在什麼時機有哪一種Widget呢?舉兩個簡單的例子說明一下app
1.在app的啓動頁面,咱們須要展現一張啓動圖,可是展現事後,咱們不須要這張圖片發生任何的改變,保持在這一幀的狀態下就能夠了,這時候,咱們就能夠選擇無狀態StatelessWidget框架
2.在一個頁面裏面,有一個text和一個button,需求是點擊button後,text的內容須要發生變化,也就是說根據用戶交互或在網絡請求下,頁面須要發生變化,須要從新繪製,這種狀況下,咱們就須要有狀態的StatefulWidget。less
若是仍是有一點不理解的話,那就記住一個規則:若是一個widget發生了變化(例如用戶交互、網絡請求更新頁面),那麼它就是有狀態的,反之,若是widget繪製完以後,不會發生任何變化,那麼它就是無狀態的。ide
上面咱們已經講了無狀態和有狀態的widget,接下來具體講一下這兩種的實現方式:佈局
繼承StatelessWidget,經過build返回一個佈局好的組件post
import 'package:flutter/material.dart'; void main() => runApp(DEMOWidget()); class DEMOWidget extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '無狀態Widget', home: Scaffold( appBar: AppBar( title: Text('無狀態Widget Demo'), ), body: Center( child: Text('這是一個無狀態的Demo'), ), ), ); } }
import 'package:flutter/material.dart'; void main() => runApp(SampleApp()); class SampleApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Sample App', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new SampleAppPage(), ); } } class SampleAppPage extends StatefulWidget { SampleAppPage({Key key}) : super(key: key); @override _SampleAppPageState createState() => new _SampleAppPageState(); } class _SampleAppPageState extends State<SampleAppPage> { // Default placeholder text String textToShow = "I Like Flutter"; @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Sample App"), ), body: new Center(child: new Text(textToShow)), floatingActionButton: new FloatingActionButton( onPressed: _updateText, tooltip: 'Update Text', child: new Icon(Icons.update), ), ); } void _updateText() { setState(() { // update the text textToShow = "Flutter is Awesome!"; }); } }
下一章節:Flutter學習筆記(10)--容器組件、圖片組件學習