这篇文章主要为大家详细介绍了Flutter有状态组件的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
有状态组件
flutter 主要有分有状态组件 StatefulWidget 和无状态组件 StatelessWidget,前面我们使用到的都是无状态组件,没有让页面上的内容发生变化,当我们有需要对页面的内容进行动态修改的时候 ,如果我们使用无状态组件,页面上的内容就不会被更新,这时需要用到有状态组件。
有状态组件就是继承了StatefulWidget的组件,内容更改时调用
setState(() { 更改的内容});
// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable, prefer_const_literals_to_create_immutables
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Demo'),
),
body: const HomeContent(),
),
theme: ThemeData(
primarySwatch: Colors.yellow,
),
);
}
}
//有状态自定义组件有两个类,我们需要返回的写在第二个类中
class HomeContent extends StatefulWidget {
const HomeContent({Key? key}) : super(key: key);
@override
_HomeContentState createState() => _HomeContentState();
}
class _HomeContentState extends State<HomeContent> {
int count = 0;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
Chip(
label: Text("$count"),
),
ElevatedButton(
onPressed: () {
setState(() {
count++;
});
},
child: Text("点击加一"))
],
),
);
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程学习网。
沃梦达教程
本文标题为:Flutter有状态组件使用详解


基础教程推荐
猜你喜欢
- Android Studio打包H5网址页面,封装成APK 2023-05-04
- iOS触摸事件UITouch应用详解 2023-03-16
- 使用反射机制控制Toast的显示时间 2022-11-01
- IOS开发中使用writeToFile时的注意事项 2023-02-20
- iOS列表上拉(平滑加载数据)自动加载数据的问题解决 2023-07-01
- iOS 把图片保存到相册,并获取图片文件名的实例 2023-04-19
- AndroidStudio4.0日志中文乱码问题 2023-02-26
- Flutter实现App功能引导页 2022-12-04
- iOS提取APP中的图片资源的方法 2023-04-01
- android中adb命令最全总结 2023-04-11