import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "多窗口切换标题",
      home: Scaffold(
        appBar: AppBar(title: Text("图片练习"),),
        body: Imagertc(),
      ),
    );
  }
}


// const Image({
//   ...
//   this.width, //图片的宽
//   this.height, //图片高度
//   this.color, //图片的混合色值
//   this.colorBlendMode, //混合模式
//   this.fit,//缩放模式
//   this.alignment = Alignment.center, //对齐方式
//   this.repeat = ImageRepeat.noRepeat, //重复方式
//   ...
// })


//图片默认显示状态
class Images extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Image.network("https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C237%2C321%3Bh%3D570%3Bq%3D95/sign=8266f774ec1190ef15b4c89ff32bb126/0b7b02087bf40ad1658ae07a5c2c11dfa9ecce38.jpg") ;
  }
}

class Images_fit extends StatelessWidget{
  ///让图片自适应,在外围包裹了个container
  ///设置container的宽度和高度即可
  ///默认情况下container的宽高和子元素大小一样
  ///
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      color: Colors.blue, //container背景颜色
      width: double.infinity, //100%宽度
      height: double.infinity,//100%高度
      child:   Image.network(
            "https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C237%2C321%3Bh%3D570%3Bq%3D95/sign=8266f774ec1190ef15b4c89ff32bb126/0b7b02087bf40ad1658ae07a5c2c11dfa9ecce38.jpg",

            // fit：该属性用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。如果不带这个参数他将居中显示图片的原始宽高 适应模式是在BoxFit中定义，它是一个枚举类型，有如下值：
            // fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。
            // cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。
            // contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
            // fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
            // fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
            // none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分
            fit: BoxFit.fill,
            //平铺的排列方式 有4个值可选择 repeat,repeatX,repeatY,noRepeat 
            //repeat=在x和y方向上都重复图像，直到填满该框。
            //noRepeat = 不平铺
            repeat:ImageRepeat.noRepeat, 
            ///图片自身的宽高
            ///如果这里设置了fit没有设置宽高,则以container的宽高为准
            width: 500,
            height: 700,
            //图片显示空间和图片大小不一致时候的对齐方式 center=居中对齐,还有topLeft等值
            alignment: Alignment.topLeft,
          ),
    );
  
  }
}

class Imagertc extends StatelessWidget{
  //查看在图片外围包裹row和column的效果是什么样子的
  //事实怎么图片外面包裹row和colnmn是没有任何效果的
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Image.network(
            "https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C237%2C321%3Bh%3D570%3Bq%3D95/sign=8266f774ec1190ef15b4c89ff32bb126/0b7b02087bf40ad1658ae07a5c2c11dfa9ecce38.jpg",
            fit: BoxFit.fill,
            alignment: Alignment.center,
          )
      ],
    );
  }
}

flutter的图片处理,主要是网络图片,本地图片没写,个人觉得没必要,主要是比较麻烦

图片主要写了3个测试demo

1:默认什么都不加的样子

2:外围加了container,图片和外围cointainer的配合显示,包括自适应,排版,宽高,图片和container的宽高配合

3:外围增加了row和column的样式,事实证明,增加了这2个一点用也没有...

代码里面都增加了详细的注解,大家应该能看明白