fluttet中實現一個自定義的StatefulWidget組件，可以在數據變化后，把最新的頁面效果展示給客戶

實現效果

實現代碼

pages文件夾下新加一個counter_page.dart文件

class CounterPage extends StatefulWidget {const CounterPage({super.key});@overrideState<CounterPage> createState() => _CounterPageState();
}

_CounterPageState類的實現

class _CounterPageState extends State<CounterPage> {int _counter = 0;void _addCount() {setState(() {_counter++;});}void _decCount() {setState(() {_counter--;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('計數器'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('You have pushed the button this many times:'),Row(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton(onPressed: _decCount,// 減號圖標Iconsstyle: const ButtonStyle(backgroundColor: WidgetStatePropertyAll<Color>(Colors.red),),child: Text('-',style: TextStyle(color: Colors.white),),),Text('$_counter'),ElevatedButton(onPressed: _addCount,child: Icon(Icons.add),)],)],),));}
}

_counter 是內部的狀態變量，_decCount和_addCount是對應按鈕的點擊事件

使用setState來實現數據的變化，這里有點類似于react的class組件的實現

在main.dart中使用這個組件

import 'package:flutter/material.dart';
import 'package:flutter_app_01/pages/counter_page.dart';
// import 'package:flutter_app_01/pages/msg_page.dart';void main() =>  runApp(const MyWidget());
class MyWidget extends StatelessWidget {const MyWidget({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(// debugShowCheckedModeBanner:false,title:"個人中心",// home: MyHomePage(),// home:MessagePage()home: CounterPage());}
}

這樣我們就實現了一個自定義組件