flutter展示图片_dart 如何显示一张图片-程序员宅基地

技术标签: flutter  flutter学习  

一:相关配置

 ,如上图所示,在根目录同级的地方,添加相关文档夹,然后在pubspec.yaml

这个文件写如下内容

  assets:

    - images/show.jpg

    - images/2.0x/show.jpg

    - images/3.0x/show.jpg

该内容用来配置本地的图片的路径

二:代码

1,正常展示图片

// ignore: file_names
//展示正常的图片


import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MainContant());
}

class MainContant extends StatelessWidget {
  const MainContant({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: const Text("flutter demo")),
          body: const ShowContant()),
      theme: ThemeData(primarySwatch: Colors.blue,
    )
    );
  }
}

class ShowContant extends StatelessWidget {
  const ShowContant({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(// 首先创建一个容器
      child: Container(
        // 其次,往容器里面添加一张图片
        // 容器里面添加一张图片,自然是一个child
        // 通过Image.network加载远程图片,并且加载图片,可以通过Image.某某来进行查找,上面有相关的提示,一共有4种提示
        // child: Image.network("https://image.baidu.com/search/detail"),
        // 通过本地加载图片
        child: Image.asset("images/show.jpg",
        // 添加对其因素
        //   alignment: Alignment.topLeft,
          // 是否重复
          // repeat: ImageRepeat.repeatY,
          // 设置图片显示标准,溢出还是全部放入,cover是指全部放入,会裁剪,显示最合适的效果
          fit: BoxFit.cover,

        ),
        width: 300,
        height: 300,
        decoration: const BoxDecoration(
          // 默认装饰盒子,显示是一个正方形,我们可以把它设置为一个圆形
          // borderRadius: BorderRadius.all(Radius.circular(150)),
          color: Colors.yellow
        ),
      )

    );
  }
}
 

2,展示圆形图片

// ignore: file_names
// 需求,在一个圆形里面展示图片


import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MainContant());
}

class MainContant extends StatelessWidget {
  const MainContant({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: const Text("flutter demo")),
          body: const ShowContant()),
      theme: ThemeData(primarySwatch: Colors.blue,
    )
    );
  }
}

class ShowContant extends StatelessWidget {
  const ShowContant({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(// 首先创建一个容器
      child: Container(
        width: 300,
        height: 300,
        decoration: BoxDecoration(
          // 默认装饰盒子,显示是一个正方形,我们可以把它设置为一个圆形
          // borderRadius: BorderRadius.all(Radius.circular(150)),
          borderRadius: BorderRadius.circular(150),
          image: const DecorationImage(image: AssetImage("images/show.jpg"),
          // 在一个圆形中实现图片覆盖的效果
          fit: BoxFit.cover
          ),
          color: Colors.yellow
        ),
      )

    );
  }
}
 

3,展示自适应圆形图片

// ignore: file_names
// 需求,在一个圆形里面展示图片


import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MainContant());
}

class MainContant extends StatelessWidget {
  const MainContant({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: const Text("flutter demo")),
          body: const ShowContant()),
      theme: ThemeData(primarySwatch: Colors.blue,
    )
    );
  }
}

class ShowContant extends StatelessWidget {
  const ShowContant({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(// 首先创建一个容器
      child: Container(
        // 这种方式,会自适应,根据图片的形状,来变成对应的图片
       child: ClipOval(
         child: Image.asset("images/show.jpg"),
       )
      )

    );
  }
}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34790227/article/details/123621897

智能推荐

IOS 学习笔记 提示框 操作表 UIAlertController ActionSheet_uialertcontrollerstyleactionsheet-程序员宅基地

文章浏览阅读3.6k次。在IOS开发中,提示框、操作表 都是通过UIAlertController +UIAlertAction来实现的,同时通过gif图生动展示效果 _uialertcontrollerstyleactionsheet

servlet-第一次使用HelloServlet(mac)_mac如何使用servlet-程序员宅基地

文章浏览阅读379次。servlet既基础又重要,不用就忘,用了总会发现各种bug,所以需要不断记录和积累bug案例。_mac如何使用servlet

vc mysql 连接_vc连接mysql数据库的方法-程序员宅基地

文章浏览阅读178次。前段时间项目中用的是mysql数据库,它的连接方法有二种,一种是数据库自带的API,还有一种就用ADO连接了。由于本次项目用的mysql数据库只是暂时的,后期可能会更改为MSSQL,所以如果用mysql自带的API连接移植性不好,所以改为ADO的,到时只要修改下字符串连接值就行了。其实ADO连接的底层也是调用的ODBC驱动去连接,所以需要去下载个数据库对应的ODBC驱动,别人说秘本需要对应,要不然..._cadodatabase 连接mysql

linux安装kodexplorer云网盘_linux 安装免费网盘-程序员宅基地

文章浏览阅读1.1k次。1.上传kodexplorer4.25.zip和xampp-linux-x64-5.6.33-0-installer.run2.先安装xampp授权:chmod 777 xampp-linux-x64-5.6.33-0-installer.run执行:./xampp-linux-x64-5.6.33-0-installer.run3.启动xampp,执行/opt/lampp/lampp..._linux 安装免费网盘

Objective-C EXC_BAD_ACCESS_objectivec bad access代码-程序员宅基地

文章浏览阅读583次。本文转自 http://ibuick.com/buick2011820/index.php/archives/objective-c-exc_bad_access写程序遇到 Bug 并不可怕,大部分的问题,通过简单的 Log 或者 代码分析并不难找到原因所在。但是在 Objective-C 编程中遇到 EXC_BAD_ACCESS 问题的时候,通过简单常规的手段很难发现问题。这篇文章,给大家介绍一个常用的查找 EXC_BAD_ACCESS 问题根源的方法。首先说一下 EXC_BAD_ACCESS 这个错误,_objectivec bad access代码

Java Web项目CPU超过100%问题分析总结-程序员宅基地

文章浏览阅读274次。涉及到通讯底层的IO读写,也就是 SOCKET 这一块的内容。由于应用本身的特点,每天早上上班高峰时间,有大量的请求连接和数据通讯,系统的压力非常大。期间有CPU 使用率超过100%的情况。我这里分享一下,我们团队解决这类问题的分析手段。系统影响慢或可能无法访问,服务器上发现swap占用很高,负载和cpu通过zabbix监控看比代码升级前都要高.因服务器核数少,仔细观察有一个cpu利用率一直是10..._web占用100%cpu吗?

随便推点

”System.InvalidOperationException”类型的未经处理的异常出现在 mscorlib.dll 中_“system.invalidoperationexception”类型的未经处理的异常在 msco-程序员宅基地

文章浏览阅读5.4k次。如果调试的时候 调试窗口出现System.InvalidOperationException”类型的未经处理的异常出现在 mscorlib.dll 中那是因为你在历遍集合的时候 改变了集合。。。。_“system.invalidoperationexception”类型的未经处理的异常在 mscorlib.dll 中发

2020年天梯赛-模拟赛 L1-6 检查密码_本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能。该网站要求用-程序员宅基地

文章浏览阅读858次。题目描述:本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能。该网站要求用户设置的密码必须由不少于6个字符组成,并且只能有英文字母、数字和小数点 .,还必须既有字母也有数字。输入格式:输入第一行给出一个正整数 N(≤ 100),随后 N 行,每行给出一个用户设置的密码,为不超过 80 个字符的非空字符串,以回车结束。输出格式:对每个用户的密码,在一行中输出系统反馈信息,分以下5种:如果密码合法,输出 Your password is wan mei.;如果密码太短,不论合法与否,都_本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能。该网站要求用

海量数据肖枫:共建共治openGauss根社区,共享欣欣向荣新生态_肖枫的博客-程序员宅基地

文章浏览阅读366次。在近日举行的面向数据库开发者的年度活动openGauss Developer Day 2022上,神舟通用、云和恩墨、超图软件、南大通用、海量数据、超聚变、中国联通七家重量级伙伴及行业客户同时发布基于openGauss 3.0的商业发行版,其中超图软件、云和恩墨和海量数据还基于社区联合创新孵化出业界首个基于openGauss的空间数据库Yukon(禹贡),创下了国产开源数据库领域的里程碑时刻。会后,极客网对话深度参与其中的中国唯一以数据库为主营业务主板上市的海量数据公司的总裁肖枫,听他讲述了openGaus_肖枫的博客

AJAX与callback的区别(续asp.net2.0客户端回调的使用)-程序员宅基地

文章浏览阅读71次。先引用《AJAX .Net Wrapper usage guide》里面的一段话:Asynchronous JavaScript and XML (AJAX) has recently become the craze thanks,... In ASP.Net terms, AJAX allows server-side processing to occur without requiring..._asp.net raisecallbackevent 和ajax区别

python安装xgboost的前提问题_xgb1.7.5-程序员宅基地

文章浏览阅读233次。xgboost依赖于numpy和scipy,但是我numpy和scipy下载方式不一样,numpy从源网下载,scipy从豆瓣镜像源下载,出现了不匹配的问题卸载numpy和scipy然后统一从豆瓣镜像源下载后问题解决。在此顺便安利豆瓣镜像源,pip安装Python第三方库速度超级快,原文地址点击打开链接我用的Python2.7,windows10,cmd里输入网址时要用http_xgb1.7.5

【原创 gif】-程序员宅基地

文章浏览阅读67次。视频转gif高质量gif在线制作编辑gifscreengif 软件 点击编辑可以剪裁 和删除 增加帧screengif吊的不行