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

如需轉載，請注明出處：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）--容器組件、圖片組件