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),
      ),
    );
  }
}
相关推荐
2501_9462447812 小时前
Flutter & OpenHarmony OA系统设置页面组件开发指南
开发语言·javascript·flutter
l1340620823518 小时前
Flutter Geocoding 在鸿蒙上的使用指南
flutter·华为·harmonyos
AiFlutter18 小时前
三、内容展示(02):图片
flutter·低代码·低代码平台·aiflutter·aiflutter低代码
l1340620823519 小时前
344.在鸿蒙上使用 animations Flutter 包的指南
flutter·华为·harmonyos
2501_9462447820 小时前
Flutter & OpenHarmony OA系统底部导航栏组件开发指南
android·javascript·flutter
2501_9444460021 小时前
Flutter&OpenHarmony字体与排版设计
android·javascript·flutter
消失的旧时光-194321 小时前
mixin 写一个 Flutter 的“埋点 + 日志 + 性能监控”完整框架示例
android·flutter
消失的旧时光-194321 小时前
Flutter 工程中 mixin 的正确打开方式:5 种高质量设计范式 + mixin vs 继承 vs 组合 + 为什么它比 BasePage 更优雅
前端·flutter·架构
消失的旧时光-19431 天前
Flutter 中 mixin 的完整认知体系——从原理、范式、架构选择到反模式(工程实战版)
flutter·架构
2501_946244781 天前
Flutter & OpenHarmony OA系统下拉刷新组件开发指南
开发语言·javascript·flutter