【Flutter学习笔记】应用内添加图片

599 阅读1分钟

使用Image.network()

直接在network()添加图片的网络地址URL。

import 'package:flutter/material.dart';

void main(){
  runApp(HomaPage());
}

class HomaPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            "Image"
          ),
        ),
        body: Image.network("https://alifei03.cfp.cn/creative/vcg/800/new/VCG211147957933.jpg"),
      ),
    );
  }
}

显示效果如下:

image.png

使用本地资源Image.asset()

首先在项目的根目录创建一个文件夹assets, 然后可以把包含图片的文件夹复制到该目录下,也可以直接把图片放到该文件里面。

image.png

然后在pubspec.yaml文件添加对资源的引用,找到如下图所示内容取消注释,然后根据自己的图片的存放方式写下路径。两种写法,一种是写下所有图片的完整路径,一种是只写包含图片的文件夹。

image.png

# To add assets to your application, add an assets section, like this:
assets:
  - assets/images/p1.jpg
  - assets/images/p2.jpg
  - assets/images/p3.jpg
# To add assets to your application, add an assets section, like this:
assets:
  - assets/images/

该文件更新后,记得点击上边的pub get

image.png

然后在代码里面引用图片即可

import 'package:flutter/material.dart';

void main(){
  runApp(HomaPage());
}

class HomaPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            "Image"
          ),
        ),
        body: Image.asset("assets/images/p3.jpg"),
      ),
    );
  }
}

显示效果如下

image.png

其它方式

未完待续