前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter Image 使用

Flutter Image 使用

作者头像
赵哥窟
发布2019-09-19 19:07:29
8620
发布2019-09-19 19:07:29
举报
文章被收录于专栏:日常技术分享日常技术分享

看一段简单的Flutter代码,直接复制到main.dart就可以

代码语言:javascript
复制
import 'package:flutter/material.dart';
import 'dart:ui';

void main() => runApp(ImageViewPage());

class ImageViewPage extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Flutter Image"),
        ),
        body: new ListView(
          children: [assetsImage, networkImage],
        ),
      ),
    );
  }

  // assets图片
  Container assetsImage = new Container(
    child: new Image.asset(
      "assets/images/flutter_img.jpeg",
      width: window.physicalSize.width,
      height: 240.0,
      //类似于Android的scaleType 此处让图片尽可能小 以覆盖整个widget
      fit: BoxFit.cover,
    ),
  );

  // 网络图片
  Container networkImage = new Container(
      // 距离上一个组件的margin
      margin: EdgeInsets.all(10.0),
      child: new ClipRRect(
        // 圆角
        borderRadius: BorderRadius.circular(10.0),
        child: new Image.network(
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554110093883&di=9db9b92f1e6ee0396b574a093cc987d6&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn20%2F151%2Fw2048h1303%2F20180429%2F37c0-fzvpatr1915813.jpg",
          width: window.physicalSize.width,
          height: 240.0,
          //类似于Android的scaleType 此处让图片尽可能小 以覆盖整个widget
          fit: BoxFit.cover,
        ),
      ));
}

效果

Simulator Screen Shot - iPhone Xʀ - 2019-09-05 at 16.18.21.png

Flutter 加载assets图片

1.lib 同级目录下新建一个assets文件夹 2.pubspec.yaml 配置

代码语言:javascript
复制
assets:
    - assets/images/flutter_img.jpeg

然后点击Packages get 以下代码就可以加载assets下的图片

代码语言:javascript
复制
// assets图片
  Container assetsImage = new Container(
    child: new Image.asset(
      "assets/images/flutter_img.jpeg",
      width: window.physicalSize.width,
      height: 240.0,
      fit: BoxFit.cover,
    ),
  );
Flutter 加载网络图片
代码语言:javascript
复制
child: new Image.network(
          "imageUrl",
          // 屏幕宽度
          width: window.physicalSize.width,
          height: 240.0,
          fit: BoxFit.cover,
),
设置图片圆角
代码语言:javascript
复制
new ClipRRect(
    borderRadius: BorderRadius.circular(6.0),
    child: new Image.network(
    )
),
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.09.18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Flutter 加载assets图片
  • Flutter 加载网络图片
  • 设置图片圆角
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档