快捷導(dǎo)航

Flutter有狀態(tài)組件使用詳解

更新時(shí)間：2022年01月16日 16:12:48 作者：s－010101

這篇文章主要為大家詳細(xì)介紹了Flutter有狀態(tài)組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

有狀態(tài)組件

flutter 主要有分有狀態(tài)組件 StatefulWidget 和無狀態(tài)組件 StatelessWidget，前面我們使用到的都是無狀態(tài)組件，沒有讓頁面上的內(nèi)容發(fā)生變化，當(dāng)我們有需要對頁面的內(nèi)容進(jìn)行動態(tài)修改的時(shí)候，如果我們使用無狀態(tài)組件，頁面上的內(nèi)容就不會被更新，這時(shí)需要用到有狀態(tài)組件。
有狀態(tài)組件就是繼承了StatefulWidget的組件，內(nèi)容更改時(shí)調(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)自定義組件有兩個(gè)類，我們需要返回的寫在第二個(gè)類中
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("點(diǎn)擊加一"))
? ? ? ],
? ? ),
? ? );
? }
}