第二次尝试Flutter

前言 学了几天flutter,感觉写起来还是很香的,比原生开发速度快很多,不过以前没接触过安卓开发,思维还在Web开发上,记录一下 布局 一般是使用Column和Row以及Container来布局比较多,还有Expanded,类似与flex: 1这个效果,能把剩余的空间补充满。 在使用的时候还遇到了按钮宽度需要100%的情况,2.0废弃了1.0一些组件,按钮一般使用ElevatedButton,但是没法设置宽高。网上查了一下用SizedBox来当它的父容器,这样它就会跟着父容器的宽高走了,需要宽度100%的话就是double.infinity 如何设置width:100% 目前发现有double.infinity和MediaQuery.of(context).size.width。后续发现的话继续补充 路由 路由的话一般定义在MaterialApp里面,如下: return MaterialApp( title: 'title', initialRoute: "/home", // 默认的路由 routes: { "/home": (context) => MyHome(), // 每个路由需要默认传参context "/login": (context) => MyLogin() }, ); 导航的话常用以下几个 Navigator.pushNamed(context, "/login"); // 跳转到/login页面 Navigator.pop(context); // 返回上一级,可传第二个参数携带回上一级 Navigator.pushReplacementNamed(context, "/login"); //重定向至/login页面,就没法返回到上一级页面了 父子组件传参 父组件调用子组件 // 定义一个全局key GlobalKey<_MyMapState> mapKey = GlobalKey(); // 子组件 class MyMap extends StatefulWidget { MyMap({Key key}) : super(key: key); @override _MyMapState createState() => _MyMapState(); } class _MyMapState extends State<MyMap> { // ....

2021-03-11 13:53:48 · MrLeiDeSen

第一次尝试Flutter

前言 听闻Flutter2.0很强,作为前端刚好对APP有点兴趣,整起来试试 环境 公司用的是Windows,先下载Flutter的SDK,迫于墙,所以在国内站下载,地址 跟着配置,我是用VSCode开发的,所以下面都是基于VSCode 创建项目和启动项目 创建项目还好,直接Flutter插件创建就好了,但是使用模拟器启动的时候就遇到问题了,会一直卡在 Running Gradle task 'assembleDebug'... google了一下大家都说是墙的问题,然后改了一下阿里的源,直接起飞!下面和大家讲一下如何修改。 首先找到项目下android/build.gradle这个文件,修改以下内容: buildscript { repositories { // 下面两行是注释的,maven开头的是新增的 // google() // jcenter() maven { url 'https://maven.aliyun.com/repository/google' } maven { url 'https://maven.aliyun.com/repository/jcenter' } maven { url 'http://maven.aliyun.com/nexus/content/groups/public' } } } 然后重新运行一下main.dart就能跑了(万恶的墙啊)总结 以上就是安装到运行的一些问题,等初步写个Demo出来熟悉了,再写一篇...

2021-03-09 15:11:40 · MrLeiDeSen

前端技术一些踩坑记录

顶部 编辑器相关(VSCode) 实用插件 Beautify 格式化代码 Bracket Pair Colorizer 括号颜色 Path Intellisense 路径智能提示 Vetur Vue提示插件 ES6 ES6语法提示 Open in Browser 在浏览器中打开 回到顶部 React开启JSX支持 打开settings,然后在右上角打开settings.json,配置如下: "emmet.includeLanguages": { "javascript": "javascriptreact" } 回到顶部 NPM(Yarn)相关 –save和–save-dev的区别 npm install --save安装的包是运行时的依赖,比如axios npm install --save-dev安装的包仅仅是在开发阶段的依赖,比如less\sass等 回到顶部 npm在国内加快下载速度 可以使用cnpm,安装方法npm install -g cnpm --registry=https://registry.npm.taobao.org(不推荐,有时候会出问题) 文档 安装yarn来代替,直接下载或者在npm中下载,推荐直接下载安装 (推荐) # 切换淘宝源 npx nrm use taobao # 切换回来 npx nrm use npm 回到顶部 框架(Vue, React等)相关 Vue监听 Vue在mounted()中添加监听事件之后,记得在destroyed()中移除监听,特别是监听滚动事件 回到顶部 Vue引入iView之后使用Col标签后VSCode会报错 解决方法:在settings中搜索vetur....

2021-03-08 15:30:51 · MrLeiDeSen