一,概述

  Image(图片组件)是显示图像的组件,一个显示图片的widget,支持图像格式:JPEG,PNG,GIF,动画GIF,WebP,动画WebP,BMP和WBMP。 Image组件有多种构造函数:

  • new Image: 从ImageProvider获取图像。
  • new Image.asset: 加载本地图片文件。
  • new Image.file: 加载本地图片文件。
  • new Image.network: 加载网络图片。
  • new Image.memory: 加载Uint8List资源图片。

二,继承关系

  • Object > Diagnosticablet > DiagnosticableTreet > Widgett > StatefulWidgett > Image

三,构造方法

  • new Image: 从ImageProvider获取图像。

    • 类名构造方法,它指定了图片是从哪里加载,是从项目中还是网络中等等。  

      
      const Image({
      Key key,
      @required this.image,
      this.frameBuilder,
      this.loadingBuilder,
      this.semanticLabel,
      this.excludeFromSemantics = false,
      this.width,
      this.height,
      this.color,
      this.colorBlendMode,
      this.fit,
      this.alignment = Alignment.center,
      this.repeat = ImageRepeat.noRepeat,
      this.centerSlice,
      this.matchTextDirection = false,
      this.gaplessPlayback = false,
      this.filterQuality = FilterQuality.low,
      }) : assert(image != null),
      assert(alignment != null),
      assert(repeat != null),
      assert(filterQuality != null),
      assert(matchTextDirection != null),
      super(key: key);
  • new Image.asset: 加载资源图片文件。
    • 命名构造方法,用于使用key从AssetBundle获取图像。就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径。
    • 其实就相当于第一种构造方法指定 ImageProvider 为 AssetImage
    • 沿袭的是 iOS 的图片风格,分为 1x,2x,3x,具体做法是在项目的根目录下创建两个文件夹,如下图所示:
    • 然后需要在 pubspec.yaml文件中声明一下:

      flutter:
      
        # The following line ensures that the Material Icons font is
      # included with your application, so that you can use the icons in
      # the material Icons class.
      uses-material-design: true
      assets:
      - images/logo.png
      - images/.0x/logo.png
      - images/.0x/logo.png
    • 用法如下:

      new Image.asset('images/logo.png')
    • 构造方法
    •   Image.asset(
      String name, {
      Key key,
      AssetBundle bundle,
      this.frameBuilder,
      this.semanticLabel,
      this.excludeFromSemantics = false,
      double scale,
      this.width,
      this.height,
      this.color,
      this.colorBlendMode,
      this.fit,
      this.alignment = Alignment.center,
      this.repeat = ImageRepeat.noRepeat,
      this.centerSlice,
      this.matchTextDirection = false,
      this.gaplessPlayback = false,
      String package,
      this.filterQuality = FilterQuality.low,
      }) : image = scale != null
      ? ExactAssetImage(name, bundle: bundle, scale: scale, package: package)
      : AssetImage(name, bundle: bundle, package: package),
      loadingBuilder = null,
      assert(alignment != null),
      assert(repeat != null),
      assert(matchTextDirection != null),
      super(key: key);
  • new Image.file: 加载本地图片文件。
    • 命名构造方法,加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关。 用于从File获取图像
    • 其实就相当于第一种构造方法指定 ImageProvider 为 FlieImage
    • 加载一个本地 File 图片,比如相册中的图片,用法如下
      new Image.file(new File('/storage/xxx/xxx/test.jpg'))
    • 构造函数
       Image.file(
      File file, {
      Key key,
      double scale = 1.0,
      this.frameBuilder,
      this.semanticLabel,
      this.excludeFromSemantics = false,
      this.width,
      this.height,
      this.color,
      this.colorBlendMode,
      this.fit,
      this.alignment = Alignment.center,
      this.repeat = ImageRepeat.noRepeat,
      this.centerSlice,
      this.matchTextDirection = false,
      this.gaplessPlayback = false,
      this.filterQuality = FilterQuality.low,
      }) : image = FileImage(file, scale: scale),
      loadingBuilder = null,
      assert(alignment != null),
      assert(repeat != null),
      assert(filterQuality != null),
      assert(matchTextDirection != null),
      super(key: key);
  • new Image.network: 加载网络图片。
    • 命名构造方法,用于从URL地址获取图像。意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。

      new Image.network('http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg')
    • 其实就相当于第一种构造方法指定 ImageProvider 为 NetworkImage。
    • 有的时候我们需要像Android那样使用一个占位图或者图片加载出错时显示某张特定的图片,这时候需要用到 FadeInImage 这个组件:

      //第一种方法是加载一个本地的占位图
      new FadeInImage.assetNetwork(
      placeholder: 'images/logo.png',
      image: imageUrl,
      width: ,
      fit: BoxFit.fitWidth,
      ) //第二种是加载一个透明的占位图,但是需要注意的是,这个组件是不可以设置加载出错显示的图片的
      new FadeInImage.memoryNetwork(
      placeholder: kTransparentImage,
      image: imageUrl,
      width: ,
      fit: BoxFit.fitWidth,
      )

      //另一种方法可以使用第三方 package 的 CachedNetworkImage 组件:CachedNetworkImage 组件中的占位图是一个 Widget,这样的话就可以自定义了,你想使用什么样的组件进行占位都行,同样加载出错的占位图也是一个组件,也可以自己定义;该组件也是通过缓存来加载图片的。

       new CachedNetworkImage(
        width: 120,
         fit: BoxFit.fitWidth,
         placeholder: new CircularProgressIndicator(),
         imageUrl: imageUrl,
         errorWidget: new Icon(Icons.error),
        )

    • 构造函数
        Image.network(
      String src, {
      Key key,
      double scale = 1.0,
      this.frameBuilder,
      this.loadingBuilder,
      this.semanticLabel,
      this.excludeFromSemantics = false,
      this.width,
      this.height,
      this.color,
      this.colorBlendMode,
      this.fit,
      this.alignment = Alignment.center,
      this.repeat = ImageRepeat.noRepeat,
      this.centerSlice,
      this.matchTextDirection = false,
      this.gaplessPlayback = false,
      this.filterQuality = FilterQuality.low,
      Map<String, String> headers,
      }) : image = NetworkImage(src, scale: scale, headers: headers),
      assert(alignment != null),
      assert(repeat != null),
      assert(matchTextDirection != null),
      super(key: key);
  • new Image.memory: 加载Uint8List资源图片。
    • 用来将一个 byte 数组加载成图片

      new Image.memory(bytes)
    • 命名构造函数
        Image.memory(
      Uint8List bytes, {
      Key key,
      double scale = 1.0,
      this.frameBuilder,
      this.semanticLabel,
      this.excludeFromSemantics = false,
      this.width,
      this.height,
      this.color,
      this.colorBlendMode,
      this.fit,
      this.alignment = Alignment.center,
      this.repeat = ImageRepeat.noRepeat,
      this.centerSlice,
      this.matchTextDirection = false,
      this.gaplessPlayback = false,
      this.filterQuality = FilterQuality.low,
      }) : image = MemoryImage(bytes, scale: scale),
      loadingBuilder = null,
      assert(alignment != null),
      assert(repeat != null),
      assert(matchTextDirection != null),
      super(key: key);

        

四,参数详解

  • image
    从哪里加载图片,值为一个 ImageProvider 对象,ImageProvider 的实现类有 AssetBundleImageProvider(AssetImage 继承自它)、FileImageMemoryImageNetworkImage,需要注意的是,如果选择 AssetImage 从资源目录中加载图片,需在 pubspec.yaml 配置文件中配置 assets 目录:上面有介绍
  • width 和 heigh: 宽和高
  • alignment:

    如果图片没有填充满容器的话,图片的对齐方式,值为一个 AlignmentGeometry 对象,Alignment 是它的一个实现类,可选值同 ContainerAlignment 取值一样。

        Alignment.topLeft:垂直靠顶部水平靠左对齐。
    Alignment.topCenter:垂直靠顶部水平居中对齐。
    Alignment.topRight:垂直靠顶部水平靠右对齐。
    Alignment.centerLeft:垂直居中水平靠左对齐。
    Alignment.center:垂直和水平居中都对齐。
    Alignment.centerRight:垂直居中水平靠右对齐。
    Alignment.bottomLeft:垂直靠底部水平靠左对齐。
    Alignment.bottomCenter:垂直靠底部水平居中对齐。
    Alignment.bottomRight:垂直靠底部水平靠右对齐。

    除了上面的常量之外,还可以创建 Alignment 对象指定 xy 偏移量。

  • color
    在图片上设置颜色,值为一个 Color 对象,会覆盖 image 指定的图片,如果也设置了 colorBlendMode 属性,则会与 image 混合产生特殊效果。
  • colorBlendMode
    • 颜色混合模式,类似 BoxDecorationbackgroundBlendMode
    • BlendModel枚举值
    • switch (blendMode) {
      case kCGBlendModeNormal: {
        strMsg = @"kCGBlendModeNormal: 正常;也是默认的模式。前景图会覆盖背景图";
         break;
      }
      case kCGBlendModeMultiply: {
         strMsg = @"kCGBlendModeMultiply: 正片叠底;混合了前景和背景的颜色,最终颜色比原先的都暗";
         break;
      }
      case kCGBlendModeScreen: {
         strMsg = @"kCGBlendModeScreen: 滤色;把前景和背景图的颜色先反过来,然后混合";
         break;
      }
      case kCGBlendModeOverlay: {
         strMsg = @"kCGBlendModeOverlay: 覆盖;能保留灰度信息,结合kCGBlendModeSaturation能保留透明度信息,在imageWithBlendMode方法中两次执行drawInRect方法实现我们基本需求";
         break;
      }
      case kCGBlendModeDarken: {
         strMsg = @"kCGBlendModeDarken: 变暗"; //将线条色变为黑色,背景色设置为目的色
         break;
      }
      case kCGBlendModeLighten: {
         strMsg = @"kCGBlendModeLighten: 变亮";
         break;
      }
      case kCGBlendModeColorDodge: {
         strMsg = @"kCGBlendModeColorDodge: 颜色变淡";
         break;
      }
      case kCGBlendModeColorBurn: {
         strMsg = @"kCGBlendModeColorBurn: 颜色加深"; //线条颜色(原本)加深,背景色设置为目的色
         break;
      }
      case kCGBlendModeSoftLight: {
         strMsg = @"kCGBlendModeSoftLight: 柔光";
         break;
      }
      case kCGBlendModeHardLight: {
         strMsg = @"kCGBlendModeHardLight: 强光"; //全为目的色
         break;
      }
      case kCGBlendModeDifference: {
         strMsg = @"kCGBlendModeDifference: 插值";
         break;
      }
      case kCGBlendModeExclusion: {
         strMsg = @"kCGBlendModeExclusion: 排除";
         break;
      }
      case kCGBlendModeHue: {
         strMsg = @"kCGBlendModeHue: 色调";
         break;
      }
      case kCGBlendModeSaturation: {
         strMsg = @"kCGBlendModeSaturation: 饱和度";
         break;
      }
      case kCGBlendModeColor: {
         strMsg = @"kCGBlendModeColor: 颜色"; //感觉将图片线条色设置为白色,背景色设置为目的色,之后再再图片上加一个有透明度的目的色
         break;
      }
      case kCGBlendModeLuminosity: {
         strMsg = @"kCGBlendModeLuminosity: 亮度";
         break;
      }

      //Apple额外定义的枚举
      //R: premultiplied result, 表示混合结果
      //S: Source, 表示源颜色(Sa对应透明度值: 0.0-1.0)
      //D: destination colors with alpha, 表示带透明度的目标颜色(Da对应透明度值: 0.0-1.0)
      case kCGBlendModeClear: {
        strMsg = @"kCGBlendModeClear: R = 0"; //1.清空(如果图标背景色为白色则为全白)
        break;
      }
      case kCGBlendModeCopy: {
        strMsg = @"kCGBlendModeCopy: R = S"; //2全色覆盖整个图片
        break;
      }
      case kCGBlendModeSourceIn: {
        strMsg = @"kCGBlendModeSourceIn: R = S*Da"; //3.线条变色
        break;
      }
      case kCGBlendModeSourceOut: {
        strMsg = @"kCGBlendModeSourceOut: R = S*(1 - Da)"; //4.背景变为目的色,线条自动变为白色(比如图标线条原为蓝色,会自动变为白色)
        break;
      }
      case kCGBlendModeSourceAtop: {
        strMsg = @"kCGBlendModeSourceAtop: R = S*Da + D*(1 - Sa)"; //5.线条变色,目前感觉和SourceIn效果一致
        break;
      }
      case kCGBlendModeDestinationOver: {
        strMsg = @"kCGBlendModeDestinationOver: R = S*(1 - Da) + D"; //6.背景色变为目的色,线条色不变
        break;
      }
      case kCGBlendModeDestinationIn: {
        strMsg = @"kCGBlendModeDestinationIn: R = D*Sa;能保留透明度信息"; //7.只看到线条色(本色),无其他颜色
        break;
      }  
      case kCGBlendModeDestinationOut: {
        strMsg = @"kCGBlendModeDestinationOut: R = D*(1 - Sa)"; //8.空白什么都没哟
        break;
      }
      case kCGBlendModeDestinationAtop: {
        strMsg = @"kCGBlendModeDestinationAtop: R = S*(1 - Da) + D*Sa"; //9.会把整个矩形的背景填充目的色(如图9系列)原色保留
        break;
      }
      case kCGBlendModeXOR: {
        strMsg = @"kCGBlendModeXOR: R = S*(1 - Da) + D*(1 - Sa)"; //10.线条变白,背景色变为目的色
        break;
      }
      case kCGBlendModePlusDarker: {
        strMsg = @"kCGBlendModePlusDarker: R = MAX(0, (1 - D) + (1 - S))"; //11.线条变为黑色, 背景色变为目的色
        break;
      }
      case kCGBlendModePlusLighter: {
        strMsg = @"kCGBlendModePlusLighter: R = MIN(1, S + D)(最后一种混合模式)"; //12.线条变为白色(混合色:如color为红色,就是偏粉色的白,有一定透明度的感觉)
        break;
      }
      default: {
        break;
      }

    •   
  • excludeFromSemantics
    是否启用图像的语义描述。
  • filterQuality
    图像过滤器的质量级别(使用该属性还没看到效果,后面用到了再研究)。
  • fit:

    图片的缩放方式,类似 Android 中 ImageViewscaleType,可选值有:

       BoxFit.none:将图片的内容按原大小居中显示。
    BoxFit.contain:将图片的内容完整居中显示,通过按比例缩小或原来的 size 使得图片宽/高等于或小于组件的宽/高,类似 Android 的 centerInside。
    BoxFit.cover:按比例放大图片的 size 居中显示,类似 Android 的 centerCrop。
    BoxFit.fill:把图片不按比例放大/缩小到组件的大小显示,类似 Android 的 fitXY。
    BoxFit.fitHeight:把图片的高按照组件的高显示,宽等比例放大/缩小。
    BoxFit.fitWidth:把图片的宽按照组件的宽显示,高等比例放大/缩小。
    BoxFit.scaleDown:如果图片宽高大于组件宽高,则让图片内容完全居中显示,此时同 contain,如果图片宽高小于组件宽高,则按图片原大小居中显示,此时同 none。
  • centerSlice
      该属性用于的中心拉伸,值为一个 Rect 对象,应该就是拉伸区域,我在使用该属性的时候只有当 fit 设置为 contain 和 fill 时才看到了效果,该属性应该也是用于图形变换,不常用
    • 使用方法

      //centerSlice =  Rect.fromLTRB(l, t, r, b)

      Image.network(
        "https://upload.jianshu.io/users/upload_avatars/3884536/d847a50f1da0.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240",
          width: 400,
          height: 400,
          fit: BoxFit.contain,
          centerSlice: Rect.fromLTWH(10, 10, 10, 10),
      )

    • 效果  

      • Rect效果默认

         
      • centerSlice处理
         

          

  • gaplessPlayback(无间隙播放)
    • 当image provider 发生变化时,显示新图片的过程中,如果true则保留旧图片直至显示出新图片为止;如果false,则显示新图片的过程中,空白,不保留旧图片。
  • repeat:

    如果图片没填充满容器的话,图片的重复方式,可选值有:

    • ImageRepeat.noRepeat:不重复。
    • ImageRepeat.repeat:X、Y 轴都重复。

    • ImageRepeat.repeatX:只在 X 轴重复。

    • ImageRepeat.repeatY:只在 Y 轴重复。

  • semanticLabel:
    图像的语义描述,类似 Android 中 ImageView 的 contentDescription 属性。

五,示例demo  

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// var imgUrl =
// "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545191828292&di=caef0d773e90142191de9fc5f5871cef&imgtype=0&src=http%3A%2F%2Fimg.mp.sohu.com%2Fq_mini%2Cc_zoom%2Cw_640%2Fupload%2F20170807%2Fb008bbf3df1b490d85e3ff3152ea898e_th.jpg";
var imgUrl =
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545790666&di=45beff1e706ea81d796d2268553c9e6f&imgtype=jpg&er=1&src=http%3A%2F%2Fp1.music.126.net%2FfydScGuKzV4GFdqeCMKhxQ%3D%3D%2F109951163178133629.jpg%3Fparam%3D180y180";
return MaterialApp(
//是否显示 debug 标签
debugShowCheckedModeBanner: false,
title: "Image",
home: Scaffold(
appBar: new AppBar(
title: new Text("Image"),
),
body: new Container(
color: new Color(0xFFFF0000),
//子组件
child: new Image(
/**
* 从资源目录中加载图片,需在 pubspec.yaml 配置文件中配置 assets 目录
* flutter:
* assets:
* - assets/images/
* 必须是上面的层级关系,但是感觉从资源目录加载图片老有问题,有时候显示不出来但又不报错,可以试试目录后面跟上具体文件名,即
* flutter:
* assets:
* - assets/images/iverson.jpg
* 但是这样每张图片都得配置,未免太过麻烦
* image: new AssetImage("assets/images/iverson.jpg"),
**/
//从网络加载图片,非常容易,不用配置,而且只要有网就没什么问题
image: new NetworkImage(imgUrl),
width: ,
height: ,
/*
* 如果图片没有填充满容器的话,图片的对齐方式,值为一个 AlignmentGeometry 对象,Alignment 是它的一个实现类
* 可选值同 Container 的 Alignment 取值一样。
* Alignment.topLeft:垂直靠顶部水平靠左对齐
* Alignment.topCenter:垂直靠顶部水平居中对齐
* Alignment.topRight:垂直靠顶部水平靠右对齐
* Alignment.centerLeft:垂直居中水平靠左对齐
* Alignment.center:垂直和水平居中都对齐
* Alignment.centerRight:垂直居中水平靠右对齐
* Alignment.bottomLeft:垂直靠底部水平靠左对齐
* Alignment.bottomCenter:垂直靠底部水平居中对齐
* Alignment.bottomRight:垂直靠底部水平靠右对齐
* 除了上面的常量之外,还可以创建 Alignment 对象指定 x、y 偏移量
*
*/
alignment: Alignment.center,
//在图片上设置颜色,值为一个 Color 对象,会覆盖 image 指定的图片,如果也设置了 colorBlendMode 属性,则会与 image 混合产生特殊效果
color: new Color(0xFFFFFF00),
//颜色混合模式,类似 BoxDecoration 的 backgroundBlendMode
colorBlendMode: BlendMode.darken,
excludeFromSemantics: true,
filterQuality: FilterQuality.high,
/*
* 图片的缩放方式,类似 Android 中 ImageView 的 scaleType,可选值有:
* BoxFit.none:将图片的内容按原大小居中显示。
* BoxFit.contain:将图片的内容完整居中显示,通过按比例缩小或原来的 size 使得图片宽/高等于或小于组件的宽/高,类似 Android 的 centerInside。
* BoxFit.cover:按比例放大图片的 size 居中显示,类似 Android 的 centerCrop。
* BoxFit.fill:把图片不按比例放大/缩小到组件的大小显示,类似 Android 的 fitXY。
* BoxFit.fitHeight:把图片的高按照组件的高显示,宽等比例放大/缩小。
* BoxFit.fitWidth:把图片的宽按照组件的宽显示,高等比例放大/缩小。
* BoxFit.scaleDown:如果图片宽高大于组件宽高,则让图片内容完全居中显示,此时同 contain,如果图片宽高小于组件宽高,则按图片原大小居中显示,此时同 none。
*/
fit: BoxFit.contain,
centerSlice:new Rect.fromCircle(center: Offset(100.0, 100.0), radius: 10.0),
//当图像提供者发生变化时,是继续显示旧图像,默认不显示
gaplessPlayback: true,
//图片与颜色混合模式
matchTextDirection: true,
/*
* 如果图片没填充满容器的话,图片的重复方式,可选值有:
* ImageRepeat.noRepeat:不重复
* ImageRepeat.repeat:X、Y 轴都重复
* ImageRepeat.repeatX:只在 X 轴重复
* ImageRepeat.repeatY:只在 Y 轴重复
*/
repeat: ImageRepeat.noRepeat,
//图像的语义描述
semanticLabel:'Image组件学习',
),
),
),
);
}
}

六,实现圆角/圆形图片

  • 圆角

    • 使用裁剪来实现图片圆角:

      new ClipRRect(
      child: Image.network(
      imageUrl,
      scale: 8.5,
      fit: BoxFit.cover,
      ),
      borderRadius: BorderRadius.only(
      topLeft: Radius.circular(),
      topRight: Radius.circular(),
      ),
      )
    • 使用边框来实现图片圆角:

      new Container(
      width: ,
      height: ,
      decoration: BoxDecoration(
      shape: BoxShape.rectangle,
      borderRadius: BorderRadius.circular(10.0),
      image: DecorationImage(
      image: NetworkImage(imageUrl),
      fit: BoxFit.cover),
      ),
      )
    • 需要注意的是,使用边框实现的时候要注意设置 fit属性,不然效果也是有问题的,当然了你还可以使用 Material组件来实现。
  • 圆形
    圆形图片用得最多的应该是头像之类的,这种同样有多种方式可以实现,下面我也举两个例子

    • 使用裁剪实现圆形图片:

      new ClipOval(
      child: Image.network(
      imageUrl,
      scale: 8.5,
      ),
      )
    • 使用CircleAvatar来实现圆形图片:
      new CircleAvatar(
      backgroundImage: NetworkImage(imageUrl),
      radius: 50.0,
      )

七,官方地址

【Flutter学习】基本组件之图片组件Image的更多相关文章

  1. Flutter学习笔记(10)--容器组件、图片组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...

  2. Flutter学习笔记(9)--组件Widget

    如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...

  3. Flutter——Image组件(图片组件)

    Image组件有很多构造函数,这里只说两个. Image.asset  本地图片 1.在根目录新建文件夹 /images 2.在 images 文件夹下建立两个文件夹 /images/2.0x  /i ...

  4. Flutter学习笔记(8)--Dart面向对象

    如需转载,请注明出处:Flutter学习笔记(7)--Dart异常处理 Dart作为高级语言,支持面向对象的很多特性,并且支持基于mixin的继承方式,基于mixin的继承方式是指:一个类可以继承自多 ...

  5. Flutter学习笔记(11)--文本组件、图标及按钮组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...

  6. Flutter学习笔记(18)--Drawer抽屉组件

    如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...

  7. Flutter学习笔记(21)--TextField文本框组件和Card卡片组件

    如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件 今天来学习下TextField文本框组件和Card卡片组件. 只要是应用程序就少不了交互,基本上 ...

  8. 【Flutter学习】页面布局之基础布局组件

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  9. Flutter学习笔记(12)--列表组件

    如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源 ...

随机推荐

  1. 【原理】Reids字典

    I.字典的实现 Redis的字典使用哈希表作为底层实现. 1.1 哈希表 Redis字典所使用的哈希表结构定义如下: typedef struct dictht { // 哈希表数组 dictEntr ...

  2. Struts2 简单的增删改查

    1:主页面 <a href="emp-list">emp-list</a> <br> 然后到struts.xml文件中找到对应的emp-list ...

  3. idea使用 xml文件

    如图 搜索template(模板) 点击加号后

  4. 59、salesforce实现数据的批量处理

    批处理,往自己的邮箱发一封邮件,批处理采用异步的处理方式处理数据,最多可以处理5000万条数据 global with sharing class MerchandiseBatch implement ...

  5. JSON与Java对象的互相转换

    JSON与Java对象的互相转换 例一(单个对象进行赋值): @RequestMapping("test1.do") @ResponseBody public JSONObject ...

  6. <读书笔记>《高性能网站建设指南:前端工程师技能精髓》

    只有10-20%的最终用户响应时间花在了下载HTML文档上.其余的80-90%时间花在了下载页面中的所有组件上. 规则1.减少HTTP请求 图片地图:将多个图片合并成一个,而后通过css定位显示不同的 ...

  7. Apache的虚拟主机功能(基于IP、域名、端口号)

    Apache虚拟主机就是在一个Apache服务器上配置多个虚拟主机,实现一个服务器提供多站点服务,其实就是访问同一个服务器上的不同目录. 主要有三种方法: 1.通过不同的IP地址 2.通过不同的域名 ...

  8. java并发锁ReentrantReadWriteLock读写锁源码分析

    1.ReentrantReadWriterLock 基础 所谓读写锁,是对访问资源共享锁和排斥锁,一般的重入性语义为如果对资源加了写锁,其他线程无法再获得写锁与读锁,但是持有写锁的线程,可以对资源加读 ...

  9. Pyhon 格式化输出的几种方式

    废话不多说,直接上代码 第一种格式化的输出方式,拼接我就不上了,不建议使用,数据多的时候自己都蒙圈 # -*- coding:utf-8 -*- # Author:覃振鸿 #格式化输出 name=in ...

  10. 23-python基础-python3-浅拷贝与深拷贝(1)

    1.可变和不可变数据类型. 列表是‘可变的’数据类型,它的值可以添加.删除或改变. 字符串是‘不可变的’,它不能被更改. (1)字符串 尝试对字符串中的一个字符重新赋值,将导致TypeError错误. ...