Flutter學習筆記(9)--組件Widget

如需轉載,請註明出處:Flutter學習筆記(9)--組件Widget

在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

 繼承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'),
        ),
      ),
    );
  }
}

 

  • 有狀態StatefulWidget

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)--容器組件、圖片組件學習

相關文章
相關標籤/搜索