Flutter 图片的使用

2018-08-04  本文已影响0人  ZhiPengTu

效果图


image.png

1.本地asset中读取

从本地中获取

a.打开pubspec.yaml设置(这里格式很重要!)

flutter:
  assets:
    - images/timg.jpeg

b.根目录新建 images 文件夹

image.png

c.代码

        new Image.asset(本地静态资源的地址)    
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new MyImg(),
    );
  }
}

class MyImg extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title:'图片如何放入',
      home: new Scaffold(
        body: new Center(
         child: new Image.asset('images/timg.jpeg'),    
        ),
      )
    );
  }

}


2.从网络获取

        new Images.network(网络资源https/http)
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new MyImg(),
    );
  }
}

class MyImg extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title:'图片如何放入',
      home: new Scaffold(
        body: new Center(
        child: new Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533368711441&di=9517daea3b4fc02d74b27a1f0e2d11f8&imgtype=0&src=http%3A%2F%2Fimage13-c.poco.cn%2Fmypoco%2Fmyphoto%2F20121102%2F22%2F66582707201211022200252633924731300_000_640.jpg'),
        ),
      )
    );
  }

}

3.从缓存中读取(待更新)

送人玫瑰,手留余香。

上一篇 下一篇

猜你喜欢

热点阅读