Flutter Stateful Widget 實戰：構建高效的動態頁面

在Flutter中，Stateful Widget是一種非常常見的Widget類型，它們可以根據用戶交互、網路請求等動態改變自身的UI。

在本文中，我們將通過實例演示如何使用Stateful Widget構建高效的動態頁面。

一、創建一個簡單的Stateful Widget

首先，讓我們創建一個簡單的Stateful Widget，它可以顯示一個計數器，並且可以通過按鈕的點擊來改變計數器的值。

“`dart
class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
‘計數器的值為:’,
),
Text(
‘$_counter’,
style: Theme.of(context).textTheme.headline1,
),
ElevatedButton(
onPressed: _incrementCounter,
child: Text(‘增加計數器’),
)
],
);
}
}
“`

在上面的代碼中，我們定義了一個名為CounterWidget的Stateful Widget，其中包含了一個計數器_counter和一個用於增加計數器的按鈕。

在點擊按鈕後，_incrementCounter()方法會被執行，在其中我們調用了setState()方法，將_counter的值+1並更新UI。

最後，我們在build()方法中返回了一個Column Widget，其中包含了2個Text Widget和1個ElevatedButton Widget，分別用於顯示計數器的值、增加計數器以及執行增加操作的按鈕。

二、StatefulWidget的生命周期

在使用Stateful Widget時，我們需要理解它的生命周期並正確地處理它，以確保應用程序的正確性和高效性。

1. createState()

在創建Stateful Widget時，createState()方法會被調用，用於創建對應的State對象。

“`dart
class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}
“`

createState()方法應該返回一個State對象，用於維護Widget的狀態。

2. initState()

在State對象被創建後，initState()方法會被調用，用於初始化State對象的狀態。

在該方法中，我們通常會進行一些需要耗時或需要等待其他組件初始化的操作。例如，從網路請求數據、初始化動畫控制器等。

“`dart
class _CounterWidgetState extends State {
int _counter = 0;

@override
void initState() {
super.initState();
//初始化操作
}

…
}
“`

3. build()

在State對象被創建並且狀態被初始化後，build()方法會被調用，用於構建Widget的UI。

在該方法中，我們通常會返回一個組件樹，可以是一個Widget或多個Widget嵌套的組合。

“`dart
class _CounterWidgetState extends State {
int _counter = 0;

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: …
);
}

…
}
“`

4. setState()

在Stateful Widget的狀態發生變化時，我們通常會調用setState()方法，通知Flutter框架重新調用build()方法，以更新UI。

“`dart
class _CounterWidgetState extends State {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

…
}
“`

5. didUpdateWidget()

當Widget被重建時（例如父Widget發生了變化），didUpdateWidget()方法會被調用。

在該方法中，我們通常會比較舊的Widget和新的Widget的屬性，以便根據需要更新Widget的狀態。

“`dart
class _CounterWidgetState extends State {
int _counter = 0;

@override
Widget build(BuildContext context) {
…
}

@override
void didUpdateWidget(CounterWidget oldWidget) {
super.didUpdateWidget(oldWidget);
//比較舊的Widget和新的Widget的屬性，並根據需要更新Widget的狀態
}

…
}
“`

6. deactivate()

當State對象從渲染樹中被移除時，deactivate()方法會被調用。

在該方法中，我們可以做一些清理工作，例如取消動畫、之前註冊的事件等。

“`dart
class _CounterWidgetState extends State {
int _counter = 0;

@override
Widget build(BuildContext context) {
…
}

@override
void deactivate() {
super.deactivate();
//清理工作
}

…
}
“`

7. dispose()

當State對象被完全從渲染樹中刪除時，dispose()方法會被調用。

在該方法中，我們應該釋放State對象所佔用的資源，例如動畫控制器、流控制器等。

“`dart
class _CounterWidgetState extends State {
int _counter = 0;

@override
Widget build(BuildContext context) {
…
}

@override
void dispose() {
//釋放資源
super.dispose();
}

…
}
“`

三、ListView中使用Stateful Widget

在實際開發中，常常需要使用ListView來展示一組動態數據。

這時，我們可以通過結合Stateful Widget和ListView來實現高效的動態頁面。

例如，下面的代碼演示了如何在ListView中使用Stateful Widget來展示一個帶有刪除按鈕的列表。

“`dart
class ItemListWidget extends StatefulWidget {
final List itemList;

ItemListWidget({Key key, this.itemList}) : super(key: key);

@override
_ItemListWidgetState createState() => _ItemListWidgetState();
}

class _ItemListWidgetState extends State {
List _itemList;

@override
void initState() {
super.initState();
//初始化數據
_itemList = widget.itemList;
}

void _removeItem(int index) {
setState(() {
_itemList.removeAt(index);
});
}

@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: _itemList.length,
itemBuilder: (BuildContext context, int index) {
return Dismissible(
key: UniqueKey(),
direction: DismissDirection.endToStart,
onDismissed: (direction) {
_removeItem(index);
},
child: ListTile(
title: Text(_itemList[index]),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () {
_removeItem(index);
},
),
),
background: Container(
color: Colors.red,
alignment: Alignment.centerRight,
child: Icon(
Icons.delete,
color: Colors.white,
),
),
);
},
);
}
}
“`

在上面的代碼中，我們定義了一個名為ItemListWidget的Stateful Widget，其中包含了一個帶有刪除按鈕的列表。

initState()方法用於初始化數據，_removeItem()方法用於刪除列表中的一個項，build()方法中使用ListView.builder()來構建列表，並且每個列表項都有一個可滑動的刪除按鈕。

在刪除一個列表項時，我們調用setState()方法來通知Flutter重新調用build()方法，以更新UI。

四、總結

在本文中，我們通過實例演示了如何使用Stateful Widget構建高效的動態頁面。

我們展示了如何創建一個簡單的Stateful Widget、StatefulWidget的生命周期、ListView中使用Stateful Widget等。

如果您想查看完整的代碼示例，請查看以下Gist鏈接：

https://gist.github.com/anonymous/00000000000000000000000000000000