关于flutter:Flutter第十四课Image组件和Button组件

Flutter 第十四课：Image 组件和 Button 组件

一：Flutter Image 组件
Flutter 中，咱们能够通过 Image 来加载并显示图片，Image 的数据源能够是 asset、文件、内存以及网络。
图片组件 (Image) 是显示图像的组件，Image 组件有多种构造函数 :

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

当我第一次应用 Image 图片本地 assets 时候遇到如下问题：

Error on line 61, column 4: Expected a key while parsing a block mapping.
   ╷
61 │    assets:
   │    ^
   ╵

最初发现是没对齐

// 形式一：// 加载本地资产 assets 图片
return Scaffold(
        body: Center(
          child: Image(image:AssetImage("assets/images/star.png"),//AssetImage 的父类是 AssetBundleImageProvider 
//abstract class AssetBundleImageProvider extends ImageProvider<AssetBundleImageKey> 故：AssetImage 是 ImageProvider 的实现类
            width: 100,
            height: 100,

          ),
));

// 形式二：return Scaffold(
        body: Center(
         child: Image.asset("assets/images/star.png",
          width: 200,
          height: 200,),
));

源码的属性：
通过：new Image 形式加载图片资源

const Image({
    Key? key,
    required this.image,// 类型为 ImageProvider 抽象类，须要本人实现获取图片数据的操作
    this.frameBuilder,
    this.loadingBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,//Image 显示区域的宽度和高度设置，这里须要把 Image 和图片两 个货色辨别开，图片自身有大小，Image Widget 是图片的容器，本 身也有大小。宽度和高度的配置常常和 fit 属性配合应用
    this.height,
    this.color,// 图片色彩
    this.opacity,
    this.colorBlendMode,// 在对图片进行手动解决的时候，可能用到图层混合，如扭转图片的色彩。此属性能够对色彩进行混合解决。有多种模式
    this.fit,// 图片填充模式
    this.alignment = Alignment.center,// 管制图片的摆放地位，比方 l 图片搁置在右下角则为 Alignment. bottom
    this.repeat = ImageRepeat.noRepeat,// 此属性能够设置图片反复模式
    this.centerSlice,// 当图片须要被拉伸显示时
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.isAntiAlias = false,
    this.filterQuality = FilterQuality.low,
  }) : assert(image != null),
       assert(alignment != null),
       assert(repeat != null),
       assert(filterQuality != null),
       assert(matchTextDirection != null),
       assert(isAntiAlias != null),
       super(key: key);

BoxFit 取值及形容

ImageProvider
ImageProvider 是一个抽象类，次要定义了图片数据获取的接口 load()，从不同的数据源获取图片须要实现不同的 ImageProvider，如 AssetImage 是实现了从 Asset 中加载图片的 ImageProvider，而 NetworkImage 实现了从网络加载图片的 ImageProvider。

从 asset 中加载图片
留神: 因为 yaml 文件对缩进严格，所以必须严格依照每一层两个空格的形式进行缩进，此处 assets 后面应有两个空格。
这里的配置肯定要和程序中指定的门路绝对应，否则会报找不到资源的谬误。利用 里所有的动态资源都配置在这里，留神命名标准。

二：Icon 组件
Icon 用于此类的可用图标列表(这个是不能够交互的图标)。
IconButton，用于交互式图标

  const Icon(
    this.icon, {// 类别是 IconData 显示的图标
    Key? key,
    this.size,// 图标尺寸
    this.color,// 图标色彩
    this.semanticLabel,
    this.textDirection,// 用户出现图标的文本方向
  }) : super(key: key);

Icons.abc 等

child: Icon(
              Icons.abc,
          size: 24,),

IconButton

child: IconButton(icon: Icon(Icons.search),
        onPressed: () {print("点击了搜寻");
        },
      ),

  const IconButton({
    Key? key,
    this.iconSize,// 图标大小
    this.visualDensity,
    this.padding = const EdgeInsets.all(8.0),// 内边距
    this.alignment = Alignment.center,// 图标地位
    this.splashRadius,
    this.color,// 色彩
    this.focusColor,
    this.hoverColor,
    this.highlightColor,
    this.splashColor,// 水波纹色彩
    this.disabledColor,// 不可点击是高亮色彩
    required this.onPressed,
    this.mouseCursor,
    this.focusNode,
    this.autofocus = false,
    this.tooltip,
    this.enableFeedback = true,
    this.constraints,
    required this.icon,
  }) : assert(padding != null),
       assert(alignment != null),
       assert(splashRadius == null || splashRadius > 0),
       assert(autofocus != null),
       assert(icon != null),
       super(key: key);

三：Flutter Button 按钮
在 Flutter 里有很多的 Button，包含了：MaterialButton、RaisedButton（凸起的按钮）、FloatingActionButton、FlatButton（扁平化的按钮）、IconButton（图标按钮 继承 StatelessWidget）、ButtonBar、DropdownButton 等。

个别罕用的 Button 是 MaterialButton、IconButton、FloatingActionButton。

const MaterialButton({
    Key? key,
    required this.onPressed,// 按下事件
    this.onLongPress, // 长按事件
    this.onHighlightChanged,// 水波纹高亮变动回调
    this.mouseCursor,// 鼠标指针的光标进入或悬停在此按钮的 [InkWell] 上时。this.textTheme,// 按钮的主题
    this.textColor,// 文字的色彩
    this.disabledTextColor,// 按钮禁用时候文字的色彩
    this.color,// 按钮的背景色彩
    this.disabledColor,// 按钮禁用的背景色彩
    this.focusColor,// 获取焦点的色彩
    this.hoverColor,// 悬停色彩
    this.highlightColor,// 点击或者 toch 控件高亮的时候显示在控件下面，水波纹上面的色彩
    this.splashColor,// 水波纹的色彩
    this.colorBrightness,// 按钮主题高亮
    this.elevation,// 按钮上面的暗影
    this.focusElevation,// 获取焦点的暗影
    this.hoverElevation, // 悬停的暗影
    this.highlightElevation,// 高亮时候的暗影
    this.disabledElevation,// 未设置点击时的暗影高度
    this.padding,// 内边距
    this.visualDensity,// 按钮布局的紧凑水平
    this.shape,// 设置形态
    this.clipBehavior = Clip.none,
    this.focusNode,// 在 Flutter 应用 FocusNode 来捕获监听焦点获取与失去
    this.autofocus = false,
    this.materialTapTargetSize,// 是配置组件点击区域大小的属性，很多组件都有
    this.animationDuration,//[shape]和 [elevation] 的动画更改的持续时间
    this.minWidth,// 最小宽度
    this.height,// 高度
    this.enableFeedback = true,// 检测到的手势是否应提供声音和 / 或触觉反馈。例如，在 Android 上
    //，点击会产生咔哒声，启用反馈后，长按会产生短暂的振动。通常，组件默认值为 true。this.child,// 子 View
  }) : assert(clipBehavior != null),
       assert(autofocus != null),
       assert(elevation == null || elevation >= 0.0),
       assert(focusElevation == null || focusElevation >= 0.0),
       assert(hoverElevation == null || hoverElevation >= 0.0),
       assert(highlightElevation == null || highlightElevation >= 0.0),
       assert(disabledElevation == null || disabledElevation >= 0.0),
       super(key: key);

栗子：按钮的一些应用

return Scaffold(
        body: Column(children: [
      RaisedButton(child: Text("normal"),
        onPressed: () {},
      ),
      FlatButton(onPressed: () {}, child: Text("normal")),
      OutlineButton(child: Text("normal"),
        onPressed: () {},
      ),
      IconButton(icon: Icon(Icons.thumb_up),
        onPressed: () {},
      ),
      RaisedButton.icon(onPressed: () {}, icon: Icon(Icons.send), label: Text("发送")),
      FlatButton(
        color: Colors.blue,
        highlightColor: Colors.blue[700],
        colorBrightness: Brightness.dark,
        splashColor: Colors.grey,
        child: Text("Submit"),
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
        onPressed: () {},
      ),
      RaisedButton(
        color: Colors.blue,
        highlightColor: Colors.blue[700],
        colorBrightness: Brightness.dark,
        splashColor: Colors.grey,
        child: Text("Submit"),
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
        onPressed: () {},
      ),
      // 自定义 button
      FlatButton(
          color: Colors.amberAccent,
          onPressed: () {},
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [Icon(Icons.label_important_outlined), Text("喜爱")],
          )),
    ]));