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),
      ),
    );
  }
}
相关推荐
加农炮手Jinx7 小时前
Flutter for OpenHarmony:pub_updater 命令行工具自动更新专家(DevOps 运维必备) 深度解析与鸿蒙适配指南
android·运维·网络·flutter·华为·harmonyos·devops
风华圆舞9 小时前
鸿蒙构建失败时,先查 Flutter 还是先查 Hvigor
flutter·华为·harmonyos
风华圆舞12 小时前
MethodChannel 在 Flutter 与 ArkTS 之间是怎么工作的
flutter·华为·harmonyos
恋猫de小郭12 小时前
Flutter 又为 AI 时代添砖加瓦:全新 ComponentLibrary 提议
android·前端·flutter
G_dou_12 小时前
Flutter三方库适配OpenHarmony【prime_checker】质数检测器项目完整实战
flutter·harmonyos
G_dou_12 小时前
Flutter三方库适配OpenHarmony【random_joke】随机笑话应用项目完整实战
flutter·harmonyos
MemoriKu12 小时前
Flutter 相册 APP 视频模态稳定化实战:从远端重构冲突到真机 Smoke Test
人工智能·python·flutter·机器学习·重构·音视频·新人首发
风华圆舞12 小时前
鸿蒙 Flutter 平台通道设计:为什么一项能力一个 channel
flutter·华为·harmonyos
BreezeDove12 小时前
【Android】Flutter命令超时无响应问题
android·flutter