Flutter有状态组件StatefulWidget

当继承StatelessWidget组件时,在组件中更新数据时页面不会立即刷新。

如果继承StatefulWidget时,只要在setState方法中更新数据后页面会实时更新数据。

Flutter有状态组件StatefulWidget

完整代码:

Dart 复制代码
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const _HomePageState();
  }
}

///StatefulWidget:状态组件,改变页面数据状态
class _HomePageState extends StatefulWidget {
  const _HomePageState();

  @override
  State<_HomePageState> createState() => _HomePageStateState();
}

class _HomePageStateState extends State<_HomePageState> {
  final List<String> _list = ["数据一", "数据二", "数据三"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: _list.map((v) {
          return ListTile(title: Text(v));
        }).toList(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _list.add("新增数据");
          });
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}
相关推荐
程序猿阿伟11 小时前
《社交应用动态表情:RN与Flutter实战解码》
javascript·flutter·react native
明似水11 小时前
Flutter 开发入门:从一个简单的计数器应用开始
前端·javascript·flutter
周胡杰11 小时前
组件导航 (Navigation)+flutter项目搭建-混合开发+分栏
数码相机·flutter·华为·电脑·harmonyos·鸿蒙
初遇你时动了情11 小时前
flutter flutter run 运行项目卡在Running Gradle task ‘assembleDebug‘...
flutter
初遇你时动了情16 小时前
flutter 配置 安卓、Ios启动图
android·flutter·ios
程序猿阿伟18 小时前
《云端共生体:Flutter与AR Cloud如何改写社交交互规则》
flutter·ar·交互
lpfasd12319 小时前
Flutter与Kotlin Multiplatform(KMP)深度对比及鸿蒙生态适配解析
flutter·kotlin·harmonyos
WDeLiang20 小时前
Flutter - UIKit开发相关指南 - 线程和异步
flutter·ios·dart
TE-茶叶蛋2 天前
Uniapp、Flutter 和 React Native 全面对比
flutter·react native·uni-app
只可远观2 天前
Flutter目录结构介绍、入口、Widget、Center组件、Text组件、MaterialApp组件、Scaffold组件
前端·flutter