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),
      ),
    );
  }
}
相关推荐
晚霞的不甘5 分钟前
[鸿蒙2025领航者闯关]Flutter + OpenHarmony 性能调优实战:打造 60fps 流畅体验与低功耗的鸿蒙应用
flutter·华为·harmonyos
解局易否结局5 分钟前
UI+Widget:鸿蒙/Flutter等声明式UI框架的核心设计范式深度解析
flutter·ui·harmonyos
豫狮恒6 分钟前
OpenHarmony Flutter 分布式音视频:跨设备实时流传输与协同播放方案
分布式·flutter·wpf·openharmony
500846 分钟前
鸿蒙 Flutter 安全组件开发:加密输入框与脱敏展示组件
flutter·华为·electron·wpf·开源鸿蒙
帅气马战的账号116 分钟前
Flutter 全场景开发实战宝典:组件化架构、性能优化与跨端适配深度解析
flutter
帅气马战的账号119 分钟前
开源鸿蒙×Flutter 跨端融合实践宝典:原生能力深度复用与组件化开发全解析
flutter
豫狮恒19 分钟前
OpenHarmony Flutter 分布式任务调度:跨设备负载均衡与资源优化方案
分布式·flutter·wpf·openharmony
豫狮恒27 分钟前
OpenHarmony Flutter 原子化服务开发实战:轻量、跨端、分布式的全场景落地
flutter·wpf·openharmony
song5012 小时前
鸿蒙 Flutter 支付安全:TEE 可信环境下的支付校验实战
分布式·flutter·百度·重构·交互
遝靑2 小时前
Flutter 从入门到进阶:核心原理与实战开发全解析
flutter