WEB转Flutter基础学习笔记（内含vue和flutter对比）

news2024/11/19 19:16:36

一、Widget简要概括

如果说Vue的UI是template包裹的一个个组件

那么Flutter的UI就是baseBuild中return出来的嵌套罗列的widget

StatelessWidget

用于不需要维护状态的场景，它通常在build方法中通过嵌套其他 widget 来构建UI，在构建过程中会递归的构建其嵌套的 widget

StatefulWidget

调用createState()来创建状态（State）对象。当一个 StatefulWidget 同时插入到 widget 树的多个位置时，Flutter 框架就会调用该方法为每一个位置生成一个独立的State实例，其实，本质上就是一个StatefulElement对应一个State实例。

State

当State被改变时，可以手动调用其setState()方法通知Flutter 框架状态发生改变，Flutter 框架在收到消息后，会重新调用其build方法重新构建 widget 树，从而达到更新UI的目的。

在Vue中，对应data中return出来的数据，vue贴心的为我们实现了数据双向绑定，即View的改变能实时让Model发生变化，而Model的变化也能实时更新View。 但在Flutter中我们需要主动的更新UI

生命周期

initState

当 widget 第一次插入到 widget 树时会被调用，对于每一个State对象，Flutter 框架只会调用一次该回调，所以，通常在该回调中做一些一次性的操作，如状态初始化、订阅子树的事件通知等。

在此周期中，对应Vue中已经挂载完成

didChangeDependencies

当State对象的依赖发生变化时会被调用，组件第一次被创建后挂载的时候（包括重创建）对应的didChangeDependencies也会被调用

build

在调用initState()之后。在调用didUpdateWidget()之后。在调用setState()之后。在调用didChangeDependencies()之后。在State对象从树中一个位置移除后（会调用deactivate）又重新插入到树的其他位置之后。

reassemble

在热重载(hot reload)时会被调用，此回调在Release模式下永远不会被调用。

didUpdateWidget

调用widget.canUpdate来检测 widget 树中同一位置的新旧节点，然后决定是否需要更新,如果widget.canUpdate返回true则会调用此回调,新旧 widget 的key和runtimeType同时相等时didUpdateWidget()就会被调用。

deactivate

当 State 对象从树中被移除时，会调用此回调。

dispose

当 State 对象从树中被永久移除时调用；通常在此回调中释放资源。

Vue中我们常用的离开页面时的释放资源：destroyed

在widget 树中获取State对象
  1. 通过Context获取

如果 StatefulWidget 的状态是希望暴露出的，应当在 StatefulWidget 中提供一个of 静态方法来获取其 State 对象，开发者便可直接通过该方法来获取；如果 State不希望暴露，则不提供of方法

Builder(builder: (context) {
  return ElevatedButton(
    onPressed: () {
      // 直接通过of静态方法来获取ScaffoldState
      ScaffoldState _state=Scaffold.of(context);
      // 打开抽屉菜单
      _state.openDrawer();
    },
    child: Text('打开抽屉菜单2'),
  );
}),

vue中，可以理解为this中挂载的数据

  1. 通过GlobalKey

定义一个globalKey, 由于GlobalKey要保持全局唯一性，我们使用静态变量存储
⚠️：非必要不要定义在全局，容易造成内存泄漏

static GlobalKey<ScaffoldState> _globalKey= GlobalKey();
...
Scaffold(
    key: _globalKey , //设置key
    ...  
)

二、状态管理

你以为状态管理就是Vuex？store？NONONO！！！不全是；在Flutter中，我们可以理解数据和UI是分离的，而数据如何驱动UI、父子UI中的数据流向也是我们说的状态管理，而Vuex对应的是Flutter中的Provider等专门用于状态管理的包

Widget管理自身状态

将变量维护到本widget中，控制这个变量变化，调用setState()更新UI

父Widget管理子Widget的状态

子widget中变化值，通知父widget，变化后，父widget中刷新ui，

混合管理

在父子widget中都有相关状态的管理，组件自身管理一些内部状态，而父组件管理一些其他外部状态。

全局状态管理

当应用中需要一些跨组件（包括跨路由）的状态需要同步时，上面介绍的方法便很难胜任了，此时需要专门用于状态管理的包，如 Provider、Redux等

三、包管理

说到包，我们想到了package依赖，安卓也有这样的依赖。不同的是，安卓还支持你在工程中自行开发使用package，只需要在主工程中引入即可

Flutter:pubspec.yaml

name: flutter_in_action
description: First Flutter Application.

version: 1.0.0+1

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  
flutter:
  uses-material-design: true

Vue:package.json

"dependencies": {
    "axios": "0.18.1",
    "clipboard": "^2.0.4",
    "core-js": "^3.32.0",
    "crypto-js": "^4.1.1",
    "dom-to-image": "^2.6.0",
    "echarts": "^4.1.0",
    "echarts-wordcloud": "1.1.3",
    "element-ui": "^2.4.11",
    "file-saver": "^2.0.1",
    "leaflet": "^1.7.1",
    "element-ui": "^2.4.11",
    "file-saver": "^2.0.1",
    "leaflet": "^1.7.1",
    "lodash": "^4.17.21",
}

四、路由管理

路由（Route）在移动开发中通常指页面（Page），这跟 Web 开发中单页应用的 Route 概念意义是相同的，Route 在 Android中 通常指一个 Activity

Flutter

 Navigator.push( 
   context,
   MaterialPageRoute(builder: (context) {
      return NewRoute();
    }),
);

vue

this.$router.push({
  path: '/yourRouter',
  query: { yourArg: this.yourArg, }
})
路由传值

通过TipRoute的text参数传递给新路由

onPressed: () async {
          // 打开`TipRoute`，并等待返回结果
          var result = await Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) {
                return TipRoute(
                  // 路由参数
                  text: "我是提示xxxx",
                );
              },
            ),
命名路由
注册路由表
MaterialApp(
  title: 'Flutter Demo',
  initialRoute:"/", //名为"/"的路由作为应用的home(首页)
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  //注册路由表
  routes:{
   "new_page":(context) => NewRoute(),
   "/":(context) => MyHomePage(title: 'Flutter Demo Home Page'), //注册首页路由
  } 
);
通过路由名打开
onPressed: () {
  Navigator.pushNamed(context, "new_page");
},
参数传递

参数传递

Navigator.of(context).pushNamed("new_page", arguments: "hi");

参数获取

class EchoRoute extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //获取路由参数  
    var args=ModalRoute.of(context).settings.arguments;
    //...省略无关代码
  }
}
路由生成钩子

相当于vue-router的"导航守卫"，在打开命名路由时被调用

Flutter

 onGenerateRoute: (settings) {
        if (settings.name == PassArgumentsScreen.routeName) {
          final args = settings.arguments as ScreenArguments;
          return MaterialPageRoute(
            builder: (context) {
              return PassArgumentsScreen(
                title: args.title,
                message: args.message,
              );
            },
          );
        }

Vue

router.beforeEach(async (to, from) => {
   if (
     // 检查用户是否已登录
     !isAuthenticated &&
     // ❗️ 避免无限重定向
     to.name !== 'Login'
   ) {
     // 将用户重定向到登录页面
     return { name: 'Login' }
   }
 })

五、常见布局方式

web中的布局通过display、position等控制，常见的flex、Grid布局等；

在Flutter中，我们通过布局约束控制，常见的Row、Expanded等作为包裹你组件的约束，控制了子组件的布局；

布局原理和约束
Flutter 中有两种布局模型：
  • 基于 RenderBox 的盒模型布局。
  • 基于 Sliver ( RenderSliver ) 按需加载列表布局。

两种布局方式在细节上略有差异，但大体流程相同，布局流程如下：

  1. 上层组件向下层组件传递约束（constraints）条件。
  2. 下层组件确定自己的大小，然后告诉上层组件。注意下层组件的大小必须符合父组件的约束。
  3. 上层组件确定下层组件相对于自身的偏移和确定自身的大小（大多数情况下会根据子组件的大小来确定自身的大小）。
BoxConstraints

BoxConstraints 是盒模型布局过程中父渲染对象传递给子渲染对象的约束信息，包含最大宽高信息，子组件大小需要在约束的范围内

const BoxConstraints({
  this.minWidth = 0.0, //最小宽度
  this.maxWidth = double.infinity, //最大宽度
  this.minHeight = 0.0, //最小高度
  this.maxHeight = double.infinity //最大高度
})
ConstrainedBox

ConstrainedBox用于对子组件添加额外的约束。例如，如果你想让子组件的最小高度是50像素，你可以使用const BoxConstraints(minHeight: 50.0)作为子组件的约束。

ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: double.infinity, //宽度尽可能大
    minHeight: 50.0 //最小高度为50像素
  ),
  child: Container(
    height: 5.0, 
    child: redBox ,
  ),
)
SizedBox

SizedBox用于给子元素指定固定的宽高

SizedBox(
  width: 80.0,
  height: 80.0,
  child: redBox
)
多重限制

如果某一个组件有多个父级ConstrainedBox限制，多重限制时，对于minWidth和minHeight来说，是取父子中相应数值较大的。实际上，只有这样才能保证父限制与子限制不冲突。

UnconstrainedBox

父子关系中，子组件都必须遵守其父组件的约束，UnconstrainedBox用来"解除"约束。UnconstrainedBox的子组件将不再受到约束，但需要合理使用避免出现：溢出

线性布局（Row和Column）
Row

Row可以沿水平方向排列其子widget

Row({
  ...  
  TextDirection textDirection,    //水平方向子组件的布局顺序(是从左往右还是从右往左
  MainAxisSize mainAxisSize = MainAxisSize.max,  //表示Row在主轴(水平)方向占用的空间，默认是MainAxisSize.max，表示尽可能多的占用水平方向的空间  
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,//表示子组件在Row所占用的水平空间内对齐方式，MainAxisAlignment.start表示沿textDirection的初始方向对齐
  VerticalDirection verticalDirection = VerticalDirection.down,  //表示Row纵轴（垂直）的对齐方向，
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, //表示子组件在纵轴方向的对齐方式
  List<Widget> children = const <Widget>[], // 子组件数组
})
Column

Column可以在垂直方向排列其子组件

参数和Row一致

弹性布局
Flex

Flex组件可以沿着水平或垂直方向排列子组件，

Flex({
  ...
  required this.direction, //弹性布局的方向, Row默认为水平方向，Column默认为垂直方向
  List<Widget> children = const <Widget>[],
})
Expanded

Expanded 只能作为 Flex 的孩子（否则会报错），它可以按比例“扩伸”Flex子组件所占用的空间

const Expanded({
  int flex = 1, 
  required Widget child,
})
流式布局

Row 和 Column 时，如果子 widget 超出屏幕范围，则会报溢出错误,将Row 换成Wrap后溢出部分则会自动折行

Wrap

Wrap的很多属性在Row中也有,可以认为Wrap和Flex除了超出显示范围后Wrap会折行外，其他行为基本相同。

Wrap特有的几个属性：

  • spacing：主轴方向子widget的间距
  • runSpacing：纵轴方向的间距
  • runAlignment：纵轴方向的对齐方式
Wrap({
  ...
  this.direction = Axis.horizontal,
  this.alignment = WrapAlignment.start,
  this.spacing = 0.0,
  this.runAlignment = WrapAlignment.start,
  this.runSpacing = 0.0,
  this.crossAxisAlignment = WrapCrossAlignment.start,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  List<Widget> children = const <Widget>[],
})
Flow

很少用、需要自己实现子 widget 的位置转换

层叠布局

Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位。Stack允许子组件堆叠，而Positioned用于根据Stack的四个角来确定子组件的位置。

对齐与相对定位

Align组件可以调整子组件的位置，

Alignment继承自AlignmentGeometry，表示矩形内的一个点，他有两个属性x、y，分别表示在水平和垂直方向的偏移

FractionalOffset继承自Alignment，但坐标原点不同，FractionalOffset的坐标原点为矩形的左侧顶点。

Center继承自Align，我们可以认为Center组件其实是对齐方式确定（Alignment.center）了的Align。

Align和Stack/Positioned都可以用于指定子元素相对于父元素的偏移，但它们还是有两个主要区别：

  1. 定位参考系统不同；Stack/Positioned定位的参考系可以是父容器矩形的四个顶点；而Align则需要先通过alignment参数来确定坐标原点，不同的alignment会对应不同原点，最终的偏移是需要通过alignment的转换公式来计算出。
  2. Stack可以有多个子元素，并且子元素可以堆叠，而Align只能有一个子元素，不存在堆叠。

六、常用组件

Padding

和前端类似，只不过使用形式是包裹组件实现的

Padding可以给其子节点添加填充（留白）,可设置的EdgeInsets：all(double value)、only({left, top, right ,bottom })、symmetric

 Padding(
            //左边添加8像素补白
            padding: EdgeInsets.only(left: 8),
            child: Text("Hello world"),
          ),
          Padding(
            //上下各添加8像素补白
            padding: EdgeInsets.symmetric(vertical: 8),
            child: Text("I am Jack"),
          ),
          Padding(
            // 分别指定四个方向的补白
            padding: EdgeInsets.fromLTRB(20, 0, 20, 20),
            child: Text("Your friend"),
   )

Flutter

Padding({
  ...
  EdgeInsetsGeometry padding,
  Widget child,
})

Css

.padding-set {
    padding: 0 0 10px 10px;
 }
Container

Container是一个组合类容器

可以理解为div

ListView

ListView.builder适合列表项比较多或者列表项不确定的情况

可以理解为，v-for的功能，itemBuilder就是每一项数据

ListView.builder(
  itemCount: 100,
  itemExtent: 50.0, //强制高度为50.0
  itemBuilder: (BuildContext context, int index) {
    return ListTile(title: Text("$index"));
  }
);

以上仅为Flutter基础、后续部分会继续总结…
image.png

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1683288.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux: network: send 失败的时候要不要close socket？

Linux: network: send 失败的时候要不要close socket？

最近遇到一个例子&#xff0c;说有zerowindow出现&#xff1b;出现的原因是接收方的CPU被其他程序吃光&#xff0c;导致socket的read函数处理非常慢。说明接收端的接收缓存不够用。发送端自然而然的要停止发送。 但是如果在接收方的recv buff&#xff0c;以及发送方的send buf…
阅读更多...
【深度学习】YOLOv8训练，交通灯目标检测

【深度学习】YOLOv8训练，交通灯目标检测

文章目录 一、数据处理二、环境三、训练 一、数据处理 import traceback import xml.etree.ElementTree as ET import os import shutil import random import cv2 import numpy as np from tqdm import tqdmdef convert_annotation_to_list(xml_filepath, size_width, size_he…
阅读更多...
excel里如何将数据分组转置？

excel里如何将数据分组转置？

这个表格怎样转换为下表&#xff1f;按照国家来分组&#xff0c;把不同年份对应的不同序列值进行转置&#xff1f;&#xff1f; 这演示用数据透视表就完成这个数据转换。 1.创建数据透视表 选中数据中任意单元格&#xff0c;点击插入选项卡&#xff0c;数据透视表&#xff0c;…
阅读更多...
Java编程语言，使用迭代器Iterator实现自动分页查询

Java编程语言，使用迭代器Iterator实现自动分页查询

一、背景 在Java中&#xff0c;Iterator是一种设计模式&#xff0c;用于提供一种按顺序访问集合中元素的方式&#xff0c;而不暴露集合的底层表示。Iterator接口主要用于遍历集合&#xff0c;它定义了两种方法&#xff1a;hasNext()和next()。 借助于迭代器Iterator&#xff…
阅读更多...
uniapp-自定义navigationBar

uniapp-自定义navigationBar

封装导航栏自定义组件 创建 nav-bar.vue <script setup>import {onReady} from dcloudio/uni-appimport {ref} from vue;const propsdefineProps([navBackgroundColor])const statusBarHeight ref()const navHeight ref()onReady(() > {uni.getSystemInfo({success…
阅读更多...
modbus开源库libmodbus的C语言使用记录(实现简单的modbus主机/丛机程序，解决libmodbus库安装出现的问题)

modbus开源库libmodbus的C语言使用记录(实现简单的modbus主机/丛机程序，解决libmodbus库安装出现的问题)

libmodbus简介 libmodbus 是一个开源的、跨平台的C库，用于实现Modbus通讯协议。它支持Modbus RTU（RS-232/485）和Modbus TCP协议，可以使开发者方便地在项目中集成Modbus通讯功能。libmodbus的设计目标是简单、灵活和高效，适用于各种大小的嵌入式和桌面应用。 编译运行测试…
阅读更多...
交换机连接方式

交换机连接方式

一、级联方式 级联是将多个交换机或其他网络设备依次连接&#xff0c;形成一个层次结构&#xff0c;从而扩展网络的覆盖范围和端口数量。 在级联连接中&#xff0c;数据信号会从一个设备依次传递到下一个设备。每个设备都会接收并处理来自上级设备的数据&#xff0c;并将其转…
阅读更多...
vb.net打开CAD指指定路径文件

vb.net打开CAD指指定路径文件

首先打开vsto,创建窗体&#xff0c;添加一个按钮&#xff0c;双击按钮录入代码&#xff1a; Public Class Form1Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.ClickDim cad As Objectcad CreateObject("autocad.Application")cad…
阅读更多...
Spring Cloud整合Sentinel

Spring Cloud整合Sentinel

1、引入依赖 链接: 点击查看依赖关系 父pom <spring.cloud.version>Hoxton.SR12</spring.cloud.version> <spring.cloud.alibaba.version>2.2.10-RC1</spring.cloud.alibaba.version>Sentinel应用直接引用starter <dependency><groupId&…
阅读更多...
《2024中国AI大模型产业图谱1.0版》重磅发布

《2024中国AI大模型产业图谱1.0版》重磅发布

‍ 数据猿出品 本次“数据猿2024年度三大媒体策划活动——《2024中国数据智能产业图谱1.0版》”正式发布。下一次版本迭代将于2024年7月底发布2024年2.0版&#xff0c;敬请期待&#xff0c;欢迎报名。 大数据产业创新服务媒体 ——聚焦数据 改变商业 随着科技的飞速发展&#…
阅读更多...
三维焊接平台在新一代机器人生产中得到广泛应用-河北北重

三维焊接平台在新一代机器人生产中得到广泛应用-河北北重

随着智能制造行业的不断推进&#xff0c;三维焊接平台在工业机器人领域应用现象普遍。三维焊接平台、三维柔性焊接平台工装夹具也会在新一代机器人——智能机器人在工业生产中得到广泛应用。目前&#xff0c;三维焊接平台、焊接铸铁平台在工业机器人的主要作用是应用于弧焊、电…
阅读更多...
202472读书笔记|《首先你要快乐，其次都是其次》——快乐至上，允许一切发生

202472读书笔记|《首先你要快乐，其次都是其次》——快乐至上，允许一切发生

202472读书笔记|《首先你要快乐&#xff0c;其次都是其次》——快乐至上&#xff0c;允许一切发生 《首先你要快乐&#xff0c;其次都是其次》作者林小仙&#xff0c;挺轻松的小漫画&#xff0c;清新的文字。 生而为人&#xff0c;我很抱歉&#xff0c;大可不必。 生活已经很难…
阅读更多...
鸿蒙HarmonyOS开发中的易混点归纳-持续补充中

鸿蒙HarmonyOS开发中的易混点归纳-持续补充中

相关文章目录 鸿蒙HarmonyOS开发术语全解&#xff1a;小白也能看懂&#xff01; 文章目录 相关文章目录前言一、build()函数和Builder装饰器&#xff1f;二、自定义组件和系统组件&#xff08;内置组件&#xff09;三、组件和页面四、自定义弹窗和其他弹窗总结 前言 一、build…
阅读更多...
【BSP开发经验】简易文件系统digicapfs实现方式

【BSP开发经验】简易文件系统digicapfs实现方式

文章目录 背景Linux vfs框架介绍数据结构系统调用openwriteread 总体框架 Linux 磁盘高速缓存机制标准文件访问同步文件访问异步文件访问buffer_head 如何实现一个简单的文件系统blkdevfs注册文件系统产生一个文件让文件变得可读可写 背景 在新的分区升级启动方案中需要分别实…
阅读更多...
《QT实用小工具·六十五》基于QPropertyAnimation实现的移动动画和控件覆盖

《QT实用小工具·六十五》基于QPropertyAnimation实现的移动动画和控件覆盖

1、概述 源码放在文章末尾 该项目基于QPropertyAnimation实现了控件平移动画和控件之间的相互覆盖效果&#xff0c;项目demo演示如下所示&#xff1a; 项目解析&#xff1a; new QPropertyAnimation(ui.SingleOcclusion, “pos”); //创建动画对象&#xff0c;第一个参数传…
阅读更多...
什么是流量削峰？如何解决秒杀等业务的削峰场景

什么是流量削峰？如何解决秒杀等业务的削峰场景

文章推荐 1 作为程序员&#xff0c;开发用过最好用的AI工具有哪些&#xff1f; 2 Github Copilot正版的激活成功&#xff0c;终于可以chat了 3 idea,pycharm等的ai assistant已成功激活 4 新手如何拿捏 Github Copilot AI助手&#xff0c;帮助你提高写代码效率 5 Jetbrains的a…
阅读更多...
ROS | 自定义发布地图

ROS | 自定义发布地图

C代码&#xff1a; Step: Python代码:
阅读更多...
202212青少年软件编程（Python） 等级考试试卷（三级）

202212青少年软件编程（Python） 等级考试试卷（三级）

第1题：【 单选题】 列表 L1 中全是整数，小明想将其中所有奇数都增加 1，偶数不变，于是编写了如下图所示的代码。 请问，图中红线处，代码应该是？ （ ） A:x || 2 B:x^2 C:x&&2 D:x%2 【正确答案】: D 【试题解析】 : 本题代码中， for x in L1 是在 L1 列表中循…
阅读更多...
关于如何创建一个可配置的 SpringBoot Web 项目的全局异常处理

关于如何创建一个可配置的 SpringBoot Web 项目的全局异常处理

前情概要 这个问题其实困扰了我一周时间&#xff0c;一周都在 Google 上旅游&#xff0c;我要如何动态的设置 RestControllerAdvice 里面的 basePackages 以及 baseClasses 的值呢&#xff1f;经过一周的时间寻求无果之后打算决定放弃的我终于找到了一些关键的线索。 当然在此…
阅读更多...
鸿蒙 DevEcoStudio:通知栏通知实现

鸿蒙 DevEcoStudio:通知栏通知实现

【使用notificationManager实现通知栏功能】 【普通通知、长文本通知、多行通知、图片通知】 import notificationManager from ohos.notificationManager import image from ohos.multimedia.image Entry Component struct Index {State message: string Hello World// 将图…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023