Flutter入门三部曲(1)-基础认识
image.png
image.png
看到整体的架构图,它是由dart
完成上层的framework,然后由通过skia来完成图形的绘制。
环境搭建可以直接参照文档来进行。 值得注意的是,在国内,设置环境变量会安装的更快
export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
或者使用交大(Shanghai Jiaotong University Linux User Group )的地址
export PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn/ export FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn/
flutter create flutter_start
生成了文件目录如下。快速认识一下
项目目录.png
这里面需要关注的目录如下:
- android //生成的android目录。里面是根据脚本生成的android项目 - ios //同上,ios项目 - lib //这个目录下面是运行的代码 - main.dart //代码文件 - test //测试文件 - widget_test.dart //测试代码 - pubspec.yaml //项目的配置文件
pubspec.yaml
顾名思义。通过这个文件来配置相关的依赖。 在配置文件中,我们可以配置第三方库。和使用的图片资源
#这里是配置项目的名字和说明 name: flutter_start description: A new Flutter project. # 配置项目依赖 dependencies: flutter: sdk: flutter #这里是加入了ios的图标。默认情况下,ios手机上,使用ios的图标 # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.0 dev_dependencies: flutter_test: sdk: flutter #项目的具体配置 flutter: # 将MaterialDesign的图标和字体使用并打包 uses-material-design: true # 可以通过下面的方式,定义Assets内的文件 # assets: # - images/a_dot_burr.jpeg # - images/a_dot_ham.jpeg # 像下面这样定义字体文件。每组字体文件都需要一个Family # example: # fonts: # - family: Schyler # fonts: # - asset: fonts/Schyler-Regular.ttf # - asset: fonts/Schyler-Italic.ttf # style: italic # - family: Trajan Pro # fonts: # - asset: fonts/TrajanPro.ttf # - asset: fonts/TrajanPro_Bold.ttf # weight: 700
参考官方文档 Adding Assets and Images in Flutter Where do I store my resolution-dependent image files?
Flutter遵循简单的基于密度的格式,如iOS。assets
可能是1.0x
, 2.0x
,3.0x
,或任何其他乘数。虽然Flutter
中没有dp
的概念。但是同样使用的是逻辑像素,它们与设备无关的像素基本相同。MediaQuery
中的 devicePixelRatio
表示单个逻辑像素中的物理像素的比率。
Android density qualifier | Flutter pixel ratio |
---|---|
ldpi | 0.75x |
mdpi | 1.0x |
hdpi | 1.5x |
xhdpi | 2.0x |
xxhdpi | 3.0x |
xxxhdpi | 4.0x |
放置的项目如下图
images/my_icon.png // Base: 1.0x image images/2.0x/my_icon.png // 2.0x image images/3.0x/my_icon.png // 3.0x image
之后,它会自动拷贝到对应的android或者ios的项目文件夹中。
首先,还是先来一个感性的认识。
Widget
。Flutter具有一致的统一对象模型:widget
。而且Flutter 遵循Simple is fast
的原则,每个Widget都是用户界面一部分的不可变声明。(这意味着每次改变都会重建widget
)
可以通过告诉框架使用另一个widget替换层次结构中的widget来响应事件,例如用户交互,替换后框架会比较新的和旧的widget,并高效地更新用户界面。
Widget本身通常由许多更小的、单一用途widget组成,这些widget结合起来产生强大的效果。例如,Container是一个常用的widget, 由多个widget组成,这些widget负责布局、绘制、定位和调整大小。具体来说,Container由 LimitedBox、 ConstrainedBox、 Align、 Padding、 DecoratedBox、 和Transform组成。 您可以用各种方式组合这些以及其他简单的widget,而不是继承容器。
类层次结构很浅且很宽,可以最大限度地增加可能的组合数量。