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

        

     

     

]

         )

}

}

 

猜你喜欢

转载自www.cnblogs.com/fgxwan/p/10056855.html