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')

　　　　　　　　

　　　　　

　　　　　

 

 

]

         )

）

}

}