Flutter
一切皆挂件。如果你想开发一个应用,首先,你得知道你需要使用哪种挂件。每个挂件都有它的状态。
状态是什么?
状态就是在构建小挂件时可以同时读取信息,并且可能在运行时更改信息。简而言之,我们可以说 State
定义了 Widget
的当前属性。
继承 Stateful
挂件的类是不可变的,但是 State
是可变的。
不可变的类 意味着一旦对象被创建,我们不可以改变它的内容。可变的类 是指一旦它被创建,我们还是可以更改它内部的状态。
![stateful_stateless.png Flutter: Stateful 挂件 vs Stateless 挂件_前端](//dev-img.mos.moduyun.com/20231025/eccbc0cd-38d8-47a9-afdf-73de23aa3df8.webp)
应用 Stateful 挂件的步骤
- 通过继承
StatefulWidget
去创建一个类,然后在createState()
方法中返回状态
- 创建
State
类挂件可能在运行时候更改它的值
- 在
State
类中,应用build()
方法
- 调用
setState()
方法。setState()
方法实际上是重绘挂件。
代码示例
![stateful_widgets.png Flutter: Stateful 挂件 vs Stateless 挂件_iOS_02](//dev-img.mos.moduyun.com/20231025/13e17065-8579-4d05-b2f4-ecca48ccec9a.webp)
应用 Stateless 挂件的步骤
- 通过继承
StatelessWidget
去创建一个类
- 为挂件创建一个
build()
方法,在个关键在运行时不更改其内容
-
build()
方法中返回挂件
代码示例
![stateless_widgets.png Flutter: Stateful 挂件 vs Stateless 挂件_前端_03](//dev-img.mos.moduyun.com/20231025/f4c6ea12-1c53-4e9b-99ba-2540e675a84e.webp)
完整的代码和输出
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
);
}
}
class Home extends StatefulWidget{
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home>{
String name = "";
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text("Stateful Widget Vs. Stateless Widget"),
centerTitle: true,
),
body: Center(
child: Container(
width: 300,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter your name',
),
onSubmitted: (String str) {
setState(() {
name = str;
});
},
),
Text("Hello $name!"),
Greet(),
],
),
),
),
),
);
}
}
class Greet extends StatelessWidget{
@override
Widget build(BuildContext context) {
return RaisedButton(
child: Text("Nice to meet you"),
);
}
}
![result_stateful_stateless.png Flutter: Stateful 挂件 vs Stateless 挂件_flutter_04](//dev-img.mos.moduyun.com/20231025/718e4f7b-48c6-48ed-96b9-1f4c8c1a91ab.webp)
本文是译文,采用意译的方式。原文链接 levelup.gitconnected.com/flutter-sta…