Flutter有狀態(tài)組件使用詳解
有狀態(tài)組件
flutter 主要有分有狀態(tài)組件 StatefulWidget 和無狀態(tài)組件 StatelessWidget,前面我們使用到的都是無狀態(tài)組件,沒有讓頁面上的內(nèi)容發(fā)生變化,當(dāng)我們有需要對頁面的內(nèi)容進(jìn)行動態(tài)修改的時候 ,如果我們使用無狀態(tài)組件,頁面上的內(nèi)容就不會被更新,這時需要用到有狀態(tài)組件。
有狀態(tài)組件就是繼承了StatefulWidget的組件,內(nèi)容更改時調(diào)用
setState(() { 更改的內(nèi)容});
// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable, prefer_const_literals_to_create_immutables import 'package:flutter/material.dart'; void main() { ? runApp(MyApp()); } class MyApp extends StatelessWidget { ? const MyApp({Key? key}) : super(key: key); ? @override ? Widget build(BuildContext context) { ? ? return MaterialApp( ? ? ? home: Scaffold( ? ? ? ? appBar: AppBar( ? ? ? ? ? title: const Text('Flutter Demo'), ? ? ? ? ), ? ? ? ? body: const HomeContent(), ? ? ? ), ? ? ? theme: ThemeData( ? ? ? ? primarySwatch: Colors.yellow, ? ? ? ), ? ? ); ? } } //有狀態(tài)自定義組件有兩個類,我們需要返回的寫在第二個類中 class HomeContent extends StatefulWidget { ? const HomeContent({Key? key}) : super(key: key); ? @override ? _HomeContentState createState() => _HomeContentState(); } class _HomeContentState extends State<HomeContent> { ? int count = 0; ? @override ? Widget build(BuildContext context) { ? ? return Center( ? ? ? child: Column( ? ? ? children: [ ? ? ? ? Chip( ? ? ? ? ? label: Text("$count"), ? ? ? ? ), ? ? ? ? ElevatedButton( ? ? ? ? ? ? onPressed: () { ? ? ? ? ? ? ? setState(() { ? ? ? ? ? ? ? ? count++; ? ? ? ? ? ? ? }); ? ? ? ? ? ? }, ? ? ? ? ? ? child: Text("點擊加一")) ? ? ? ], ? ? ), ? ? ); ? } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Android如何自定義view實現(xiàn)圓形進(jìn)度條
Android中實現(xiàn)進(jìn)度條有很多種方式,自定義進(jìn)度條一般是繼承progressBar或繼承view來實現(xiàn)。本文將介紹通過自定義View實現(xiàn)的圓形進(jìn)度條,感興趣的可以動手試一試2022-01-01簡單學(xué)習(xí)Android Socket的使用方法
這篇文章主要幫助大家簡單學(xué)習(xí)Android Socket的使用方法,感興趣的小伙伴們可以參考一下2016-03-03Flutter使用NetworkImage實現(xiàn)圖像顯示效果
這篇文章主要為大家介紹了如何在Flutter中使用NetworkImage實現(xiàn)圖像顯示效果,文中的示例代碼講解詳細(xì),快跟隨小編一起學(xué)習(xí)一下吧2022-04-04Android Bluetooth藍(lán)牙技術(shù)使用流程詳解
這篇文章主要介紹了Android Bluetooth藍(lán)牙技術(shù)使用流程詳解的相關(guān)資料,需要的朋友可以參考下2016-02-02Android網(wǎng)絡(luò)數(shù)據(jù)開關(guān)用法簡單示例
這篇文章主要介紹了Android網(wǎng)絡(luò)數(shù)據(jù)開關(guān)用法,通過自定義函數(shù)調(diào)用系統(tǒng)服務(wù)實現(xiàn)開關(guān)功能,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06