学习flutter的笔记，web开发人员学习-CSDN博客

学习flutter，路由，页面跳转传值，父子组件传参调用方法等

对于这篇文章，是学习flutter时用到的东西用来笔记用，是个人学习时用到的大佬的文章，在这里集合了一下，第二次写废话太多，见谅

刚开始

刚开始的时候，感觉flutter特别扭，但还是硬着头皮去学习。
我是学习web的对于原生开发的东西并不懂，看到flutter官方文档里面关于web开发人员的文章，慢慢的接受了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

flutter插件库

颜色的使用

对于我这个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');
    }
}