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

會煮咖啡的貓發表於2020-06-23

B站視訊

www.bilibili.com/video/BV19E…

本節目標

  • 加入圖片資源
  • 加入字型資源
  • 設計稿適配
  • 編寫介面程式碼的邏輯和組織

1 加入圖片資源

1.1 flutter 圖片資源規則

  • 官方說明

flutter.dev/docs/develo…

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

按這個規則編排,flutter 自動適配解析度圖片

  • assets 目錄

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

  • yaml 配置
assets:
  - assets/images/
複製程式碼
  • 程式碼呼叫
Image.asset("assets/images/logo.png")
複製程式碼

1.2 藍湖切圖

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

注意選著下 ios 目標,這樣會自動切圖 1x 2x 3x 三種格式

2 加入字型資源

  • 官方說明

flutter.dev/docs/cookbo…

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

  • assets 目錄

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

只上傳用到的 ttf 字型,這樣能控制打包大小

  • yaml 配置
fonts:
  - family: Avenir
    fonts:
      - asset: assets/fonts/Avenir-Book.ttf
        weight: 400
  - family: Montserrat
    fonts:
      - asset: assets/fonts/Montserrat-SemiBold.ttf
        weight: 600
複製程式碼
  • 程式碼呼叫

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

3 編寫歡迎介面

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

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

3.2 設計稿適配

外掛 flutter_screenutil

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

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

按設計稿比例適配

3.3 工具函式

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

  • 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 常量配置

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

  • 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 程式碼拆分

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

儘可能的拆分到不同的函式,方便維護

再複雜的業務,可以拆分到不同的元件檔案,如 welcome_header_widget.dart welcome_feature_widget.dart welcome_buttons_widget.dart

git 程式碼

github.com/ducafecat/f…

藍湖設計稿

lanhuapp.com/url/lYuz1 密碼: gSKl

藍湖現在收費了,所以檢視標記還請自己上傳 xd 設計稿 商業設計稿檔案不好直接分享, 可以加微信聯絡 ducafecat

視訊

參考

相關文章