Flutter: Stateful 挂件 vs Stateless 挂件
  4QHOBLSsnlZu 2023年11月02日 57 0

Flutter 一切皆挂件。如果你想开发一个应用,首先,你得知道你需要使用哪种挂件。每个挂件都有它的状态。

状态是什么?

状态就是在构建小挂件时可以同时读取信息,并且可能在运行时更改信息。简而言之,我们可以说 ​​State​​​ 定义了 ​​Widget​​ 的当前属性。

继承 ​​Stateful​​​ 挂件的类是不可变的,但是 ​​State​​ 是可变的。

不可变的类 意味着一旦对象被创建,我们不可以改变它的内容。可变的类 是指一旦它被创建,我们还是可以更改它内部的状态。

Flutter: Stateful 挂件 vs Stateless 挂件_前端

应用 Stateful 挂件的步骤

  1. 通过继承​​StatefulWidget​​​ 去创建一个类,然后在​​createState()​​ 方法中返回状态
  2. 创建​​State​​ 类挂件可能在运行时候更改它的值
  3. 在​​State​​​ 类中,应用​​build()​​ 方法
  4. 调用​​setState()​​​ 方法。​​setState()​​ 方法实际上是重绘挂件。

代码示例

Flutter: Stateful 挂件 vs Stateless 挂件_iOS_02

应用 Stateless 挂件的步骤

  1. 通过继承​​StatelessWidget​​ 去创建一个类
  2. 为挂件创建一个​​build()​​ 方法,在个关键在运行时不更改其内容
  3. ​build()​​ 方法中返回挂件

代码示例

Flutter: Stateful 挂件 vs Stateless 挂件_前端_03

完整的代码和输出

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"),
);
}
}

Flutter: Stateful 挂件 vs Stateless 挂件_flutter_04

本文是译文,采用意译的方式。原文链接 levelup.gitconnected.com/flutter-sta…

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  b1UHV4WKBb2S   2023年11月13日   40   0   0 ide抗锯齿
  b1UHV4WKBb2S   2023年11月13日   37   0   0 裁剪ideflutter
  b1UHV4WKBb2S   2023年11月13日   29   0   0 flutterDart
  zSWNgACtCQuP   2023年11月13日   32   0   0 ide
4QHOBLSsnlZu