Android中使用FutterView的相关问题(一)

Flutter从Main开始启动,启动的时候需要最外层是MaterialApp void main() => runApp(_widgetForRoute(window.defaultRouteName)); Widget _widgetForRoute(String route) { return MaterialApp( color: Colors.white, theme: ThemeData( primarySwatch: Colors.blue, ), home: findHome(route), ); } Widget findHome(String route) { switch (route) { case 'index': return IndexMain(); case 'detail': return ProductDetail(); default: return Center( child: Text('Unknown route: $route', textDirection: TextDirection.ltr), ); } } 如果背景是黑色的使用caffold嵌套 如果文字有黄色下划线,原因是theme的问题,两种方式: 使用顶层Material嵌套(推荐,使用这种方式,原生端页面展示会比其他的好看的) 对Text添加Style: style: new TextStyle(decoration: TextDecoration....

十二月 13, 2018 · 2 分钟 · LengYue

Flutter 常用 Widget 属性

TextStyle const TextStyle({ this.inherit: true, // 为false的时候不显示 this.color, // 颜色 this.fontSize, // 字号 this.fontWeight, // 字重,加粗也用这个字段 FontWeight.w700 this.fontStyle, // FontStyle.normal FontStyle.italic斜体 this.letterSpacing, // 字符间距 就是单个字母或者汉字之间的间隔,可以是负数 this.wordSpacing, // 字间距 句字之间的间距 this.textBaseline, // 基线,两个值,字面意思是一个用来排字母的,一人用来排表意字的(类似中文) this.height, // 当用来Text控件上时,行高(会乘以fontSize,所以不以设置过大) this.decoration, // 添加上划线,下划线,删除线 this.decorationColor, // 划线的颜色 this.decorationStyle, // 这个style可能控制画实线,虚线,两条线,点, 波浪线等 this.debugLabel, String fontFamily, // 字体 String package, }) : fontFamily = package == null ?...

十二月 13, 2018 · 5 分钟 · LengYue

Flutter中嵌入Native组件

Flutter官方提供的控件AndroidView、UiKitView就是一种比较优雅的解决方案了。这里做了一个简单的嵌入TextView的demo(使用这种方式会增加性能上的开销,应该尽量避免使用) 使用方式 native端 跟MethodChannel的使用方法类似,在native侧,我们实现一个PlatformViewFactory(iOS是FlutterPlatformViewFactory),在create方法中,使用平台方法创建View返回。 override fun create(context: Context?, i: Int, any: Any?): PlatformView { return object : PlatformView { override fun getView(): View { val text = TextView(context) text.layoutParams = ViewGroup.LayoutParams(SizeUtils.dp2px(200f), SizeUtils.dp2px(200f)) text.apply { setText("Android View") setTextColor(Color.BLUE) setBackgroundColor(Color.RED) } return text } override fun dispose() { } } } func create(withFrame frame: CGRect, viewIdentifier viewId: Int64, arguments args: Any?...

十二月 7, 2018 · 1 分钟 · LengYue

Flutter和原生Android控件对比

Flutter和原生Android控件对比: Flutter控件 Android控件 AppBar ActionBar/ToolBar ListView ListView/RecyclerView Text TextView Center ViewGroup FloatingActionButton FloatingActionButton(design库里面的) BottomNavigationBar BottomNavigation(design库里面的) RaisedButton/Button Button Column LinearLayout的android:orientation=“vertical” Row android:orientation=“horizontal” DecorationImage ImageView Image ImageView Stack FrameLayout/RelativeLayout Container RelativeLayout CustomMultiChildLayout RelativeLayout Algin alginParentXXX属性 resizeToAvoidBottomPadding android:windowSoftInputMode=”adjustResize属性 SingleChildScrollView ScrollView CustomScrollerView Recyclerview Image里面的BoxFit参数介绍:(相当于Android的ImageView的scaleType参数)...

十二月 6, 2018 · 1 分钟 · LengYue

Flutter的需要与原生交互的一些常用库

Flutter的需要与原生交互的一些常用库 【说明】由于这些库一直在更新,请自己选择合适的稳定版本下载。 谷歌官方的针对Dart语言的一些实用性的功能以及扩展的库 – Quiver Quiver是一组针对Dart的实用程序库,它使使用许多Dart库变得更容易、更方便,或者增加了额外的功能。 github地址 https://github.com/google/quiver-dart 使用方式: dependencies: quiver: '>=2.0.0 <3.0.0' 根据pubspec.yaml中设置的目录模板自动向其中添加文件记录的脚本 asset_generator 好多人都说Flutter中的资源引用很头疼,手写很麻烦,最近找到了一个脚本刚好卡呀解决这个问题。 这个脚本的作用:利用asset_generator脚本生成r.dart 资源文件,方便在代码中引用资源。 github地址: https://github.com/flutter-dev/asset_generator 使用方式: 1.下载 asset_generator.dart 脚本文件。 2.找到自己Flutter的安装目录,将脚本放在Flutter的根目录下。 👉 另外关于pubspec.yaml文件,它很严格,很多人会写错,多一个或者少一个空格都会报错。刚好我找到了一个在线监测工具https://www.bejson.com/validators/yaml/ 把你的yaml文件复制进去 就可以自动帮你找出错误了。 常用开源包: 网络请求 库名 版本号 链接 描述 http 0.11.3+16 https://pub.dartlang.org/packages/http 该软件包包含一组高级函数和类,可以轻松使用HTTP资源。它与平台无关,可以在命令行和浏览器上使用。 dio 0.0.14 https://pub.dartlang.org/packages/dio Dart的一个强大的Http客户端,支持拦截器、全局配置、FormData、请求取消、文件下载、超时等。 http_multi_server 2.0.5 https://pub.dartlang.org/packages/http_multi_server dart:io HttpServer包装器,用于处理来自多个服务器的请求 类型编解码的库:...

十二月 6, 2018 · 4 分钟 · LengYue

Android App 组件化构架

目前架构一共分为四层, 从低到高依次是基础层,项目封装(如果不需要可能跳过这层),业务层和宿主层。 宿主层 宿主层位于最上层, 主要作用是作为一个 App 壳, 将需要的模块组装成一个完整的 App, 这一层可以管理整个 App 的生命周期(比如 Application 的初始化和各种组件以及三方库的初始化) 业务层 业务层位于中层, 里面主要是根据业务需求和应用场景拆分过后的业务模块, 每个模块之间互不依赖, 但又可以相互交互, 比如一个商城 App 由 搜索, 订单, 购物车, 支付 等业务模块组成 Tips: 每个业务模块都可以拥有自己独有的 SDK 依赖和自己独有的 UI 资源 (如果是其他业务模块都可以通用的 SDK 依赖 和 UI 资源 就可以将它们抽离到基础SDK中) 业务模块的拆分 写业务之前先不要急着动手敲码, 应该先根据初期的产品需求到后期的运营规划结合起来清晰的梳理一下业务在未来可能会发生的发展, 确定业务之间的边界, 以及可能会发生的变化, 最后再确定下来真正需要拆分出来的业务模块再进行拆分 项目封装 项目封装主要是为了解决:同一个公司如果有多个项目,在处理 登录、用户数据、接口定义…上一般来说是相同的,所以在此对相同的模块进行一次封装。 基础层 基础层位于最底层, 里面又包括公共服务模块、 基础 SDK 模块, 核心基础业务模块 和 公共服务模块 主要为业务层的每个模块服务, 基础 SDK 模块 含有各种功能强大的团队自行封装的 SDK 以及第三方 SDK, 为整个平台的基础设施建设提供动力。个人认为,基础模块是一个可以脱离上层独立应用于各种app开发架构的模块,所以,基础模块应该是不包含各种业务逻辑处理,对网络、图片加载、SDK的封装不应该包含特定业务的处理 核心基础业务 核心基础业务 为 业务层 的每个业务模块提供一些与业务有关的基础服务, 比如在项目中以用户角色分为 2 个端口, 用户可以扮演多个角色, 但是在线上只能同时操作一个端口的业务, 这时每个端口都必须提供一个角色切换的功能, 以供用户随时在多个角色中切换, 这时在项目中就需要提供一个用于用户自由切换角色的管理类作为 核心基础业务 被这 2 个端口所依赖(类似 拉勾, Boss 直聘等 App 可以在招聘者和应聘者之间切换)...

十二月 4, 2018 · 1 分钟 · LengYue

MediaCodec实现视频音视频分离、合并、编辑、压缩

介绍 android上视频操作,主要有OpenGL、FFmpeg、以及4.1之后的MediaCodec,MediaCodec是Android上一个用来直接访问设备的媒体编解码器的接口,因为有硬件加速的效果,所以使用起来无论是效率,还是耗时,都会比FFmpeg好很多,今天了着重谈谈MediaCodec的使用。 与MediaCodec相关,经常配合一起使用的媒体处理类主要有: MediaExtractor用于音视频分路,和MediaMuxer正好是反过程。MediaFormat用于描述多媒体数据的格式。MediaRecorder用于录像+压缩编码,生成编码好的文件如mp4, 3gpp,视频主要是用于录制Camera preview。MediaPlayer用于播放压缩编码后的音视频文件。AudioRecord用于录制PCM数据。AudioTrack用于播放PCM数据 音视频分离 视频的分离和合成主要是用MediaExtractor和MediaMuxer这两个类,来处理视频中的视频信道和音频信道的拆分和组合。 逻辑大概如下: 1.初始化对象,设置源文件 var extractor = MediaExtractor() extractor.setDataSource(videoPath.absolutePath) 2.获取要追踪的TrackIndex 信道track index //获得信道数 val trackCount = extractor.trackCount var videoTrack = -1 var audioTrack = -1 for (i in 0 until trackCount) { val trackFormat = extractor.getTrackFormat(i) val format = trackFormat.getString(MediaFormat.KEY_MIME) //视频信道 if (format.startsWith("video/")) { videoTrack = i } if (format.startsWith("audio/")) { audioTrack = i } } 打开MediaFormat可以看到所有支持的mime...

十一月 5, 2018 · 3 分钟 · LengYue

Glide4加载图片RoundedCorners跟CenterCrop冲突问题解决

在glide4.0上面 centerCrop和圆角图片有冲突只能显示一个 类似这个: Glide.with(TPApplication.getAppContext()) .load(url) .centerCrop() .transform(glideRoundTransform) .placeholder(R.drawable.nearby_online_me_photo) .diskCacheStrategy(DiskCacheStrategy.ALL) .dontAnimate() .into(this); 分析 点开centerCrop()这个代。 /** * Applies {@link CenterCrop} to all default types and * throws an exception if asked to transform an unknown type. * * <p>this will override previous calls to {@link #dontTransform()} ()}. * * @see #transform(Class, Transformation) * @see #optionalCenterCrop() */ public RequestOptions centerCrop() { return transform(DownsampleStrategy.CENTER_OUTSIDE, new CenterCrop()); } 可以看到CenterCrop也是调用的 transform的方法,在点开 new Centercrop()这个方法看看里面的实现...

十月 25, 2018 · 1 分钟 · LengYue