Flutter开发 StatelessWidget与StatefulWidget基本了解

StatelessWidget

StatelessWidget应用于Widget不会再运行时发生变化的场景。

dart 复制代码
void main() {
  runApp(MyPage());
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("标题栏")),
        body: Center(child: Text("2222222")),
      ),
    );
  }
}

StatefulWidget

应用于Widget会在运行时发生变化的场景。例如,从网路请求数据进行展示。

1.StatefulWidget要与State一起使用,StatefulWidget的createState方法,要返回一个State。

2.更新数据要setState方法

下面这个例子,点击button,修改文本内容。

dart 复制代码
void main() {
  runApp(MyPage());
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FulPage(),
    );
  }
}

class FulPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyState();
  }
}

class MyState extends State {
  String info = "默认文字";


  void  showInfo(){

    setState(() {

      info ="变变变";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("修改文字")),
      body: Text(info),
      floatingActionButton: FloatingActionButton(
        onPressed: () {

          showInfo();
        },
        child: Icon(Icons.print),
      ),
    );
  }
}
相关推荐
aqi008 小时前
鸿蒙版本的电子书阅读APP开放源码啦
android·华为·ai编程·harmonyos·鸿蒙
墨天梦8 小时前
B19_SunnyWeather到阅读客户端
android·kotlin
美狐美颜sdk9 小时前
直播APP源码可以直接接入视频美颜sdk吗?技术方案详解
android·人工智能·音视频·美颜sdk·直播美颜sdk
yuanlaile11 小时前
2026年全新Flutter 跨平台开发全栈学习资料整理
flutter·getx·鸿蒙 next·flutter开发鸿蒙·flutter入门实战·flutter全栈
用户693717500138412 小时前
2026,程序员的时代拐点到了
android·前端·后端
浪潮IT馆14 小时前
Android Studio 非最新版本下载安装教程
android·ide·android studio
xiaozongt198915 小时前
MasterGo + Claude Code 生成 Android 布局:完整实践指南
android
Anhty16 小时前
2026最新免费手机音频处理工具 !!
android·功能测试·ios·智能手机·音视频
2501_9159090618 小时前
iOS应用从开发到上架App Store的完整发布流程与步骤指南
android·ios·小程序·https·uni-app·webview
狗凯之家源码网19 小时前
AI 步数修改提交系统源码应用场景与落地指南
android·数据库·人工智能·运动步数