Flutter: Stateful 掛件 vs Stateless 掛件

語言: CN / TW / HK
時間 2022-10-10 00:15:31

Flutter 一切皆掛件。如果你想開發一個應用，首先，你得知道你需要使用哪種掛件。每個掛件都有它的狀態。

狀態是什麼？

狀態就是在構建小掛件時可以同時讀取資訊，並且可能在執行時更改資訊。簡而言之，我們可以說 State 定義了 Widget 的當前屬性。

繼承 Stateful 掛件的類是不可變的，但是 State 是可變的。

不可變的類 意味著一旦物件被建立，我們不可以改變它的內容。可變的類 是指一旦它被建立，我們還是可以更改它內部的狀態。

stateful_stateless.png

應用 Stateful 掛件的步驟

  1. 通過繼承 StatefulWidget 去建立一個類，然後在 createState() 方法中返回狀態
  2. 建立 State 類掛件可能在執行時候更改它的值
  3. 在 State 類中，應用 build() 方法
  4. 呼叫 setState() 方法。 setState() 方法實際上是重繪掛件。

程式碼示例

stateful_widgets.png

應用 Stateless 掛件的步驟

  1. 通過繼承 StatelessWidget 去建立一個類
  2. 為掛件建立一個 build() 方法，在個關鍵在執行時不更改其內容
  3. build() 方法中返回掛件

程式碼示例

stateless_widgets.png

完整的程式碼和輸出

``` import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Home(), ); } }

class Home extends StatefulWidget { @override _HomeState createState() => _HomeState(); }

class _HomeState extends State { String name = ""; @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( appBar: AppBar( title: Text("Stateful Widget Vs. Stateless Widget"), centerTitle: true, ), body: Center( child: Container( width: 300, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ TextField( decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Enter your name', ), onSubmitted: (String str) { setState(() { name = str; }); }, ), Text("Hello $name!"), Greet(), ], ), ), ), ), ); } }

class Greet extends StatelessWidget { @override Widget build(BuildContext context) { return RaisedButton( child: Text("Nice to meet you"), ); } } ```

result_stateful_stateless.png

本文是譯文，採用意譯的方式。原文連結 https://levelup.gitconnected.com/flutter-stateful-widget-vs-stateless-widget-c7baf0a3bbc1

「」
「」