Flutter學習筆記（9）--元件Widget

CurtisWgh發表於2019-07-22
Flutter筆記元件

如需轉載，請註明出處：Flutter學習筆記（9）--元件Widget

在Flutter中，所有的顯示都是Widget，Widget是一切的基礎，我們可以通過修改資料，再用setState設定資料（呼叫setState()來通知框架，框架會再次呼叫State的構建方法來更新使用者介面），Flutter會自動通過繫結的資料更新Widget，所以你需要做的就是實現Widget介面，並且和資料繫結起來。

Widget分為有狀態StatefulWidget和無狀態StatelessWidget兩種，在Flutter中，Widget僅支援一幀，理解起來就是一次性繪製整個介面，無狀態就是指當繪製完這一幀後，保持在這一幀的狀態下不會變化，而有狀態的Widget當資料更新時，其實是繪製了新的Widget，只是state實現了跨幀的資料同步儲存。

上面簡單的說了有狀態和無狀態兩種Widget，那麼我們該怎麼選擇在什麼時機有哪種Widget呢？舉兩個簡單的例子說明一下

1.在app的啟動頁面，我們需要展示一張啟動圖，但是展示過後，我們不需要這張圖片發生任何的改變，保持在這一幀的狀態下就可以了，這時候，我們就可以選擇無狀態StatelessWidget

2.在一個頁面裡面，有一個text和一個button，需求是點選button後，text的內容需要發生變化，也就是說根據使用者互動或在網路請求下，頁面需要發生變化，需要重新繪製，這種情況下，我們就需要有狀態的StatefulWidget。

如果還是有一點不理解的話，那就記住一個規則：如果一個widget發生了變化（例如使用者互動、網路請求更新頁面），那麼它就是有狀態的，反之，如果widget繪製完之後，不會發生任何變化，那麼它就是無狀態的。

上面我們已經講了無狀態和有狀態的widget，接下來具體講一下這兩種的實現方式：

  • 無狀態StatelessWidget

 繼承StatelessWidget，通過build返回一個佈局好的元件

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）--基礎知識

 

相關文章