Flutter

场景：同一个项目，打包成 Flutter web 和 Flutter App。 问题：Error: Not found: ‘dart:html’。 产生上面问题的原因其实就是Flutter web使用了dart:html包的类，而Flutter App没有dart:html相关类。相应的 dart.io 这个包，在 web 中也是不存在。像类似的情况有很多。 要解决上面的问题也很简单。写一个类似 MVC 的调用文件就可以了。Flutter 开发中网络请求使用最多的应该就是 dio 了。我们就以 dio 为例子，写一个调用的实例： dio 初始化的时候需要指定HttpClientAdapter。在app 上为 DefaultHttpClientAdapter web 上为 BrowserHttpClientAdapter，如果全部用DefaultHttpClientAdapter web 端会提示不支持。如果这么写： idWeb? BrowserHttpClientAdapter() else DefaultHttpClientAdapter 就会出现跟上面一样的。 提示 package:dio/adapter_browser.dart not found。 解决： http_client_adapter：用于中间承接转化工具。 http_client_adapter_io.dart：如果是Flutter App就引入这个包 http_client_adapter_web.dart：如果是Flutter web就引入这个包 http_client_adapter： export './http_client_adapter_web.dart' if (dart.library.io) './http_client_adapter_io.dart'; http_client_adapter_io： import 'package:dio/adapter.dart'; import 'package:dio/dio.dart'; HttpClientAdapter getHttpClientAdapter() { return DefaultHttpClientAdapter(); } http_client_adapter_web...

通过别名导航： var result = await Get.toNamed(Routes.WEB_VIEW, arguments: { "url": item?.link ?? "", "index": index, "collect": item?.collect ?? false, }); 返回值： Get.back(result: {"collect": collect.value}); 完整代码： () async { /// 导航到新的界面 var result = await Get.toNamed(Routes.WEB_VIEW, arguments: { "url": item?.link ?? "", "index": index, "collect": item?.collect ?? false, }); /// 接收返回值 bool collect = result["collect"]; }

假设有这样一种场景：小明和小方都是程序员。其中小方会跳舞，当然它们都会编程。 用面向对象的方法可以建模如下： 因为小明和小方都会写编程，为了复用这个行为，提取了超类 Programmer，它包含所有程序员共用的行为 code()。这样一来，Ming 和 Fang 就能复用编程行为，而不是各自重新实现一遍相同的逻辑。（继承复用了行为） 小慧是一个舞者，再用面向对象的方法建模如下： 这样的继承关系违反了 DRY 原则，即 Don’t repeat yourself. 因为小慧并未复用小方的跳舞行为，所以同样的跳舞逻辑出现了两次。 那把跳舞行为上提到它们公共的基类 Human 中，是不是就解决问题了？的确，但这不是强迫所有程序员都必须会跳舞吗。。。 那让小方同时继承 Programmer 和 Dancer 能解决问题吗？能！但多重继承容易出事情，比如 “Diamond Problem”： 假设 Human 类中有 eat() 方法，且 Programmer 和 Dancer 都重写了它，此时 Fang 会发生编译报错。因为它不知道自己的 eat() 方法该采用哪一个父类的实现。上面的类图就好像一个钻石的形状，所以称为Diamond problem。 Dart 禁用了多重继承，而是引入了mixin来解决这个问题。 mixin 是一个特殊的类，它的属性和行为可以被其他类复用，而且不需要通过继承。 语法 如果希望一组属性和行为能够复用于多个类，碰巧这些类不在一条继承链路上，此时就应该使用mixin： mixin DanceMixin { void dance() {} } 这是声明 mixin 的方式，几乎和声明 class 一模一样，就是把 class 换成 mixin 而已。 还可以通过 on 限定 mixin 适用范围：...

记录一下用flutter开发过程中遇到的问题，随缘更新~ DropdownButton 去掉分割线 DropdownButton的默认分割线，在自身是没办法取消的。在我怀疑Google硬编码的时候，发现了DropdownButtonHideUnderline,DropdownButton的分割线就是通过DropdownButtonHideUnderline实现的，灵机一动用DropdownButtonHideUnderline包裹DropdownButton同时取消了颜色属性，果然DropdownButton的分割线没有了。 DropdownButtonHideUnderline( child: DropdownButton( iconSize: 0, items: itemList, hint: hit, isExpanded: true, onChanged: change, ), )

在Flutter中 如果使用 listview 嵌套 listview(gridView) 的方式（其实不是很推荐这么写）直接写 会发现布局不显示。 搜索一下基本上解决方法都是给内部的 listview 设置一个高度，但是针对高度不固定的listview这种方式基本无效，而且设置固定高度后 listview 的性能会有额外开销（因为不可见的item不能被回收了） 解决方法 其实查找一下源码，就可以发现官方已经给出了解决方法，在注释里： /// Here are two brief snippets showing a [ListView] and its equivalent using /// [CustomScrollView]: /// /// ```dart /// ListView( /// shrinkWrap: true, /// padding: const EdgeInsets.all(20.0), /// children: <Widget>[ /// const Text('I\'m dedicating every day to you'), /// const Text('Domestic life was never quite my style'), /// const Text('When you smile, you knock me out, I fall apart'), /// const Text('And I thought I was so smart'), /// ], /// ) /// ``` 所以比较简单了，直接在子listview中加上shrinkWrap: true属性：...

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....

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 ?...

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?...