学习flutter，路由，页面跳转传值，父子组件传参调用方法等
对于这篇文章，是学习flutter时用到的东西用来笔记用，是个人学习时用到的大佬的文章，在这里集合了一下，第二次写废话太多，见谅
刚开始
刚开始的时候，感觉flutter特别扭，但还是硬着头皮去学习。
我是学习web的对于原生开发的东西并不懂，看到flutter官方文档里面关于web开发人员的文章，慢慢的接受了flutter书写页面的方式
链接: flutter中文网.
对于学习时，还有个手机软件 flutter go ，本篇文章适用于记录自己学习时用到的哪些东西，笔记
StatefulWidget和StatelessWidget
对于这两个抽象类，他们两个的区别是一个是有状态，就是有数据的，在页面切换的时候。而另外一个stateless就是无状态。说白了就是如果不需要数据重新改变的就是无状态的，比如页面头部的标题栏，对于从接口里获取的列表数据时有状态的StatefulWidget
MaterialApp
这个是分格组件，安卓的material ios的cupertino 一般我都是用安卓的
ListView(
children: <Widget>[
new BannerWidget(
200.0,
this.bannerList,
bannerPress: (pos, item){
},
),
new LimitWidget(),
new CommonWidget(),
],
);
对于代码里的 child是一些widget自带的，有的则是children，在这里可以写别的widget
对于这些 了解flutterwidget
颜色的使用
对于我这个web小白来说，对于颜色蓝湖上都有带#号的 hex #EE5416,
还有 rgba background:rgba(238,84,22,1);
但是学习的时候 flutter Color.red[100]，
这样的Color.fromARGB(255, 60, 170, 250),
这里的A是透明度的意思 但是我前端用的都是0到1，这样不习惯啊
然后，还有一个 Color.fromRGBO(60, 170, 250, 1)，
o,opacity表示透明度这样的话就解决了，值是0到1
对于怎么使用带#号的，只要报#换成 0xFF就可以了，Color(0xFF3CAAFA),这东西好像是给关于16进制什么的感觉太难就没太深入了解。
对于Color.red[100]这种写法时可以自定义定制的
关于用法
1、Color c1 = Color(0xFF3CAAFA);
2、Color c2 = Color.fromRGBO(60, 80, 150, 1);
3、Color c3 = Color.fromARGB(215, 60, 170, 250);
4、Color c5 = Colors.red;
跳转页面及路由
关于路由
Navigator.push(context, MaterialPageRoute(builder: (context)=>xxxxx()));
返回上一层 Navigator.pop(context);或 Navigator.of(context).pop();
在web中vue使用的时候有时候会用到 replace(this.$router.replace) 关闭当前页面进入下一个页面 然后返回在返回到上上个页面
flutter有个差不多功能的
Navigator.of(context).pushReplacementNamed(’/registerSecond’); //替换路由
那我该怎么传参呢？
Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
return new ThirdPage(title:"请输入昵称");
}))
Navigator.push(
context,
MaterialPageRoute(builder:(context) => xxx(xxx: xxx[xxx]))
);
使用Navigator的pop返回可返回上一级，并携带一个参数
Navigator.pop(context,“携带参数”);
或
Navigator.of(context).pop(xxx);
对于 参数的接收
直接看链接吧
了解了页面传值，下面就是组件之间的了
对于我前端小白，vue父子组件传值 以及父子组件相互调用它们的方法
传值
父组件：
<zizujian :chuan="xxxx" @ziname="suibian"></zizujian> //向子组件传值
/*这里 用@ziname就是子组件$emit方法的第一个参数。。
声明一个方法参数就是子组件返回的值
*/
suibian(zhi){
//zhi
}
sss(){}
//接下来时调用子组件的方法 ref this.$refs.xxx()
子组件：
props:['xxx'] //接受
//子组件给父组件传参时用事件
$emit(ziname,"参数")
xxx(){
}
//调用父组件的方阿飞
this.$parent.sss()
或$emit()
那flutter是怎么弄得呢？
先来 父子组件传值
child: new Column(
children: <Widget>[
new childOne(),
new childTwo(dataTwo: dataTwo,callBack: (value)=>onChanged(value)),
new Container(
padding: new EdgeInsets.only(bottom: 15),
child: new Text('父组件'),
),
new Text('子组件2，传过来的值' + '$data'),
],
),
先看childTwo(dataTwo: dataTwo,callBack: (value)=>onChanged(value)),
这一段，childTwo()；就是一个组件就像刚才vue的
<zizujian></zizujian>
childTwo(dataTwo:dataTwo)里的dataTwo:dataTwo就是需要穿的参数，就像刚才vue的
<zizujian :chuan="xxxx"></zizujian> //里的：chuan="xxx" ,
意思是差不多，当然了两者深度的原理也许不同，但形式上差不多，便于理解才拿来比较
接下里就是子组件接收了，
class childTwo extends StatefulWidget {
childTwo({Key key, this.dataTwo, this.callBack}) : super(key: key);
final callBack;
String dataTwo;
对于dataTwo的值我们可以在 initState中通过widget.dataTwo拿到。
@override
void initState() {
// TODO: implement initState
data = widget.dataTwo;
super.initState();
}
//这里的childTwo({Key key, this.dataTwo}) : super(key: key);就是接受
现在到了这里 父组件给子组件传完了
接下里就是子组件给父组件传了
为什么我用vue的样子和这个flutter的比较，一是我是前端开发的 习惯了vue， 二是 flutter和vue子组件给父组件传值有点像的。
vue用$emit(),
flutter 自定义一个构造方法
子组件里：
这时
childTwo({Key key, this.dataTwo}) : super(key: key);=》
childTwo({Key key, this.dataTwo, this.callBack}) : super(key: key);
final callBack;
String dataTwo
可以调用下面的方法进行传值。
widget.callBack(’$inputText’);
父组件里：
new childTwo(dataTwo: dataTwo,callBack: (value)=>onChanged(value))
里的
void onChanged(val){
setState(() {
data = val;
});
}
new childTwo(dataTwo: dataTwo,callBack: (value)=>onChanged(value))
可以了，下面的连接最好看看，先看第一个
学习时用的连接1
完整连接2
现在，我们父子组件传参完成了，接下来就是 调用父子组件的方法了，但是里面有些东西不懂，先实现功能吧
vue里面可以用ref
父组件调用子组件的方法
下面也是链接的内容，怕万一进不去，就贴出来了
父组件
/*
Key
概念参考前端react和vue中key值的含义，如果列表key不更改，则即便数据又修改视图也没有更改。
ValueKey:以一个值为key。
ObjectKey:以一个对象为key。
UniqueKey:生成唯一的随机数作为key。
PageStorageKey:专用于存储页面滚动位置的key。
GlobalKey每个globalkey都是一个在整个应用内唯一的key。globalkey相对而言是比较昂贵的，如果你并不需要globalkey的某些特性，那么可以考虑使用Key、ValueKey、ObjectKey或UniqueKey。
GlobalKey用途
允许widget在应用程序中的任何位置更改其parent而不丢失其状态。应用场景：在两个不同的屏幕上显示相同的widget，并保持状态相同。
globalkey唯一定义了某个element，它使你能够访问与element相关联的其他对象，例如buildContext、state等。应用场景：跨widget访问状态
*/
import 'package:flutter/material.dart';
import 'package:kjt_bsp/screen/orderEntry/test.dart';
class ParentScreen extends StatefulWidget {
@override
_ParentScreenState createState() => _ParentScreenState();
}
class _ParentScreenState extends State<ParentScreen> {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
ChildScreen(
key: childKey
),
RaisedButton(
onPressed: (){
childKey.currentState.childFunction();
},
child: Text('点击我调用子组件方法'),
)
],
);
}
}
子组件
import 'package:flutter/material.dart';
GlobalKey<_ChildScreenState> childKey = GlobalKey();
class ChildScreen extends StatefulWidget {
ChildScreen({
Key key,
}) : super(key: key);
@override
_ChildScreenState createState() => _ChildScreenState();
}
class _ChildScreenState extends State<ChildScreen> {
@override
Widget build(BuildContext context) {
return Container(
);
}
childFunction(){
print('this is a childFunction');
}
}
子组件调用父组件的方法
对于这个子组件调用父组件的方法
其实
父组件自己定义好传给子组件一个方法，然后 子组件调用
文章链接
这么下来，父子组件的内容就完成了，有的人会说，除了父子组件那万一兄弟组件的传值怎么办？这也是又办法的，vue里面也有，flutter也有，这就自己去百度吧，一般到了按个时候我直接就是用状态管理器了，虽然大材小用，但习惯了
下面的文档是我学习的时候遇到的功能，比如上拉加载，下拉刷新，dio(vue里面可以用ajax，axios，fetch)，状态管理器Provider(听说还可以redux，当时学react的时候感觉这个redux好难，所以用了官方推荐的provider 先会一个再说)
1080
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
