Flutter子组件调用父组件方法修改父组件参数
子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数。看一下效果图
父级组件实现
在父级组件中写一个_editParentText的方法来修改组件中的contentText值,并在引入子组件的时候传入该方法
class PageParent extends StatefulWidget {
@override
_PageParentState createState() => _PageParentState();
} class _PageParentState extends State<PageParent> {
String contentText; @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('父级组件'),
),
body: Container(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Text('这里是父级组件参数',),
Text('${contentText}',style: TextStyle(color: Colors.red),)
],
),
),
PageChildren(editParentText: (editText) => _editParentText(editText)) // 给子组件传入_editParentText()方法
],
),
),
);
}
// 修改contentText参数
_editParentText(editText) {
setState(() {
contentText = editText;
});
} }
子级页面是实现
在子级页面中定义一个editParentText用于接收父级传过来的方法,然后直接通过widget.editParentText('传回的参数')即调用父级组件的_editParentText方法
class PageChildren extends StatefulWidget {
final editParentText;
const PageChildren({Key key, this.editParentText}) : super(key: key);
@override
_PageChildrenState createState() => _PageChildrenState();
} class _PageChildrenState extends State<PageChildren> {
TextEditingController _controller = TextEditingController();
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
color: Colors.grey,
child: Column(
children: <Widget>[
Text('这里是子级组件'),
Container(
width: 200,
color: Colors.white,
margin: EdgeInsets.symmetric(vertical: 30),
child: TextField(
controller: _controller,
),
),
RaisedButton(
child: Text('修改参数'),
onPressed: (){
setState(() {
widget.editParentText(_controller.text); // 调用父级组件方法
});
},
)
],
),
);
} }
Flutter子组件调用父组件方法修改父组件参数的更多相关文章
- element-ui(或者说Vue的子组件)绑定的方法中传入自定义参数
比如el-upload中的 :on-success= fn,其实是给组件el-upload传递一个prop,这样写的话fn只能接受upload组件规定的参数,如果想自己传递父组件中的参数比如b,要写成 ...
- 关于Vue中,父组件获取子组件的数据(子组件调用父组件函数)的方法
1. 父组件调用子组件时,在调用处传给子组件一个方法 :on-update="updateData" 2. 子组件在props中,接收这个方法并声明 props: { onUp ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- 14. VUE 子组件修改父组件的值
在 Vue 当中,父组件 -> 子组件 传值,都是通过属性的形式传递的. 子组件 修改 传递数据 直接操作父组件传递过来的值,用是可以用的,但是打开控制台后,会发现 Vue 有个警告:你不要直接 ...
- vue+Elment-UI,修改element组件样式
在用vue开发项目过程中,我们总是避免不了的会使用到elementUI,它里面提供的一些组件都为我们的开发带来了很大的便利,但是,当有时候我们需要使用这些组件的同时又要修改下组件的UI样式的话,我们该 ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- C#方法中的各类参数
居家隔离的第26天,还在持续的疫情着实让人担忧,看着每天新增的确认人数数字,也在为那些家庭祝福,每当想想那不是一个数字是一条条鲜活的生命时就格外沉重.利用闲在家里的时间巩固C#语言的一个难点.最近在温 ...
- 使用vuex实现父组件调用子组件方法
曲线救国. 核心原理就是父子共用一个vuex对象,且看代码: 父组件parent.vue <template> <div class="wrap"> < ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
随机推荐
- vue-cli3 使用雪碧图
//vue.config.js const path = require("path"); const SpritesmithPlugin = require("webp ...
- sql计算两个时间之间的差,并用时分秒表示
这是自己写的方法,总觉得会有更好的办法实现这个效果呢? SELECT then ))))+'秒' then )))+'秒' then ))+'秒' else CONVERT(nvarchar,DATE ...
- JAVA 泛型 通配符? extends super限定,实例区分extends super限定的作用用法
java泛型中的关键字 ? 表示通配符类型 <? extends T> 既然是extends,就是表示泛型参数类型的上界,说明参数的类型应该是T或者T的子类. <? super T& ...
- linux同步onedrive文件
定时任务 # 开机自启动 @reboot /root/system/start.sh # 从零点开始每小时执行一次任务 0 0 0/1 * * ? nohup rclone sync onedrive ...
- httpd源码编译安装
什么是编译安装——编译:将源代码变为机器可执行的代码文件.安装:将可执行文件安装到操作系统里,才可以使用. 一.下载httpd源码包 在官网上下载httpd源码包http://httpd.apache ...
- SVN将项目代码加入svn版本控制
将已有项目代码加入svn版本控制 - TortoiseSVN入门篇Windows下SVN实用教程(以TortoiseSVN作为客户端(client)) 翻译: Bravo Young Next: 版本 ...
- Zabbix监控平台搭建部署与概述
zabbix 是一个基于 WEB 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix 能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位 ...
- less网站
less中文网站:http://lesscss.cn/ 旧版的:http://www.bootcss.com/p/lesscss/
- NLP学习(2)----文本分类模型
实战:https://github.com/jiangxinyang227/NLP-Project 一.简介: 1.传统的文本分类方法:[人工特征工程+浅层分类模型] (1)文本预处理: ①(中文) ...
- B-Tree目录和Hash索引的区别
Hash 索引结构的特殊性,其检索效率非常高,索引的检索可以一次定位,不像B-Tree 索引需要从根节点到枝节点,最后才能访问到页节点这样多次的IO访问,所以 Hash 索引的查询效率要远高于 B-T ...