Flutter 新聞客戶端 - 02 設計稿適配、加入圖片字體資源、歡迎界面

時間 2020-06-27

標籤 flutter 客戶端設計適配加入圖片字體資源歡迎界面简体版

原文原文鏈接

B站視頻

www.bilibili.com/video/BV19E…ios

本節目標

加入圖片資源
加入字體資源
設計稿適配
編寫界面代碼的邏輯和組織

1 加入圖片資源

1.1 flutter 圖片資源規則

官方說明

flutter.dev/docs/develo…git

按這個規則編排，flutter 自動適配分辨率圖片github

yaml 配置

assets:
 - assets/images/
複製代碼

代碼調用

Image.asset("assets/images/logo.png")
複製代碼

1.2 藍湖切圖

注意選着下 ios 目標，這樣會自動切圖 1x 2x 3x 三種格式微信

2 加入字體資源

官方說明

flutter.dev/docs/cookbo…markdown

只上傳用到的 ttf 字體，這樣能控制打包大小app

yaml 配置

fonts:
 - family: Avenir
 fonts:
 - asset: assets/fonts/Avenir-Book.ttf
 weight: 400
 - family: Montserrat
 fonts:
 - asset: assets/fonts/Montserrat-SemiBold.ttf
 weight: 600
複製代碼

代碼調用

3 編寫歡迎界面

3.1 從上到下、從左到右、由大到小

3.2 設計稿適配

插件 flutter_screenutilide

pub.flutter-io.cn/packages/fl…函數

按設計稿比例適配工具

3.3 工具函數

screen.dart 設計稿適配函數

import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 設置寬度
double duSetWidth(double width) {
  return ScreenUtil().setWidth(width);
}

/// 設置寬度
double duSetHeight(double height) {
  return ScreenUtil().setHeight(height);
}

/// 設置字體尺寸
double duSetFontSize(double fontSize) {
  return ScreenUtil().setSp(fontSize);
}
複製代碼

utils.dart 導出類庫

library utils;

export 'screen.dart';
複製代碼

3.4 常量配置

colors.dart 顏色

import 'dart:ui';

class AppColors {
  /// 主文本
  static const Color primaryText = Color.fromARGB(255, 45, 45, 47);

  /// 主控件-背景
  static const Color primaryElement = Color.fromARGB(255, 41, 103, 255);

  /// 主控件-文本
  static const Color primaryElementText = Color.fromARGB(255, 255, 255, 255);
}
複製代碼

values.dart 導出類庫

library values;

export 'colors.dart';
複製代碼

3.5 代碼拆分

儘量的拆分到不一樣的函數，方便維護字體

再複雜的業務，能夠拆分到不一樣的組件文件，如 welcome_header_widget.dart welcome_feature_widget.dart welcome_buttons_widget.dart

git 代碼

github.com/ducafecat/f…

藍湖設計稿

lanhuapp.com/url/lYuz1 密碼: gSKl

藍湖如今收費了，因此查看標記還請本身上傳 xd 設計稿商業設計稿文件很差直接分享, 能夠加微信聯繫 ducafecat

視頻

參考

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。