flutter 框架 之 dart语言基础学习(三) 路由传值与资源管理,包管理

2020-05-05   77 次阅读


前言

本次博客的内容是在官方文档学习flutter路由传值时记下的笔记
(不过到现在还没讲到UI设计,好多组件都看不懂真的难受)

1.路由传值

很多时候在路由跳转的时候我们需要带一些参数,在上一篇学习笔记中我有提到了Navigator的push函数的一个特性

bool pop(BuildContext context, [ result ])
话u不过栈顶路由出栈,result为页面关闭时返回给上一个页面的数据

因此这个result参数可以作为新旧路由的传递媒介
按照官方教程撰写了路由传值的测试界面
主测试界面

class RouterTestRoute extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Center(
      child:RaisedButton(
        onPressed: ()async {
          var result = await Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context){
                return TipRoute(
                  text:"我是提示",
                );
              },
            ),
          );
          print("路由返回值: $result");	//在控制台中打印从副界面得到的result值
        },
        child: Text("打开警告页"),
      )
    );
  }
}

测试副页面(请忽略这撇脚的缩进)

class TipRoute extends StatelessWidget{
  TipRoute({
    Key key,
    @required this.text,
}) : super(key:key);
  final String text;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar:AppBar(
        title: Text("warning"),
      ),

    body:Padding(
    padding: EdgeInsets.all(18),
    child: Center(
    child: Column(
    children: <Widget>[
      Text(text),
    RaisedButton(
    onPressed: ()=>Navigator.pop(context,"I am the return"),    //返回后,将向主页面传送字符串"I am the return"
    child: Text("返回"),
    )
    ],
    ),
    ),
    ),
    );
  }
}

主界面效果图
31.PNG
副页面效果图
32.PNG
控制台输出(回传值)
33.PNG

2.路由命名

可以给路由命名,这样每次可以通过Navigator的一个函数直接通过名字来进行路由,前提是需要在MaterialApp中构造一张路由表

路由表如下

 routes: {
        "new_page":(context) => NewRoute()
      },

路由表在代码块中的位置
34.PNG
这样的话就可以修改第一个路由跳转界面中的Navigator函数了
修改前

FlatButton(
              child: Text("click here for more information"),
              textColor: Colors.red,
              onPressed: (){
                Navigator.push(context, MaterialPageRoute(builder: (context){
                  return NewRoute();
                }));
              },
            ),

修改后

FlatButton(
              child: Text("click here for more information"),
              textColor: Colors.red,
              onPressed: (){
                Navigator.pushNamed(context,"new_page");
              },
            ),

修改完后进行测试,仍然可以正常跳转

3.路由总结

最好使用命名路由

  • 语义化更明确
  • 代码更好维护,倘若使用匿名路由,必须在调用Navigator.push的地方创建路由页
  • 可通过 路由生成钩子onGenerate来做一些全局路由跳转前处置处理逻辑

4.包管理

flutter使用pubspec.yaml配置文件来管理第三方依赖包
YAML是一种直观的,可读性高且容易被人类阅读的文件格式

  • name:应用或者包的名称
  • description:应用或者包的描述
  • version:应用或者包的版本号
  • dependencies:应用或者包依赖的其他包或者插件
  • dev_dependencies: 开发环境依赖的工具包

在文件pubspec.yamlcupertino_icons: ^0.1.2字段后面输入想要添加的包,然后点击Pub get,Pub就会自动在库中寻找,如果寻找到了应该就会进行下载

5.资源管理

资源包括JSON文件,配置文件,图片和图标(JPEG , WebP , GIF , PNG , BMP , WBMP)

同样也是使用pubspec.yaml配置文件
其中有个assets:后面用于添加各种资源
为啥没有呢,因为它被注释掉了
36.PNG

因此将后三行注释去掉就行了(真正的注释别去了,哈哈)
但是如果添加的资源不存在,就会出现如下报错,因此一定要确保资源位置与名字的正确啊
37.PNG

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议