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),
      ),
    );
  }
}
相关推荐
初遇你时动了情6 小时前
uniapp/flutter中实现苹果IOS 26 毛玻璃效果、跟随滑动放大动画
flutter·ios·uni-app
listhi52010 小时前
Vue.js 3的组合式API
android·vue.js·flutter
起风了___11 小时前
Flutter 多端音频控制台:基于 audio_service 实现 iOS、Android 锁屏与通知中心播放控制
前端·flutter
leinchu14 小时前
Flutter + Codebuddy的坑
flutter
安卓开发者15 小时前
第4讲:理解Flutter的灵魂 - “Everything is a Widget”
开发语言·javascript·flutter
起风了___16 小时前
Flutter 全局音频播放单例实现(附完整源码)——基于 just_audio 的零依赖方案
前端·flutter
DreamMachine16 小时前
Flutter 开发的极简风格音乐播放器
前端·flutter
星释1 天前
鸿蒙Flutter三方库适配指南:08.联合插件开发
flutter·华为·harmonyos
星释1 天前
鸿蒙Flutter三方库适配指南:06.插件适配原理
flutter·华为·harmonyos
小蜜蜂嗡嗡1 天前
【flutter报错:Build failed due to use of deprecated Android v1 embedding.】
android·flutter·embedding