学习flutter的笔记,web开发人员学习

学习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

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');
    }
}

子组件调用父组件的方法
对于这个子组件调用父组件的方法

其实
父组件自己定义好传给子组件一个方法,然后 子组件调用
文章链接

这么下来,父子组件的内容就完成了,有的人会说,除了父子组件那万一兄弟组件的传值怎么办?这也是又办法的,vue里面也有,flutter也有,这就自己去百度吧,一般到了按个时候我直接就是用状态管理器了,虽然大材小用,但习惯了

下面的文档是我学习的时候遇到的功能,比如上拉加载,下拉刷新,dio(vue里面可以用ajax,axios,fetch),状态管理器Provider(听说还可以redux,当时学react的时候感觉这个redux好难,所以用了官方推荐的provider 先会一个再说)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值