flutter進階與提高
1,圖片的使用
載入圖片:當根目錄新建一個檔案,命門隨意,本處於image為例,然後在下面可以放圖片,因為移動端屏墓大小不同,圖片大小不同,可以在建一個倍率大小的相同名字檔案,用於適配
節構如下:
image資料夾
2.0資料夾
xx.jpg
xxx1.jpg
然後在pubspes.yaml 檔案圖片配置那兒引用:第三37行,user_materia;-design:true 下面有關於圖片資源配團置,
assets:
- images/xx.jpg
- image/xxx1.fpg
對於圖片太多,可以不給檔名真接:- image/ 表示全部匯入,
為了演示,我們首先建二個檔案,一個入口主程式,進入後用生命週期載入後自動跳轉到另一個路由的方法來演示:
主路由程式碼:
import 'package:flutter/material.dart'
import 'images.dart' / /匯入另一個路由的介面
void main() =>runApp(new MyApp());
class MyApp extends StatelesWidget
@override
Widget build(BuildContext context){
return new MaterialApp(
home: new MyHomePage(titile:'Flutter Demo Home Page'),
routes:<String,WidgetBuilder>{ //定義路由
'imagepage' :(BuildContext context)=>new ImagePage(),
},
initialroute: ' imagepage',
)
}
} //本程式碼是在瀏覽器打,為了練指法,只是示意,沒有效驗單詞,紅色標記為重點
新建一個檔案存放imagepape程式碼:
class MyApp extends StatelesWidget{
@override
Widget build(BuildContext context){
return new scaffold(
appBar:appBar(
title:text("imagepage")
)
body: new listView( // listview 控制元件,在他指定的方法列表佈局,
children:<Widget>[
//圖片呼叫網路,本地,呼叫方法不一樣,大約為為network file assetImage等圖片,這兒先於資原始檔assetImage呼叫為例:
new Image(image:AssetImage('image/xxxx.jpg')) //new一張圖片
// 在於本地載入方法載入一張圖片:並在圖片後面直接加屬性來操作樣式:
Image.asset(''image/xxx.jpg,
width:200.0, // 寬
height 150.0, //長
colorBlendMode:BlendMode.colorBurn, //混合色,需要與 color屬性混合,
color: Colors.green // 色度
repeat: ImageRepeat.noRepeat //重複
Directionality //方向
centerSlice, //中心縮放
matchTextDirection // 鏡向 ,需要與方向配合
gaplessPlayback=false 切換圖片時過度
),
下面是有關圖片設定的方法
讀取本地檔案 ,這兒需要匯入io包
還要配置許可權:
android -> app->src->main - >AndroidManiFest.xml 第六行下面加入:網路許可權也預設有,只需增加本地許可權:
<user-permission androin:name="android.permission.INTERNET">
<user-permission android:name="andrid.permission.READ__EXTERNAL_STORAGE">
import 'dart:io';
Image.file(new file: '/storage/emulated/0/Download/')
網路請求圖片:
Image.network('www.baidu.com/xxxx/sss.jpg')
]
)
)
}
}