flutter text 自动换行_Flutter 系列博客——05 StatelessWidget vs StatefulWidget
前言
上一篇我们对 Flutter UI 有了一个基本的了解。
这一篇我们通过自定义 Widget 来了解下如何写一个 Widget?
然而 Widget 有两个,StatelessWidget 和 StatefulWidget,我们要继承哪一个?
下面让我们跟着文章来探索一番。
目录
1. StatelessWidget
我们先来看下继承的 Widget 为 StatelessWidget 的情况。
第一步:新建一个文件 bold_text.dart
这里文件名后面后缀 .dart 可带可不带
这里文件名后面后缀 .dart 可带可不带
文件名多个单词组成用下划线分隔。
这里我们演示直接在 lib 文件夹下面创建,实际项目记得文件夹结构的组织哦~
第二步:import 系统包
一般自定义 Widget 都要 import 下面的一个包。
import 'package:flutter/material.dart';
IDE 有自动提示和补全功能,因此不用死记硬背。
第三步:自定义一个类继承自 StatelessWidget
一般类名跟文件名一致就可以,采用驼峰格式命名。
import 'package:flutter/material.dart';class BoldText extends StatelessWidget {}
第四步:实现一个需要 override 的方法 build
import 'package:flutter/material.dart';class BoldText extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return null; }}
一般第三步操作之后 IDE 有提示,直接使用快捷修复自动追加 build 代码即可。如下图:
第五步:实现 Widget
上述代码的 TODO 表示我们要在里面实现对应的 Widget。所以我们删除 TODO,然后在写我们要返回的 Widget 来替换 null 即可。
我们写一个单独的方法 _buildWidget 来返回 Widget,同时返回我们之前写的 Text,如下:
import 'package:flutter/material.dart';class BoldText extends StatelessWidget { @override Widget build(BuildContext context) { return _buildWidget(); } Widget _buildWidget() { return Text( 'Hello, world!', textDirection: TextDirection.ltr, textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold), ); }}
可以看到我们这个 Widget 应该会显示成上篇我们界面所见的粗体文本。
但是这里 Hello, world! 写死了,我们要让这个自定义 Widget 通用一些,可以定义一个必传参数文本内容,修改如下:
import 'package:flutter/material.dart';class BoldText extends StatelessWidget { final String data; BoldText(this.data); @override Widget build(BuildContext context) { return _buildWidget(); } Widget _buildWidget() { return Text( data, textDirection: TextDirection.ltr, textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold), ); }}
可以看到我们定义了一个变量,通过构造函数让外部传进来。
这里的 BoldText(this.data); 等价于 Android 下面代码:
BoldText(String data) { this.data = data; }
可以看到 dart 的语法糖简化了写法。具体更多构造函数写法可以查看 dart 官网。
2. 自定义 Widget 使用
我们以之前的 main.dart 为例进行讲解。
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text( 'Hello, world!', textDirection: TextDirection.ltr, textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold), ), ); }}
第一步:导入我们的自定义 Widget 包
相对路径:
import 'bold_text.dart';
绝对路径:
import 'package:my_flutter/bold_text.dart';
上面任选其一即可。主要是相对路径和绝对路径的区别。
第二步:使用
import 'package:flutter/material.dart';import 'bold_text.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: BoldText('Hello, world!'), ); }}
对比可以看到节省了很多代码行,尤其对于有多个地方用到的公共组件更加可以这样处理。
3. StatelessWidget 通用模板
FileName为你文件名的驼峰形式:
import 'package:flutter/material.dart';class FileName extends StatelessWidget { @override Widget build(BuildContext context) { return _buildWidget(); } Widget _buildWidget() { //TODO build your widget }}
4. StatefulWidget
我们再来看下继承的 Widget 为 StatefulWidget 的情况。
第一步:新建 increment.dart 文件
第二步:import 系统包
第三步:自定义一个类继承自 StatefulWidget
第四步:实现一个需要 override 的方法 createState
到这里就有点不一样了。我们先看下目前的代码。
import 'package:flutter/material.dart';class Increment extends StatefulWidget{ @override State createState() { // TODO: implement createState return null; }}
和 StatelessWidget 不一样,这里不是返回 Widget。
我们看下如何操作。
第五步:创建一个类继承 State< T extends StatefulWidget>
这里我们创建 _IncrementState 类继承 State< Increment>,这里尖括号<>里面的类型就是我们一开始写的继承自 StatefulWidget 的类 Increment。
然后我们需要实现一个需要 override 的方法 build。
到这里是不是就是很熟悉了。
直接看代码:
import 'package:flutter/material.dart';class Increment extends StatefulWidget{ @override State createState() { return _IncrementState(); }}class _IncrementState extends State { @override Widget build(BuildContext context) { // TODO: implement build return null; }}
所以接下来的工作就是类似的。
第六步:实现 Widget
参考一开始的例子我们简单写出下面代码:
import 'package:flutter/material.dart';class Increment extends StatefulWidget{ @override State createState() { return _IncrementState(); }}class _IncrementState extends State { int _count = 0; void _incrementCount() { setState(() { _count++; }); } @override Widget build(BuildContext context) { return _buildPage(); } Widget _buildPage() { return MaterialApp( home: Scaffold( body: Center( child : Text('$_count') ), floatingActionButton: FloatingActionButton( onPressed: _incrementCount, tooltip: 'Increment', child: Icon(Icons.add), ), ), ); }}
这里面需要说明的是多了一个新的 Widget FloatingActionButton。
可以看到它是作为 Scaffold 自带的一个属性的。
FloatingActionButton 讲解:
onPressed 后面是这个按钮点击之后会回调的一个方法。
tooltip 是长按之后会显示的提示文字。
child 是这个按钮显示的图标。
我们修改 main.dart 文件如下,看下效果:
import 'package:flutter/material.dart';import 'increment.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Increment(); }}
效果如下:
这里重点的代码是下面:
setState(() { _count++;});
它表示将数字加一之后更新界面。
需要更新界面时需要调用 setState 方法。
更新数据源可以在 setState 方法里面写。
5. StatefulWidget 通用模板
FileName为你文件名的驼峰形式,_FileNameState 里面的 FileName 也是哦~
import 'package:flutter/material.dart';class FileName extends StatefulWidget{ @override State createState() { return _FileNameState(); }}class _FileNameState extends State { @override Widget build(BuildContext context) { return _buildPage(); } Widget _buildPage() { //TODO build your widget }}
到了这里你回过头去看新建 Flutter 项目时自动创建的 main.dart 文件就看得懂了。
6. StatelessWidget vs StatefulWidget
好了,上面讲解完了 StatelessWidget 和 StatefulWidget,相信大家应该知道如何自定义一个 Widget 了,也知道如何在其他页面引入了。
但是我们实际上在使用的时候到底是要继承 StatelessWidget 还是 StatefulWidget 呢?
其实根据名称可以看出取决于你这个 Widget 是有状态还是无状态?
不过「状态」这个词也不是好理解。
所以笔者是这样来区分使用 StatelessWidget 还是 StatefulWidget的?
看界面是否需要更新
比如我们上面的例子,点击按钮文本更新了,所以我们选择了 StatefulWidget。
而第一个只是字体调整,界面渲染之后不再需要更新了,所以我们选择了 StatelessWidget。
所以我们可以认为当界面需要更新时,我们的自定义 Widget 就要继承 StatefulWidget 而不是 StatelessWidget。
更多阅读:
Flutter 即学即用系列博客——01 环境搭建
Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明
Flutter 即学即用系列博客——03 在旧有项目引入 Flutter
Flutter 即学即用系列博客——04 Flutter UI 初窥
flutter text 自动换行_Flutter 系列博客——05 StatelessWidget vs StatefulWidget相关推荐
- flutter text 自动换行_Flutter 即学即用——05 StatelessWidget vs StatefulWidget
前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 ...
- Flutter 即学即用系列博客——09 MethodChannel 实现原生与 Flutter 通信(二)
前言 上一篇我们讲解了如何通过 EventChannel 实现 Android -> Flutter 的通信. 并且也看到了 Flutter 内部 EventChannel 源码也是对 Meth ...
- flutter 返回指定界面_Flutter 即学即用系列博客——04 Flutter UI 初窥
前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutte ...
- 从单片机开发转向Linux开发系列博客五:Nand Flash根文件系统制作
版本 作者 参与者 日期 备注 V1.0 wuya(微信号:wangwenxue1989) 2019/05/17 创建 1.引言 之前系列的文章介绍了如何编译Uboot.Kernel以及使用默认的ra ...
- SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客(二十三)
系列文章目录 系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
- RecBole小白入门系列博客(二) ——General类模型运行流程
RecBole小白入门系列博客(二) --General类模型运行流程 写在前面 选定模型 设置模型超参数 选定数据集 数据集基本格式 设置数据集参数 设置训练参数 设置评测参数 总结参数设置 运行 ...
- LINQ之路系列博客后记
缘起 今年3月,我换了工作单位.后来多次收到公司的新人培训邮件,不过对此我并不感冒,说实话并不喜欢这种活动.印象中,新人培训无非是唠叨些公司的规章制度.侃述一下公司的光辉历史还有灿烂的未来发展等等.规 ...
- SpringCloud系列博客父工程xml依赖
SpringCloud系列博客父工程xml依赖 <?xml version="1.0" encoding="UTF-8"?><project ...
- 大数据系列博客之 --- 深入简出 Shell 脚本语言(提升篇)
首先声明,此系列shell系列博客分为四篇发布,分别是: 基础篇:https://www.cnblogs.com/lsy131479/p/9914747.html 提升篇:https://www.cn ...
最新文章
- php error 关闭,php error_reporting()关闭报错
- sqlserver ssms ctrl+e快捷键问题
- extjs之TypeError: d.read is not a function解决方案
- 关于Storm Tick
- php判断是否是文件_PHP判断文件是否为图片文件的方法总结
- Wicket模型的干净方法
- Jmeter连接Mysql
- HTML5css3学习总结(2)
- 阿里影业宣布新战略:“新基础设施”赋能电影产业
- sublime php错误提示,sublime中检查php语法错误
- android google snake
- linux valgrind 编译,valgrind 3.9交叉编译
- 最大熵模型中的数学推导
- vant 调取上传照片
- 计算机文档我的文档丢失,我的文档不见了
- SEO快速建站,八部曲
- js和cs的值相互传递和函数的相互调用
- 全球与中国机器人贴标机市场深度研究分析报告
- 百度变更使命后首个政府AI合作落地:在李彦宏老家
- 学习c语言第一步安装软件
热门文章
- ClickOnce Cannot download the application解决方法
- MySQL重安装,安装到最后出现Er1045的解决方法
- python--openpyxl模块使用, 对excel表格的操作
- bzoj3771: Triple
- 设计模式(十三): 命令模式
- Handler基本概念
- MFC中使用自定义消息 .
- 一个项目涉及到的50个Sql语句
- 大数据_Spark框架_快速上手_word count 案例-功能实现---Spark工作笔记0007
- K8S_Google工作笔记0007---通过kubeadm方式_部署node节点和集群测试