<address id="r9vd9"><address id="r9vd9"><listing id="r9vd9"></listing></address></address>

      歡迎您光臨深圳塔燈網絡科技有限公司!
      電話圖標 余先生:13699882642

      網站百科

      為您解碼網站建設的點點滴滴

      Flutter 中添加靜態資源

      發表日期:2018-10 文章編輯:小燈 瀏覽次數:2807

      一個應用程序少不了一些靜態資源,例如:圖片、字體、配置文件等。這些靜態資源會打包到程序安裝包中,可以在運行時訪問。
      Flutter 中添加靜態資源很簡單,將靜態資源放置在任意目錄(通常是根目錄下的 assets 文件夾中),然后在配置文件中 pubspec.yaml 中指定即可。每個 asset 都通過相對于 pubspec.yaml 文件所在位置的路徑進行標識。asset 的聲明順序是無關緊要的。
      在構建期間,Flutter 將 asset 放置到稱為 asset bundle 的特殊存檔中,應用程序可以在運行時通過 AssetBundle 對象訪問。

      查看示例代碼。

      assets.png

      加載文本

      每個 Flutter 應用程序都有一個 rootBundle 對象, 可以輕松訪問主資源包,也可以直接使用 package:flutter/services.dart 中全局靜態的rootBundle 對象來加載 asset。

      但是,建議使用 DefaultAssetBundle.of 來獲取當前 BuildContext 的 AssetBundle。這種方法不是使用應用程序構建的默認 asset bundle,而是使父級 widget 在運行時替換的不同的 AssetBundle ,這在本地化或測試時很有用。

      接下來以讀取本地 JSON 文件為例進行說明。

      創建 assets/person.json 文件,并寫入以下內容:

      [ { "name": "Tom", "age": 23, "height": 172, "gender": "male" }, { "name": "Jerry", "age": 18, "height": 163, "gender": "male" }, { "name": "Lina", "age": 30, "height": 180, "gender": "female" } ] 

      pubspec.yaml 中配置資源:

      flutter: assets: - assets/person.json 

      接著,創建一個頁面,用來展示 JSON 數據:

      import 'dart:convert' show json;import 'package:flutter/material.dart';class Assets extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Assets'), ), body: new JsonView(), ); } }class JsonView extends StatefulWidget { @override State<StatefulWidget> createState() { return new _JsonViewState(); } }class _JsonViewState extends State<JsonView> { @override Widget build(BuildContext context) { return new FutureBuilder( future: DefaultAssetBundle.of(context).loadString("assets/person.json"), builder: (context, snapshot) { if (snapshot.hasData) { List<dynamic> data = json.decode(snapshot.data.toString());return new ListView.builder( itemCount: data.length, itemBuilder: (BuildContext context, int index) { return new Card( child: new Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ new Text("Name: ${data[index]["name"]}"), new Text("Age: ${data[index]["age"]}"), new Text("Height: ${data[index]["height"]}"), new Text("Gender: ${data[index]["gender"]}"), ], ), ); }, ); } return new CircularProgressIndicator(); }, ); } } 

      這里主要使用了 DefaultAssetBundle.of() 獲取 AssetBundle,然后使用 FutureBuilder 組件顯示異步數據。

      加載圖片

      Flutter 中使用 AssetImage 組件展示圖片。Flutter 會根據當前設備的分辨率加載對應的圖片,我們只需要按照特定的目錄結構來放置圖片,例如:

      assets ├── images ├── wechat.png ├── 2.0x ├── wechat.png ├── 3.0x ├── wechat.png 

      使用時:

      new Image.asset("assets/images/wechat.png")// or new Image( image: new AssetImage("assets/images/wechat.png"), ), 

      加載字體

      下載字體并在 pubspec.yaml 中配置,這里的配置方式和前面有一點區別:

      fonts: - family: Charmonman fonts: - asset: assets/fonts/Charmonman-Regular.ttf - asset: assets/fonts/Charmonman-Bold.ttf weight: 500 

      其中 weight 屬性指定字體的粗細,對應 TextStylefontWeight 屬性,會匹配對應的字體。同理還有 style 屬性,對應的值為 italicnormal。

      使用時,通過 TextStyle 指定對應的字體即可:

      new Text( "A red flair silhouetted the jagged edge of a wing.", style: new TextStyle( fontFamily: "Charmonman", fontSize: 17.0, fontWeight: FontWeight.w500, ), ) 

      使用字體圖標

      字體圖標的使用和普通字體使用沒太大區別,只是文本內容使用對應圖標的 Unicode 碼點即可:

      new Text( "\u{e7d7}", style: new TextStyle( fontFamily: "Iconfont", fontSize: 36.0, ), ), 

      本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得,所有資料僅供用戶學習參考,本站不擁有所有權,如您認為本網頁中由涉嫌抄襲的內容,請及時與我們聯系,并提供相關證據,工作人員會在5工作日內聯系您,一經查實,本站立刻刪除侵權內容。本文鏈接:http://www.webpost.com.cn/17641.html
      相關APP開發
       八年  行業經驗

      多一份參考,總有益處

      聯系深圳網站公司塔燈網絡,免費獲得網站建設方案及報價

      咨詢相關問題或預約面談,可以通過以下方式與我們聯系

      業務熱線:余經理:13699882642

      Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.    

      国产成人精品综合在线观看