美文网首页
Flutter:从0到1构建大前端应用学习笔记

Flutter:从0到1构建大前端应用学习笔记

作者: 老西子 | 来源:发表于2020-04-16 10:53 被阅读0次

    基础组件是组建的鼻祖Container、Row、Column在官方文档里都是基础组件
    Container属于单一子元素的组件(Single-child)
    Row、Column属于多子元素的组件(Multi-child)

    基础组件 (Basic widgets)

       //Text
        //Icon
          在Flutter系统自带的图标里,有如下几种
          Icons.access_alarm,
          Icons.search,
          Icons.movie
    
    Image
        //加载跟本地图片Image(image: AssetImage("images/image_icon.png"),width:50.0),
        //加载网络图片Image(image:NetworkImage("https://www.sxwfApp.com.cn/templates/images/img_logo.jpg"),width:120.0,)
        //还支持Image.file、Image.menmory的方式加载。图片加载可以使从本地、网络、内存、文件等,每种方式继承了各自的ImageProvider。
    //Button
        //常用的有RaisedButton(有水波纹有背景)
        //Flatbutton(扁平无背景)
        //IconButton(图片)
        //FloatingActionButton(圆形导航类一般一个页面有一个做分享分页使用)
        //OutlineButton(有边框,点击时边框背景会变成高亮状态)
        //...
    //ImageIcon
    

    单一子元素组件(Single-child)

    3.2.1 Container是在Flutter中使用最多的
    3.2.3 SingleChildScrollView负责滚动的组件,里面只能嵌套一个组件,相当于Android中的ScrollView
    3.2.4 FittedBox负责对组件进行缩放和位置调整。
    fit 缩放方式 alignment 对齐方式
    3.2.5 FractionallySizedBox 缩放大小可能超出其父组件的设置。
    3.2.6 ConstrainedBox 一种有约束限制的布局,在其约定范围内,最大高度、最小宽度其子组件不可逾越。
    3.2.7 Baseline 是一种基线对其方式,它可以把不相关的几个组件设置在同一条水平线上进行对其。

    3.3 多子元素组件(Multi-child)

    Scaffold 是基于Material库的一个与路由相关的、良好的“结构体”,它可以被认为是Flutter为我们提供的一个标准化的布局容器。
    //Appbar 即App的顶部导航栏,用于控制App的路由、显示标题栏,以及显示右侧的一些操作栏。其绘制区域一般位于屏幕顶端。
    //Row 水平方向
    //Column 垂直方向
    //ListView 和Android中的ListView、RecycleView有些相似,作用都是可滚动项的线性列表,里面放着相关组件的集合。
        // 构建方式:
            // (1)ListView 最传统的创建方式
            // (2)ListView.builder 用于创建重复子项布局
            // (3)ListView.custom 实现ListView自定义功能
            // (4)ListView.separated 用来分割的
    //GridView  网格形式的列表(运用得当能做出非常漂亮的界面)
    //CustomScrollView 嵌套滚动列表使用
    //Flex 弹性布局(柔性)
    //Wrap 具有自动换行的包裹
    
    //Stack
    //IndexedStack
    //Flow
    //Table
    //CustomMultiCHildLayout
    

    状态管理

    //Flutter 一切皆组件,而组件Widget主要被划分成StatelessWidget和StatefulWidget
    //Widget树
    //Context 标识组件上下文,Widget的一部分,每一个Context只对应一个Widget。
    //3.4.4 StatelessWidget 无状态的Widget。
    //3.4.4 StatefulWidget 有状态的Widget。
    3.4.5 StatefulWidget由两部分组成,第一部分为主体部分,第二部分是以_开头,标识私有的,可通过widget.{}格式访问第一部分的内容
    3.4.6 State 是对StatefulWidget的行为和布局的描述,和StatefulWidget存在一一对应的关系。

    State生命周期:
    • 首次启动:initState > didChangeDependencies > build。
    • 热重载:reassemble > didUpdateWidget > build(reassemble只在debug模式下生效)。
    • 界面跳转时:deactivate > didChangeDependencies > build。
      3.4.8Widget 的唯一身份标识:key
      - 在Flutter里,每一个Widget都具有唯一标识,并且这个唯一标识是在FlutterFramework层创建和渲染时生成的,它就是key。如果key作为参数传入到Widget里面,则会根据指定的名字生成key。
      -有些场景下你需要保存key,并且通过key访问Widget。这时,可以通过GlobalKey、LocalKey、UniqueKey或ObjectKey进行保存。

    3.4.9 InheritedWidget :是一个比较特殊的组件,它被定义为父节点。被InheritedWidget暴露出来的数据,可以高效的从Widget树中从上往下传递和共享,并支持跨级数据传递。

    3.5 包管理

    一个完整的应用或多或少会使用一些第三方包(包是为应用服务的)。

    第四章 事件处理

    4.1原始指针事件
    (手指按下-手指移动-手指抬起)
    需要指出的是,在手指按下之后,Flutter Framework层是通过命中测试(Hit Test)获取到当前手指触摸的操作区域的,然后找到对应的Widget。
    4.1.1基本用法
    原始指针具体的用法是把Listener包裹在需要监听的组件外来实现的。
    4.1.2忽略事件
    IgnorePointer:此节点和其子节点都将忽略点击事件,用ignoring参数区分是否忽略
    AbsorbPointer: 这个控件本身能够响应点击事件,阻止事件传播到它的子节点上去。
    4.2GestureDetector:更强大的手势识别组件,支持缩放、双击、垂直、水平等补充手势。
    4.2.1基本用法
    GestureDetector通常作为父Widget包裹在一个子Widget外面,它是组件的一种,可以通过onTap回调实现点击。
    4.2.2常用事件
    4.2.3拖拽和缩放效果
    4.2.4事件竞争与手势冲突
    4.2.5手势识别器(GestureRecognizer)是GestureDetector的一部分
    4.3事件原理与分发机制
    4.4事件通知 和 Android中不一样,在Flutter里,Notification会沿着当前的context节点从下往上传递,所有父节点都可以通过NotificationListener来监听通知,这种由子向父的传递方式为“通知冒泡”。

    第五章 动画

    5.1动画原理及概述
    5.1.1 Animation 动画中使用最多的类型。
    5.1.2 Animatable 控制动画类型的类。
    5.1.3 AnimationController 动画控制器,它负责在给定的时间段内,已线性的方式生成默认区间为(0.0,1.0)的数字。
    5.1.4 Tween 补间动画

    第六章 使用网络技术和异步编程

    6.1 网络协议简单来说就是为计算机网络进行数据交互而建立的规则,标准或约定的集合。
    6.1.1 Http协议简介 Http协议是互联网的基础协议,是基于TCP/IP协议的应用层协议。
    6.1.2 Http2.0为我们带来了多路复用
    6.1.3 Https简单来说就是安全的Http,即Http+SSL,Https集合了加密传输、身份认证,因此更加安全。
    6.2 网络编程
    6.2.1 HttpClient
    6.2.2 Http库
    6.3 JSON解析
    6.3.1 JSON转为Dart对象
    6.3.2 一个完整的例子
    6.3.3 根据Json用工具生成实体类
    6.4 dio库 Flutter中文网提供的一个强大的http请求库
    6.4.1 基本用法
    6.4.2 dio单例 一个dio实例可以发起多个网络请求
    6.4.3 dio拦截器
    6.4.4 dio拦截器链: 其实,拦截器不止一个。
    6.4.5 dio适配器:Flutter还能抽像出适配器来方便切换和定制底层网络库。
    6.4.6 dio库总结
    6.5 异步编程 说到网络,就一定会提到异步编程。
    6.5.1 isolate
    6.5.2 eventloop
    6.5.3 线程模型与isolate:1.PlatFrom Task Runner
    2.UI Task Runner
    3.GPU Task Runner
    4.IO Task Runner 的运行线程也对应着平台的子线程。
    6.5.4 创建单独的isolate
    6.5.5 Stream事件流

    第七章 路由

    7.1 路由的简介:路由就是连接各个界面的“桥梁”,这个“桥梁”就是Navigator,就是导航的意思。
    7.1.1 基本用法 :1.一个界面跳转到另一个界面用Navigator.push,返回上一个界面用Navigator.pop。
    2.实际项目中,情况没这么简单,这就涉及到路由栈管理了。
    3.路由分为静态路由和动态路由。
    7.1.2 静态路由:静态路由在明确知道往哪里跳的情况下使用。
    7.1.3 动态路由:两个界面之前跳转需要携带参数的情况会用到。
    7.1.4 参数回传
    7.2 路由栈
    7.2.1 路由栈详解:NaviGator里的Push方法把元素添加到堆栈的顶部,Pop方法则删除了顶部的元素。
    7.2.2 pushReplacementNamed方法:替换元素。
    7.2.3 pushAndPushNamed方法: 与pushReplacementNamed方法效果相似。
    7.2.4 pushNamedAndRemoveUntil方法:删除自身,也可指定跳转对象。
    7.2.5 popUntil发法:直接pop到指定页面。
    7.3 自定义路由

    第八章 持久化

    8.1 shared_preferences本地储存(官方推荐,Flutter社区开发的一个本地储存插件):(1)它是一个异步的、简单的、持久化的、key-value形式的储存系统。(2)在Android端它是基于SharedPreferences开发的。(3)在ios端,它是基于NSUserDefaults开发的。

    相关文章

      网友评论

          本文标题:Flutter:从0到1构建大前端应用学习笔记

          本文链接:https://www.haomeiwen.com/subject/mrvugctx.html