Flutter学习一

包管理

依赖本地包

dependencies:
pkg1:
path: ../../code/pkg1

依赖git包

dependencies:
pkg1:
git:
url: git://github.com/xxx/pkg1.git

资源管理

指定Assets

flutter:
assets:
- assets/my_icon.png
- assets/background.png

Asset 变体

在选择匹配设备分辨率图片时,会使用Asset变体

加载 Assets

通过AssetBundle 对象访问asset

加载文本assets

1、通过直接使用package:flutter/services.dart 中的静态对象rootBundle

2、建议使用 DefaultAssetBundle 来获取当前BuildContext的AssetBundle。 这种方法不是使用应用程序构建的默认asset bundle,而是使父级widget在运行时动态替换的不同的AssetBundle,这对于本地化或测试场景很有用.

import ‘dart:async‘ show Future;import ‘package:flutter/services.dart‘ show rootBundle;

Future<String> loadAsset() async {
return await rootBundle.loadString(‘assets/config.json‘);}

加载图片

声明分辨率图片assets

../image.png

../Mx/image.png

../Nx/image.png

..etc

主资源默认1.0 倍分辨率图片

../my_icon.png

../2.0x/my_icon.png

../3.0x/my_icon.png

使用AssetImage类

Widget build(BuildContext context) {
return new DecoratedBox(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage(‘graphics/background.png‘),
),
),
);}

Image.asset() 直接返回一个图片widget

Widget build(BuildContext context){
    return Image.asset(‘graphics/background.png‘)
}

使用依赖包中的资源图片

依赖包my_icons, 目录结构

  • …/icons/heart.png
  • …/icons/1.5x/heart.png
  • …/icons/2.0x/heart.png
new AssetImage(‘icons/heart.png", package:‘my_icons‘)

new Image.asset(‘icons/heart.png‘, package: ‘my_icons‘)

打包 assets 资源

需要在 pubspec.yaml 文件中声明 期望的资源,它将会被打包到相应的package中。

例如,一个名为“fancy_backgrounds”的包,可能包含以下文件:

  • …/lib/backgrounds/background1.png
  • …/lib/backgrounds/background2.png
  • …/lib/backgrounds/background3.png
flutter:
assets:
- packages/fancy_backgrounds/backgrounds/background1.png

Dart 单线程模式,

Java OC 多线程,因为任意线程触发异常没有捕获,会终止进程退出程序

异常捕获

try/catch/finally 来捕获代码异常

异常捕获和上报代码

void collectLog(String line){
    ... //收集日志}void reportErrorAndLog(FlutterErrorDetails details){
    ... //上报错误和日志逻辑}

FlutterErrorDetails makeDetails(Object obj, StackTrace stack){
    ...// 构建错误信息}

void main() {
  FlutterError.onError = (FlutterErrorDetails details) {
    reportErrorAndLog(details);
  };
  runZoned(
    () => runApp(MyApp()),
    zoneSpecification: ZoneSpecification(
      print: (Zone self, ZoneDelegate parent, Zone zone, String line) {
        collectLog(line); // 收集日志
      },
    ),
    onError: (Object obj, StackTrace stack) {
      var details = makeDetails(obj, stack);
      reportErrorAndLog(details);
    },
  );}

使用字体

在asset 中声明

将字体文件打包到应用中,在pubspec.yaml 中声明,然后将字体复制到指定的位置。如

flutter:
fonts:
- family: Raleway
fonts:
- asset: assets/fonts/Raleway-Regular.ttf
- asset: assets/fonts/Raleway-Medium.ttf
weight: 500
- asset: assets/fonts/Raleway-SemiBold.ttf
weight: 600
- family: AbrilFatface
fonts:
- asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf

使用字体

// 声明文本样式const textStyle = const TextStyle(
fontFamily: ‘Raleway‘,);

// 使用文本样式var buttonText = const Text(
"Use the font for this text",
style: textStyle,);

Package 中的字体

要使用Package中定义的字体,需要加上package 参数

const textStyle = const TextStyle(
fontFamily: ‘Raleway‘,
package: ‘my_package‘, //指定包名);

如果在package包内部使用它自己定义的字体,也应该在创建文本样式时指定package参数,如上例所示。

一个包也可以只提供字体文件而不需要在pubspec.yaml中声明。 这些文件应该存放在包的lib/文件夹中。字体文件不会自动绑定到应用程序中,应用程序可以在声明字体时有选择地使用这些字体。假设一个名为my_package的包中有一个字体文件:

lib/fonts/Raleway-Medium.ttf

然后,应用程序可以声明一个字体,如下面的示例所示:

flutter:
fonts:
- family: Raleway
fonts:
- asset: assets/fonts/Raleway-Regular.ttf
- asset: packages/my_package/fonts/Raleway-Medium.ttf
weight: 500

lib/是隐含的,所以它不应该包含在asset路径中。

在这种情况下,由于应用程序本地定义了字体,所以在创建TextStyle时可以不指定package参数:

const textStyle = const TextStyle(
fontFamily: ‘Raleway‘,);

原文地址:https://www.cnblogs.com/changeMsBlog/p/11296193.html

时间: 2024-10-10 17:27:04

Flutter学习一的相关文章

Flutter学习资料整合

1.Dart 面向对象语言,与java类比学习 非常适合移动和Web应用程序 1.dart官网 2.Dark2 中文文档 3.Dart语法学习 4.极客学院Dart学习 5.Flutter与Dart 入门 2.Flutter 树形布局,一切皆组件 1.flutter文档 2.flutter中文文档(更新滞后) 3.flutter学习入门: http://jspang.com/archives/ https://juejin.im/user/59ed44cf6fb9a0451c398c45/pos

【flutter学习】基础知识(一)

今天开始学习一下flutter 学习思路:首先由一个简单的例子引出每次学习的对象,一点一点加入元素,针对于代码去了解学习详细知识. 看完本篇博客能够快速的读懂flutter简单代码. flutter Hello Word 这是一个简单的Hello Word 首先引入了material库material是什么,是一个拥有基本样式的库. runApp(runApp是什么)是程序的开始,这个函数需要一个Widget(Widget是什么),习惯叫他组件. 这里传入了一个嵌套的Widget,Center(

Flutter学习简记

StatefulWidget和StatelessWidget StatefulWidget : 具有可变状态的窗口部件,也就是你在使用应用的时候就可以随时变化,比如我们常见的进度条,随着进度不断变化. StatelessWidget:不可变状态窗口部件,也就是你在使用时不可以改变,比如固定的文字(写上后就在那里了,死也不会变了). lutter中一切皆widget,这和RN中一切皆组件的思想很类似,因此在学习Flutter中,我们必须首先来了解Flutter的widget.下面先从最基本的Mat

flutter学习日志(一)【flutter的安装和环境配置 windows】

首先定他一个小目标: ->->目标:命令行输入 flutter doctor (检测flutter所需环境) 得到下图所示-> ->->目标分解:-> 安装flutter (上图中第一个√ get) 安装jdk 安装android studio 安装android sdk (上图中第二个√ get) 安装dart和flutter插件 (上图中第三个√ get ->->-> 第零步:建立几个空文件夹 1.如下图所示,首先建立文件夹 D:\Flutter2

【Flutter学习】基本组件之文本组件Text

一,概述 文本组件(Text)负责显示文本和定义显示样式, 二,继承关系 Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Text 三,构造方法 单一格式(Text( )) 构造方法创建,只能生成一种style Text() const Text(this.data, { Key key, this.style, this.textAlign, this.textDirecti

【Flutter学习】基本组件之基本列表Gradview组件

一,概述 数据量很大的时用矩阵方式排列比较清晰,此时用网格列表组件,即为GridView组件,可实现多行多列的应用场景. 使用GridView创建网格列表有多种方式: GridView.count 通过单行展示个数创建GridView. GridView.extend通过最大宽度创建GridView. 二,构造函数 GridView 使用场景:使用自定义SliverGridDelegate创建可滚动的2D小部件数组 构造函数 GridView({Key key, Axis scrollDirec

【Flutter学习】基本组件之基本表单组件

一,概述 表单时一个包含表单元素的区域. 表单元素允许用户输入内容,比如文本域,下拉列表,单选框,复选框等.常见的应用场景有:登录,注册,输入信息等. 表单里有两个重要的组件: Form:用来做整个表单提交使用 TextFormField:用来做用户输入.  正式向服务器提交数据前,都会对各个输入框数据进行合法性校验.但对每个TextField都分别校验很麻烦. 如果想清除一组TextfFiled的内容,一个个清除也很麻烦.所以,Flutter提供了一个Form widget,可以对输入框进行分

【Flutter学习】之动画实现原理浅析(三)

一,概述 Flutter动画库的核心类是Animation对象,它生成指导动画的值,Animation对象指导动画的当前状态(例如,是开始.停止还是向前或者向后移动),但它不知道屏幕上显示的内容.动画类型分为两类: 补简动画(Tween),定义了开始点和结束点.时间线以及定义转换时间和速度的曲线.然后由框架计算如何从开始点过渡到结束点.Tween是一个无状态(stateless)对象,需要begin和end值.Tween的唯一职责就是定义从输入范围到输出范围的映射.输入范围通常为0.0到1.0,

【Flutter学习】基本组件之Webview组件

1.添加依赖 dependencies: flutter_webview_plugin: ^0.2.1+2 2.导入库 import 'import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; //导入前需要配置 3.属性 const WebviewScaffold({ Key key, this.appBar, @required this.url, this.headers,// this.withJavascr