1. 程式人生 > >flutter進階與提高

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

        

     

     

 

 

]

         )

}

}