最基础布局的特性和使用
| 类型 | 作用特点 |
|---|---|
| Container | 只有一个子 Widget。默认充满，包含了padding、margin、color、宽高、decoration 等配置。 |
| Padding | 只有一个子 Widget。只用于设置Padding，常用于嵌套child，给child设置padding。 |
| Center | 只有一个子 Widget。只用于居中显示，常用于嵌套child，给child设置居中。 |
| Stack | 可以有多个子 Widget。 子Widget堆叠在一起。 |
| Column | 可以有多个子 Widget。垂直布局。 |
| Row | 可以有多个子 Widget。水平布局。 |
| Expanded | 只有一个子 Widget。在 Column 和 Row 中充满。 |
基础的widget
| 类型 | 作用特点 |
|---|---|
| MaterialApp | 一般作为APP顶层的主页入口，可配置主题，多语言，路由等 |
| Scaffold | 一般用户页面的承载Widget，包含appbar、snackbar、drawer等material design的设定。 |
| Appbar | 一般用于Scaffold的appbar ，内有标题，二级页面返回按键等，当然不止这些，tabbar等也会需要它 。 |
| Appbar | 一般用于Scaffold的appbar ，内有标题，二级页面返回按键等，当然不止这些，tabbar等也会需要它 。 |
| Text | 显示文本，几乎都会用到，主要是通过style设置TextStyle来设置字体样式等。 |
| RichText | 富文本，通过设置TextSpan，可以拼接出富文本场景。 |
| Text | 显示文本，几乎都会用到，主要是通过style设置TextStyle来设置字体样式等。 |
| TextField | 文本输入框 ：new TextField(controller: //文本控制器, obscureText: "hint文本"); |
| Image | 图片加载: new FadeInImage.assetNetwork( placeholder: "预览图", fit: BoxFit.fitWidth, image: "url"); |
| FlatButton | 按键点击: new FlatButton(onPressed: () {},child: new Container()); |
和Android对应关系
| Android | 内容 | Flutter | 内容 | IOS |
|---|---|---|---|---|
| Views | 通过invalid更新 | StateXXWidget | 通过setState来更新状态 | UIView |
| Views | addChild() 或 removeChild() 添加或者删除子 View | StateXXWidget | 控制子 Widget 的创建 | UIView 可动态修改 |
| View动画 | 通过 XML 文件定义动画，也可以调用 View 对象的 animate() 方法 | Animation<double> | AnimationController 开控制 | animate(withDuration:animations:) |
| 自定义绘制 | Canvas和Paint等 | CustomPaint | CustomPainter实现 | CoreGraphics |
| 自定义View | 继承 View | 自定义Widget | 通过组合更小的 Widget 来创建自定义 Widget | 继承UIView |
| Intent | 组件间通信使用Intent | Navigator | Navigator 和 Route，使用intent可以用额外插件 | UINavigationController |
| 外部Intent | manifest中注册接收 | 外部Intent | manifest中注册接收后，使用MethodChannel通过原生发过来 | URL scheme |
| 异步 UI | runOnUiThread() Looper | Isolate | async/await，不能分享内存，setState/SendPort&ReceivePort来更新UI | Looper |
| OkHttp | OkHttp | http包 | 'package:http/http.dart' as http | |
| ProgressBar | ProgressBar | ProgressIndicator | ProgressIndicator的子类 | UIProgressView |
| 图片 | drawable，mipmap | 图片 | asset | Images.xcasset |
| 字符串 | string.xml | 字符串 | 代码中 | Localizable.strings |
| gradle | pubspec.yaml | Podfile | ||
| 组件生命周期 | ActivityLifecycleCallbacks | Widgets生命周期 | didChangeAppLifecycleState | ViewController |
| LinearLayout | Row/Column | |||
| RelativeLayout | Row/Column | Row/Column,Stack Widget,声明孩子相对父亲的布局规则 | ||
| ScrollView | ListView | 既是一个 ScrollView，也是一个 ListView | UITableView 和 UICollectionView | |
| 事件监听 | XXListener | 事件监听 | onPressed,OnTap等 | tableView:didSelectRowAtIndexPath: |
| ListView | adapters | ListView | List<Widget>需要传入一组widget | |
| ListView | onItemClickListener | ListView | 每个widget自我管理事件 | GestureRecognizer |
| ListView | notifyDataSetChanged | ListView | ListView.Builder | reloadData |
| 自定义字体 | FontFamily | pubspec.yaml配置 | TextStyle(fontFamily: 'MyCustomFont') | info.plist |
| EditTextView | TextField | onSubmitted,decoration | ||
| 主题 | manifest中theme | MaterialApp | ThemeData |
网友评论