flutter学习图片组件

Posted 2022-02-18 临风而眠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flutter学习图片组件相关的知识，希望对你有一定的参考价值。

flutter学习(3)图片组件

文章目录

flutter学习(3)图片组件

复习之前搭建好的基本框架

import 'package:flutter/material.dart';

void main()
  runApp(MyApp());


class MyApp extends StatelessWidget
  @override
  Widget build(BuildContext context)
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar (title: Text("flutter demo")),
        body:HomeContent()
      )
      );

  


class HomeContent extends StatelessWidget
  Widget build(BuildContext context)
    return Center(
      child: Container(
        width:300,
        height: 300,
        decoration: BoxDecoration(
          color:Colors.red
        ),
      )
    );

效果

flutter图片组件

图片组件时显示图像的组件,Image组件里有很多构造函数

这次就学习本地图片Image.asset 和远程图片Image.network两个组件

Image组件常用属性

BoxFit.cover：显示可能拉伸，可能裁切，充满(图片要充满整个容器，还不变形)

一.远程图片

图片最好放在一个container里面

图片作为Container的子组件

在原先框架的基础上

冬奥会来啦，网上找一个冰墩墩的图片叭！

import 'package:flutter/material.dart';
import 'package:testforgramma/main_bk2.dart';
void main()
  runApp(MyApp());


class MyApp extends StatelessWidget
  Widget build(BuildContext context)
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("FlutterDemo")),
        body: HomeContent(),
      )
    );
  


class HomeContent extends StatelessWidget
  Widget build(BuildContext context)
    return Center(
      child: Container(
        child: Image.network("https://img.fx361.cc/images/2022/01/22/qkimagesywsxywsx202201ywsx20220114-1-l.jpg"),
        width:300.0,
        height: 300.0,
        decoration: BoxDecoration(
          color:Colors.red
        ),
      )
    );

效果

alignment属性

让图片显示到左上角: alignment : Alignment.topLeft

官方文档：默认是中央Alignment.center

return Center(
	child: Container(
		child: Image.network(
			"https://img.fx361.cc/images/2022/01/22/qkimagesywsxywsx202201ywsx20220114-1-l.jpg",
		alignment: Alignment.topLeft,
		),
		width:500.0,
		height:500.0,
		decoration: BoxDecoration(
			color: Colors.red
		),
	)
	
);

效果

颜色属性

color: Colors.lightBlueAccent,
            colorBlendMode: BlendMode.screen,

效果：

重要属性fit

fit:BoxFit.cover

效果

那个冰墩墩是正方形的图片，找一张长方形图片来试试

        child: Image.network(
            "http://p6.itc.cn/q_70/images03/20201207/56b608773b7b478287921c1ae021ac0a.png",
            alignment: Alignment.center,

            fit:BoxFit.cover
        ),

效果

fit: Boxfit.fill的效果如下

二.Flutter实现圆角以及实现圆形图片

法一

Container BorderRadius和Boxdecration的image属性结合

先回顾一下之前学习过的BorderRadius

class HomeContent extends StatelessWidget
  Widget build(BuildContext context)
    return Center(
      child: Container(

        width:400.0,
        height: 300.0,
        decoration: BoxDecoration(
          color:Colors.red,
          borderRadius : BorderRadius.all(
            Radius.circular(150),
          )
        ),
      )
    );

实现圆形

先把Container容器设置为正方形，然后circular里面的参数大小为正方形边长的一半

class HomeContent extends StatelessWidget 
	Widget build(BuildContext context) 
		return Center(
			child : Container(
				width:300,
				height:300
				decoration: BoxDecration(
					color: Colors.red,
					borderRadius: BorderRaidus.circular(150)
				),
			)
		);

效果

方法文档

把图片插进去

class HomeContent extends StatelessWidget 
  Widget build(BuildContext context) 
    return Center(
        child: Container(

          width: 300.0,
          height: 300.0,
          decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(150),
              image: DecorationImage(
                image:NetworkImage( "http://p6.itc.cn/q_70/images03/20201207/56b608773b7b478287921c1ae021ac0a.png",
                    ),
                  fit: BoxFit.cover
              )
          ),
        )
    );

效果

法二(较简单)

ClipOval组件

image的height和width一般要结合ClipOval使用才能看到效果

拿张图片试试

class HomeContent extends StatelessWidget 
  Widget build(BuildContext context) 
    return Center(
        child: Container(

          child: ClipOval(
            child: Image.network("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Feac64a49-e717-7e41-a592-5b7bee20297c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646920654&t=40f05d8a75f0143d877f9d19ad886e43")
          )
        )
    );

效果

加上height,width属性

width:100,

height:100

此时依旧不是圆形

加上fit属性

class HomeContent extends StatelessWidget 
	Widget build(BuildContext context) 
		return Center(
			child: Container(
			
				child: ClipOval(
					child: Image.network("url省略",
					height:100,
					width:100,
					fit:BoxFit.cover
					)
				
				)
			
			)
		
		);

三.本地图片

1.新建目录结构

2.修改pubspec.yaml文件

注意这种报错

至于为什么要设置2.0x 3.0x 看这位大佬的文章:👉详解flutter中本地资源图片的使用

3.示例

本地图片容易出bug，如果没加载出来试着先终止项目，重新flutter run

class HomeContent extends StatelessWidget 
  Widget build(BuildContext context) 
    return Center(
      child:Container(
          child: Image.asset(
              "images/a.jpg",
              fit:BoxFit.cover
          ),
          width:300.0,
          height: 300.0,
          decoration: const BoxDecoration(
              color:Colors.yellow
          )
      )

    );