Flutter有状态组件使用详解
时间：2023-03-07 09:33:42|栏目：Android代码|点击： 次
有状态组件
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("点击加一"))
],
),
);
}
}
