首页 > 其他 > 详细

flutter-图片组件(Image)的使用

时间:2020-07-02 15:13:17      阅读:61      评论:0      收藏:0      [点我收藏+]

文档:https://book.flutterchina.club/chapter5/container.html

加入图片的几种方式

  • Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径。
  • Image.network:网络资源图片,意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
  • Image.file:加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关。
  • Image.memory: 加载Uint8List资源图片
//必须有封号  material就是个UI 
import ‘package:flutter/material.dart‘;
//这是个主函数入口
void main()=>runApp(MyApp());
// 也可以这么写
// void main(){
//   runApp(MyApp())
// }

// 声明MyApp类
class MyApp extends StatelessWidget{
  // 重写build
  @override
  Widget build(BuildContext context){
    //返回一个Material风格的App
    return MaterialApp(
      title:‘Welcome to Flutteraa‘,
      home: Scaffold(
        // 在主题的中间区域,添加一个文本  Center:屏幕的中间
        body: Center(
          // child:Container(
          //   child:new Image.network(
          //https://avatars2.githubusercontent.com/u/20411648?s=460&v=4‘,
          //     // scale:1.0,
          //     width: 100.0,
          //     height: 100.0,
          //   ),
          //   width:300.0,
          //   height:300.0,
          //   color: Colors.lightBlue,
          // ),
          child: Container(
            child: Image(
              image: AssetImage("images/2222.png"),
              //缩放模式
              fit: BoxFit.scaleDown,
              color: Colors.greenAccent,
              //背景色 
              colorBlendMode: BlendMode.darken,
              //重复
              repeat: ImageRepeat.repeat,
            ),
            width: 400.0,
            height: 500.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

 

flutter-图片组件(Image)的使用

原文:https://www.cnblogs.com/lxz-blogs/p/13224227.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!