乐趣区

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

jiezi

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 取值及形容

取值 形容
Boxfit.fill 会拉伸填充斥显示空间，图片自身长宽比会发生变化，图片会变形
Boxfit.contain 这是图片的默认适应规定，图片会在保障图片自身长宽比不变的状况下缩放以适应以后显示空间，图片不会变形。
Boxfit.cover 会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间局部会被剪裁。
BoxFit.fitWidth 图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，而后居中显示，图片不会变形，超出显示空间局部会被剪裁。
BoxFit.fitHeigh 图片的高度会缩放到显示空间的高度，宽度会按比例缩放，而后居中显示，图片不会变形，超出显示空间局部会被剪裁
Boxf1t.none 图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片两头局部。
BoxFit.scaleDown 成果和 Boxfit.contain 差不多然而此属性不容许显示超过源图片大小，即可小不可大

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("喜爱")],
          )),
    ]));
退出移动版