定义好一个有状态(或无状态)的组件之后,需要为其传递一些参数,希望组件能够更加灵活使用。那么,在 Flutter 中如何为其传递参数呢?

以下是 StatefulWidget 传递值的步骤,一共三步:

1、类中定义 final 全局变量;

class QYInput extends StatefulWidget {
final int minLines;
}

2、构造函数中初始化变量;

class QYInput extends StatefulWidget {
final int minLines; const QYInput({Key? key, this.minLines = 1}) : super(key: key);
}

3、继承于 State 抽象类中通过 widget.xxx 调用变量。

class _QYInputState extends State<QYInput> {
@override
Widget build(BuildContext context) {
return TextField(minLines: widget.minLines);
}
}

注意:如果 TextFiled 组件前加上了 const 关键字,极有可能出现调用 StatefulWidget 组件的参数时(widget.xxx)报 Invalid Constant Value的错误,详细请查看博客文章。

如何给 Flutter 有状态组件(StatefulWidget)传参?的更多相关文章

  1. js 实现vue—引入子组件props传参

    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...

  2. 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作

    父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  3. vue非父子组件间传参问题

    最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...

  4. Vue的组件及传参

    目录 Vue的组件及传参 Vue组件的概念 根组件 子组件(局部组件) 父组件向子组件传值 子组件向父组件传值 Vue的组件及传参 Vue组件的概念 我们首先要知道组件的概念,实际上每一个组件都是一个 ...

  5. react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)

    第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...

  6. StatelessWidget 无状态组件 StatefulWidget 有状态组件 页面上绑定数据、改变页面数据

    一.Flutter 中自定义有状态组件 在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget. StatelessWidget ...

  7. webpack+vue 组件间传参(单一事件中心管理组件通信--$root),如果有路由的话会失效

    先给一个例子: <body> <div id="box"> <com-a></com-a> <com-b></co ...

  8. Vue.js父与子组件之间传参

    父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...

  9. vue 父子组件之间传参

    父组件中有子组件 msg 为父组件向子组件传的内容,  子组件向父组件传参数 子组件:this.$emit("shownumber",[this.num]);//this.$emi ...

随机推荐

  1. Python数据分析--Numpy常用函数介绍(5)--Numpy中的相关性函数

    摘要:NumPy中包含大量的函数,这些函数的设计初衷是能更方便地使用,掌握解这些函数,可以提升自己的工作效率.这些函数包括数组元素的选取和多项式运算等.下面通过实例进行详细了解. 前述通过对某公司股票 ...

  2. 解决WIN7无法安装高版本Node.js问题

    网上很多文章都让去安装低版本node 由于业务需求,低版本node npm 有一些包支持的不好 npm出cb() never call 本着更新npm 顺带弄个高版本的node 单独更新npm npm ...

  3. bootstrap 4.0 dropdown 找不到popper.js 的解决方案

    最近项目中升级bootstrap 由3.3.7版 升了4.0版本 发现 dropdown 找不到popper.js 解决办法:npm install -save popper 下载完之后,查看node ...

  4. SpringBoot之:SpringBoot中使用HATEOAS

    目录 简介 我们的目标 构建Entity和Repository 构建HATEOAS相关的RepresentationModel 构建Controller HATEOAS的意义 总结 简介 HATEOA ...

  5. 26.MySQL数据库基础

    MySQL数据库基础 目录 MySQL数据库基础 数据库的概念 数据 表 数据库 数据库的管理系(DBMS) 数据库系统 访问数据库的流程 数据库系统发展史 当今主流数据库介绍 关系数据库 关系数据库 ...

  6. SAP 日期计算

    1. CONVERSION_EXIT_IDATE_OUTPUT     INPUT:      20200601     OUTPUT:   03FEB2008 2. CONVERT_DATE_TO_ ...

  7. babeljs源码

    babel.min.js!function(e,t){"object"==typeof exports&&"object"==typeof mo ...

  8. Java实现无界面计算器

    ## 要求### 1.四个方法加减乘除### 1.循环加switch### 1.传递2个数源码如下: ``` public class Jisuanqi { public static void ma ...

  9. 训练一个图像分类器demo in PyTorch【学习笔记】

    [学习源]Tutorials > Deep Learning with PyTorch: A 60 Minute Blitz > Training a Classifier   本文相当于 ...

  10. 数据访问 - EntityFramework集成

    前言 Masa提供了基于EntityFramework的数据集成,并提供了数据过滤与软删除的功能,下面我们将介绍如何使用它? MasaDbContext入门 安装.Net 6.0 新建ASP.NET ...