Flutter 构建布局 + pubspec.yaml文件

2020-07-16  本文已影响0人  张思学

重点是什么?
Widgets 是用于构建UI的类.
Widgets 用于布局和UI元素.
通过简单的widget来构建复杂的widget

Flutter布局机制的核心就是widget。在Flutter中,几乎所有东西都是一个widget - 甚至布局模型都是widget。您在Flutter应用中看到的图像、图标和文本都是widget。 甚至你看不到的东西也是widget,例如行(row)、列(column)以及用来排列、约束和对齐这些可见widget的网格(grid)。

如果你想对布局机制有一个“全貌”的理解,请参考Flutter的布局方法

  1. 先在项目中添加图片资源文件
    在工程根目录创建一个 images 文件夹
    添加一张banner图 (请注意,wget不能保存此二进制文件。)
    更新 pubspec.yaml 文件以包含 assets 标签. 这样才会使您的图片在代码中可用。
# 键值对,表示app的名字为flutter_app
name: flutter_app
description: A new Flutter application.
# 环境,flutter的sdk版本在此之间
environment:
  sdk: ">=2.0.0-dev.68.0 <3.0.0"

# 依赖库
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  event_bus: ^1.0.1
  shared_preferences: "^0.4.3"
  flutter_refresh: ^0.0.1

#测试环境的依赖库
dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  #使用Material图标
  uses-material-design: true
  #assets文件
  assets:
    - images/head.png
    - images/1.gif
  #字体样式
  #fonts:
     #family与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
上一篇下一篇

猜你喜欢

热点阅读