[移动开发]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"),
       )
      )

    );
  }
}