Flutter有狀態(tài)組件使用詳解
更新時間:2022年01月16日 16:12:48 作者:s-010101
這篇文章主要為大家詳細介紹了Flutter有狀態(tài)組件的使用,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
有狀態(tài)組件
flutter 主要有分有狀態(tài)組件 StatefulWidget 和無狀態(tài)組件 StatelessWidget,前面我們使用到的都是無狀態(tài)組件,沒有讓頁面上的內容發(fā)生變化,當我們有需要對頁面的內容進行動態(tài)修改的時候 ,如果我們使用無狀態(tài)組件,頁面上的內容就不會被更新,這時需要用到有狀態(tài)組件。
有狀態(tài)組件就是繼承了StatefulWidget的組件,內容更改時調用
setState(() { 更改的內容});
// 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("點擊加一")) ? ? ? ], ? ? ), ? ? ); ? } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。