Flutter之基础Widget

最新推荐文章于 2022-10-21 10:53:06 发布
最新推荐文章于 2022-10-21 10:53:06 发布
阅读量237 收藏
点赞数
文章标签： ui 人工智能 json
原文链接：https://juejin.im/post/5cb9955ff265da039444a67f
版权

  • 原文博客地址: Flutter之基础Widget
  • Flutter和Dart系列文章
  • 项目GitHub地址
  • Flutter作为一种全新的响应式，跨平台，高性能, 完全免费、开源的移动开发框架
  • Widget是Flutter开发中的主要组成部分, 是Flutter的基础, Flutter的核心设计思想便是: 一切皆Widget
  • Flutter中的widget的概念更广泛，它不仅可以表示UI元素，也可以表示一些功能性的组件如：用于手势检测的 GestureDetector widget、用于应用主题数据传递的Theme等等

Widget与Element

  • Widget实际上就是Element的配置数据, Widget的功能是描述一个UI元素的一个配置数据, 而真正的UI渲染是由Element构成
  • 由于Element是通过Widget生成，所以它们之间有对应关系，所以在大多数场景，我们可以宽泛地认为Widget就是指UI控件或UI渲染
  • 一个Widget对象可以对应多个Element对象。这很好理解，根据同一份配置（Widget），可以创建多个实例（Element）

Widget类的声明

@immutable
abstract class Widget extends DiagnosticableTree {
  /// Initializes [key] for subclasses.
  const Widget({ this.key });

  /// See also the discussions at [Key] and [GlobalKey].
  final Key key;

  /// multiple times.
  @protected
  Element createElement();

  /// A short, textual description of this widget.
  @override
  String toStringShort() {
    return key == null ? '$runtimeType' : '$runtimeType-$key';
  }

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.defaultDiagnosticsTreeStyle = DiagnosticsTreeStyle.dense;
  }

  static bool canUpdate(Widget oldWidget, Widget newWidget) {
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }
}
复制代码
  • Widget类继承自DiagnosticableTree，主要作用是提供调试信息。
  • Key: 这个key属性类似于React/Vue中的key，主要的作用是决定是否在下一次build时复用旧的widget，决定的条件在canUpdate()方法中
  • createElement()：正如前文所述一个Widget可以对应多个Element；Flutter Framework在构建UI时，会先调用此方法生成对应节点的Element对象。此方法是Flutter Framework隐式调用的，在我们开发过程中基本不会调用到。
  • debugFillProperties 复写父类的方法，主要是设置DiagnosticableTree的一些特性。
  • canUpdate是一个静态方法，它主要用于在Widget树重新build时复用旧的widget
    • 具体来说就是：是否用新的Widget对象去更新旧UI上所对应的Element对象的配置；
    • 通过其源码我们可以看到，只要newWidget与oldWidget的runtimeType和key同时相等时就会用newWidget去更新Element对象的配置，否则就会创建新的Element

StatelessWidget和StatefulWidget的区别

  • StatelessWidget是状态不可变的widget, 初始状态设置以后就不可再变化, 如果需要变化需要重新创建; StatefulWidget可以保存自己的状态
  • 在Flutter中通过引入State来保存状态, 当State的状态改变时，能重新构建本节点以及孩子的Widget树来进行UI变化
  • 如果需要主动改变State的状态，需要通过setState()方法进行触发，单纯改变数据是不会引发UI改变的
  • 下面介绍部分的Widget组件

Text

UI上面文字的展示基本上都要靠Text组件来完成

// 两种构造函数
// 显示普通的文本
 const Text(this.data, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }) : assert(data != null),
       textSpan = null,
       super(key: key);

  /// 段落式文本,可以给文本中的每个textSpan设置其样式
  const Text.rich(this.textSpan, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }): assert(textSpan != null),
      data = null,
      super(key: key);

复制代码

参数介绍

data

文本的内容

Text('titanjun')
复制代码
style

文本的样式

  const TextStyle({
    this.inherit = true,
    this.color,
    this.fontSize,
    this.fontWeight,
    this.fontStyle,
    this.letterSpacing,
    this.wordSpacing,
    this.textBaseline,
    this.height,
    this.locale,
    this.foreground,
    this.background,
    this.shadows,
    this.decoration,
    this.decorationColor,
    this.decorationStyle,
    this.debugLabel,
    String fontFamily,
    String package,
  }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
       assert(inherit != null),
       assert(color == null || foreground == null, _kColorForegroundWarning);
       
// 相关属性介绍
1. inherit: 为false时不显示

2. color: 字体颜色

3. fontSize: 字体大小, 默认是14.0

4. fontWeight: 字体的粗体

5. fontStyle: 字体的样式
    normal正常 italic 斜体

6. letterSpacing: 字符间距

7. wordSpacing: 单词间距

8. textBaseline
    alphabetic：用于对齐字母字符底部的水平线
    ideographic：用于对齐表意字符的水平线
    
9. height: 用在Text控件上的时候，会乘以fontSize做为行高,

10. locale: 国际化

11. foreground: 用paint来渲染text，也可以用他来改变字体颜色等

12. background: 背景颜色

13. decoration: 
    下划线 underline、 删除线 lineThrough、上划线 overline，默认是无 none
    
14. decorationStyle: decoration线的样式
    solid: 直线, double: 两条线, dotted: 短虚线, dashed: 长虚线, wavy: 波浪线

15. decorationColor: decoration线的颜色

16. debugLabel: 文本样式的描述, 该属性只在调试中维护

17. fontFamily和package（自定义字体的时候用的到，后面再详解）
复制代码

使用样式示例

style: TextStyle(
    inherit: true,
    color: Colors.red,
    fontSize: 50,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    letterSpacing: 2,
    wordSpacing: 5,
    textBaseline: TextBaseline.alphabetic,
    height: 2,
    locale: Locale('CH'),
    decoration: TextDecoration.lineThrough,
    decorationColor: Colors.blue,
    decorationStyle: TextDecorationStyle.wavy,
),
复制代码
textAlign

文本显示方向

left: 居左显示
center: 居中显示
right: 居右显示
justify: 文本的拉伸行，其末尾用软换行符填充宽度
start: 对齐容器前缘的文本。
    对于从左到右的文本([TextDirection.ltr])，这是左边缘。
    对于从右到左的文本([TextDirection.rtl])，这是右边缘。
end: 对齐容器尾部边缘的文本。
    对于从左到右的文本([TextDirection.ltr])，这是右边缘。
    对于从右到左的文本([TextDirection.rtl])，这是左边缘。
复制代码
textDirection

和上述TextAlign.start和TextAlign.end一样

softWrap

文本是否能换行,bool类型

overflow

用来指定超出文本的表示方式，是截断文本啊还是用三个点显示等

ellipsis: ...形式显示
clip: 直接截断
fade: 效果和clip一样
复制代码
maxLines

用来指定文本最多显示多少行

textScaleFactor

文本字体的缩放倍数，如：1.5则在默认字体上变成1.5倍大小字体，0.5则是0.5倍

Text构造函数

child: Text(
      // 需要显示的文字
      'titanjun.top' * 3,
      textAlign: TextAlign.left,
      textDirection: TextDirection.ltr,
      locale: Locale('CH'),
      maxLines: 1,
      overflow: TextOverflow.fade,
      style: TextStyle(
          inherit: true,
          color: Colors.red,
          fontSize: 50,
          fontWeight: FontWeight.bold,
          fontStyle: FontStyle.italic,
          letterSpacing: 2,
          wordSpacing: 5,
          textBaseline: TextBaseline.alphabetic,
          height: 2,
          locale: Locale('CH'),
          decoration: TextDecoration.lineThrough,
          decorationColor: Colors.blue,
          decorationStyle: TextDecorationStyle.wavy,
      ),
  ),
复制代码

Text.rich构造函数

这个构造函数和iOS中用到的富文本类似

child: Text.rich(
    TextSpan(
      text: '博客地址: ',
      children: [
        TextSpan(
          text: 'https://',
          style: TextStyle(color: Colors.red)
        ),
        TextSpan(
          text: 'titanjun.top',
          style: TextStyle(color: Colors.blue),
        ),
        TextSpan(
          text: '欢迎访问',
          style: TextStyle(color: Colors.orange)
        ),
      ]
    ),
),
复制代码

其中TextSpan的构造函数如下

const TextSpan({
    this.style,
    this.text,
    // 接受List<TextSpan>类型的数组
    this.children,
    // 文本的手势操作, 后面说这个
    this.recognizer,
});
复制代码

Image

  • 一个用于展示图片的组件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式
  • Image共有五种构造函数

Image()

  const Image({
    Key key,
    // 一个图片对象ImageProvider, 可设置NetworkImage(), FileImage(), MemoryImage()三种对象
    @required this.image,
    // 图片的描述, String
    this.semanticLabel,
    this.excludeFromSemantics = false,
    // 图片的宽度, double
    this.width,
    // 图片的高度, double
    this.height,
    // 图像的颜色, 用于和图片混合的颜色, 结合colorBlendMode使用
    this.color,
    // 颜色和图片混合的状态, BlendMode
    this.colorBlendMode,
    // 图像在布局中分配的空间, BoxFit
    this.fit,
    // 图像边界内对齐图像, Alignment
    this.alignment = Alignment.center,
    // 未充分填充容器时,是否重复显示图片
    this.repeat = ImageRepeat.noRepeat,
    // 九片图像的中心切点, Rect
    this.centerSlice,
    // 是否在图像的方向上绘制图像 TextDirection
    this.matchTextDirection = false,
    // 当图像提供者发生变化时，是继续显示旧图像（true）还是暂时不显示（false）
    this.gaplessPlayback = false,
    // 设置图片的过滤质量
    this.filterQuality = FilterQuality.low,
  }) 
复制代码
部分属性详解
fit

图像在布局中分配的空间, BoxFit枚举值

  • fill: 填充满容器空间, 图片会被拉伸
  • contain: 以容器的大小等比例缩放图片
  • cover: 填充整个容器, 图片会被剪切
  • fitWidth: 以容器的宽度, 等比例缩放图片
  • fitHeight: 以容器的高度, 等比例的缩放图片
  • none: 以图片的实际大小显示
  • scaleDown: 居中显示, 图片不会拉伸, 以宽高中最小的尺寸为标准
alignment

图像边界内对齐图像, Alignment类, 不是枚举值

  /// 定义方式为垂直方向-水平方向
  static const Alignment topLeft = Alignment(-1.0, -1.0);
  static const Alignment topCenter = Alignment(0.0, -1.0);
  static const Alignment topRight = Alignment(1.0, -1.0);
  static const Alignment centerLeft = Alignment(-1.0, 0.0);
  static const Alignment center = Alignment(0.0, 0.0);
  static const Alignment centerRight = Alignment(1.0, 0.0);
  static const Alignment bottomLeft = Alignment(-1.0, 1.0);
  static const Alignment bottomCenter = Alignment(0.0, 1.0);
  static const Alignment bottomRight = Alignment(1.0, 1.0);
  
  /// 使用方式
  alignment: Alignment.topLeft,
  // 或者
  alignment: Alignment(0.0, 1.0)
复制代码
Image(
  image: NetworkImage('https://user-gold-cdn.xitu.io/2019/4/19/16a34ef6cd5c73e1?w=1196&h=698&f=jpeg&s=29359'),
  fit: BoxFit.scaleDown,
  alignment: Alignment.topLeft,
),
复制代码

Image.network

用于显示网络图片

Image.network(
  'https://titanjun.oss-cn-hangzhou.aliyuncs.com/flutter/catimage.jpg',
  width: 100,
  height: 100,
  fit: BoxFit.scaleDown,
  alignment: Alignment.center,
)
复制代码

网络请求Image是最常见的操作, 这里重点说明两个点

缓存
  • ImageCache是ImageProvider默认使用的图片缓存。ImageCache使用的是LRU的算法
  • 默认可以存储1000张图片。如果觉得缓存太大，可以通过设置ImageCache的maximumSize属性来控制缓存图片的数量。
  • 也可以通过设置maximumSizeBytes来控制缓存的大小（默认缓存大小10MB）
CDN优化

如果想要使用cdn优化，可以通过url增加后缀的方式实现。默认实现中没有这个点，但是考虑到cdn优化的可观收益，建议大家利用好这个优化

Image.asset

  • Flutter应用程序可以包含代码和 assets（有时称为资源）
  • asset是打包到程序安装包中的，可在运行时访问
  • 常见类型的asset包括静态数据（例如JSON文件），配置文件，图标和图片（JPEG，WebP，GIF，动画WebP / GIF，PNG，BMP和WBMP）
  • Flutter使用pubspec.yaml文件（位于项目根目录），来识别应用程序所需的asset

需要注意的是

  • 图片所在的文件夹images和pubspec.yaml需要在同一目录下, 否则pubspec.yaml文件中, 设置资源路径的时候要对应修改
  • images图片文件夹中2.0x和3.0x图片要分别创建两个文件夹, 并把2倍和3倍图分别放在不同的文件夹中, 切文件的名字不要在带@2x和@3x字样

Image.asset(
  'images/home.png',
  width: 100,
  height: 100,
  fit: BoxFit.scaleDown,
  alignment: Alignment.center,
)
复制代码

Image.file

Image.file(File file, {
    Key key,
    double scale = 1.0,
    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,
  })
复制代码
  • 主要解析file参数，其他与Image()构造的参数一致！
  • file: 对文件系统上的文件的引用。
  • File 实例是一个对象，它包含可以在其上执行操作的路径

Image.memory

Image.memory(Uint8List bytes, {
    Key key,
    double scale = 1.0,
    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,
  })
复制代码
  • 加载Uint8List资源图片
  • 主要解析bytes参数，其他与Image()构造的参数一致！

Icon

  • Flutter中，Icon是类似于web开发中一样使用iconfont(字体图标)，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片
  • 在字体文件中，每一个字符都对应一个位码，而每一个位码对应一个显示字形，不同的字体就是指字形不同，即字符对应的字形是不同的
  • 而在iconfont中，只是将位码对应的字形做成了图标，所以不同的字符最终就会渲染成不同的图标。
  • 在Flutter中iconfont相较于图片的优势如下:
    • 体积小：可以减小安装包大小。
    • 矢量的：iconfont都是矢量图标，放大不会影响其清晰度。
    • 可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。
    • 可以通过TextSpan和文本混用。

使用Material Design字体图标

Flutter默认包含了一套Material Design的字体图标，在pubspec.yaml文件中的配置如下

flutter:
  uses-material-design: true
复制代码

如果设置成false, 则图片效果如下, 图片颜色为自己设置的颜色

在Text中使用

下面看一个在Text中使用iconfont的示例

String iconStr = "";
// accessible: &#xE914; or 0xE914 or E914
iconStr += "\uE914";
// error: &#xE000; or 0xE000 or E000
iconStr += " \uE000";
// fingerprint: &#xE90D; or 0xE90D or E90D
iconStr += " \uE90D";


Text(iconStr,
  style: TextStyle(
    fontFamily: "MaterialIcons",
    fontSize: 80.0,
    color: Colors.green
  ),
)
复制代码

上述代码的运行效果如下

任何一个图片我们都可以使用Text文本进行展示, 但是这需要我们提供每一个图标的字符码点, 可在material-design-icons中搜索查找, 而且并不能固定指定图片的大小, 只能设置字体的大小, 这并对开发者不友好

Icon介绍

Flutter封装了一个Icon来专门显示字体图标，上面的例子也可以用如下方式实现

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.accessible, color: Colors.green, size: 80),
    Icon(Icons.error, color: Colors.green, size: 80),
    Icon(Icons.fingerprint, color: Colors.green, size: 80),
  ],
)
复制代码

Icons类中包含了所有Material Design图标的IconData静态变量定义, .....我大概算了一下, Icons中大概一共定义了984中图标

// icon的构造函数
const Icon(this.icon, {
    Key key,
    // double, 设置图片的大小, 同事设置宽高
    this.size,
    // Color, 设置图片的颜色
    this.color,
    // String, 图标的语义标签
    this.semanticLabel,
    // TextDirection, 从左/右开始排列
    this.textDirection,
})
复制代码

按钮

  • Flutter提供了RaisedButton、FlatButton、OutlineButton和IconButton四种按钮, 除了IconButton之外都是继承自MaterialButton
  • 所有Material库中的按钮都有如下相同点：
    • 按下时都会有“水波动画”。
    • 有一个onPressed属性来设置点击回调，当按钮按下时会执行该回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击

MaterialButton

MaterialButton是除IconButton按钮之外的其他按钮的父类, 下面介绍一下各属性的使用

const MaterialButton({
    Key key,
    // 点击事件
    @required this.onPressed,
    // 高亮状态变化回调，参数：是否高亮，按下时高亮，抬起不高亮
    this.onHighlightChanged,
    // 字体的主体
    this.textTheme,
    // 按钮文字颜色
    this.textColor,
    // 禁用状态下按钮字体颜色
    this.disabledTextColor,
    // 按钮背景颜色
    this.color,
    // 禁用状态下背景颜色
    this.disabledColor,
    // 高亮状态(按下时的背景颜色)
    this.highlightColor,
    // 按钮的水波纹的颜色
    this.splashColor,
    // 字体亮度
    this.colorBrightness,
    // 按钮底部阴影效果的偏移量, double
    this.elevation,
    // 高亮状态下, 按钮底部阴影效果的偏移量, double
    this.highlightElevation,
    // 禁用状态下, 按钮底部阴影效果的偏移量, double
    this.disabledElevation,
    // 内边距
    this.padding,
    // 按钮的形状
    this.shape,
    this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.animationDuration,
    // 按钮的最小宽度
    this.minWidth,
    // 按钮的高度
    this.height,
    // 子widget
    this.child,
})
复制代码
onPressed

按钮触发时触发的函数，如果不设置此属性Button为不可用状态

onPressed: () => print('被点击了'),
复制代码
textTheme

按钮字体的主题, 在onPressed不为空的时候才有效果

/// 三个取值
ButtonTextTheme.normal
ButtonTextTheme.accent
ButtonTextTheme.primary
复制代码

colorBrightness

设置按钮的字体亮度, 取值分别是Brightness.light和Brightness.darks

padding

内边距，其接收值的类型是EdgeInsetsGeometry类型的，EdgeInsetsGeometry是一个抽象类, 只能使用其子类EdgeInsets来实现

padding: EdgeInsets.all(10)
复制代码
shape
  • 设置按钮的形状，其接收值是ShapeBorder类型，ShapeBorder也是一个抽象类
  • ShapeBorder的子类中比较常用的几个如下所示
    • BeveledRectangleBorder 带斜角的长方形边框
    • CircleBorder 圆形边框
    • RoundedRectangleBorder 圆角矩形
    • StadiumBorder 两端是半圆的边框
// 带斜角的长方形边框
const BeveledRectangleBorder({
    // 边框的样式 
    this.side = BorderSide.none,
    // 圆角大小
    this.borderRadius = BorderRadius.zero,
})

// 圆形边框
const CircleBorder({ 
    this.side = BorderSide.none 
})

// 圆角矩形
const RoundedRectangleBorder({
    this.side = BorderSide.none,
    this.borderRadius = BorderRadius.zero,
})

// 两端是半圆的边框
const StadiumBorder({ 
    this.side = BorderSide.none 
})

// 边框样式的设置
const BorderSide({
    // 边框颜色, 默认黑色 
    this.color = const Color(0xFF000000),
    // 边框宽度, 默认1.0
    this.width = 1.0,
    // 边框样式, solid: 实线边框(默认值), none: 不显示边框
    this.style = BorderStyle.solid,
})
复制代码

下面就来看一下shape的配置和使用, 设置默认状态(即所有的边框样式和圆角都是默认值)的效果如下

children: <Widget>[
  // BeveledRectangleBorder
  RaisedButton(
    child: Text('BeveledRectangleBorder'),
    onPressed: () => print('RaisedButton'),
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(10)),
      side: BorderSide(
        color: Colors.red,
        width: 2,
        style: BorderStyle.solid
      )
    ),
  ),
  RaisedButton(
    child: Icon(Icons.supervisor_account, color: Colors.green, size: 40),
    onPressed: () => print('RaisedButton'),
    padding: EdgeInsets.all(10),
    shape: CircleBorder(
      side: BorderSide(
        color: Colors.red,
        width: 2,
        style: BorderStyle.solid
      )
    ),
  ),
  RaisedButton(
    child: Text('RoundedRectangleBorder'),
    onPressed: () => print('RaisedButton'),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(10)),
      side: BorderSide(
        color: Colors.red,
        width: 2,
        style: BorderStyle.solid
      )
    ),
  ),
  RaisedButton(
    child: Text('StadiumBorder'),
    onPressed: () => print('RaisedButton'),
    shape: StadiumBorder(
      side: BorderSide(
        color: Colors.red,
        width: 2,
        style: BorderStyle.solid
      )
    ),
  ),
],
复制代码

上述代码是分别设置圆角和边框后的代码, 效果如下

RaisedButton

  • RaisedButton即"漂浮"按钮，它默认带有阴影和灰色背景。按下后阴影会变大
  • RaisedButton继承自MaterialButton, 相关属性和父类一样
RaisedButton(
    child: Text('RaisedButton'),
    onPressed: () => print('RaisedButton'),
)
复制代码

FlatButton

  • FlatButton即扁平按钮，默认背景透明并不带阴影。按下后，会有背景色
  • RaisedButton继承自MaterialButton, 相关属性和父类一样
FlatButton(
    child: Text('FlatButton'),
    onPressed: () => print('FlatButton'),
)
复制代码

OutlineButton

  • OutlineButton默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)
  • RaisedButton继承自MaterialButton, 相关属性和父类一样
OutlineButton(
    child: Text('OutlineButton'),
    onPressed: () => print('OutlineButton'),
)
复制代码

IconButton

IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景

// 继承自StatelessWidget
class IconButton extends StatelessWidget {
  const IconButton({
    Key key,
    // 按钮的大小
    this.iconSize = 24.0,
    // 内边距
    this.padding = const EdgeInsets.all(8.0),
    // 按钮中图片的对齐方式
    this.alignment = Alignment.center,
    // 图片按钮的图片Icon
    @required this.icon,
    // 背景色
    this.color,
    // 高亮状态下的背景色
    this.highlightColor,
    // 按钮按下时, 水波纹的颜色
    this.splashColor,
    // 禁用状态下, 按钮的背景色
    this.disabledColor,
    // 点击事件
    @required this.onPressed,
    // String, 描述按钮按下时的描述文本, 需要长按才能出现(黑框显示文本)
    this.tooltip
  })
}
复制代码

使用示例

IconButton(
    icon: Icon(Icons.mail_outline, color:Colors.orange, size: 40),
    color: Colors.yellow,
    iconSize: 100,
    alignment: Alignment.topLeft,
    onPressed: () => print('IconButton'),
    tooltip: 'titanjun.top',
)
复制代码

图文按钮

每一个继承自MaterialButton的按钮Widget都有一个工厂构造函数, 返回一个图片在左, 文字在右的按钮

factory RaisedButton.icon({
    // 这里包含MaterialButton的所有属性
    ....
    // 图片Widget
    @required Widget icon,
    // 文字Widget
    @required Widget label,
  })
  
factory FlatButton.icon({
    ....
    @required Widget icon,
    @required Widget label,
  })
  
factory OutlineButton.icon({
    ....
    @required Widget icon,
    @required Widget label,
  })
  
// 使用示例
RaisedButton.icon(
  label: Text('data'),
  icon: Icon(Icons.mail),
  onPressed: () => {},
),
复制代码

单选开关和复选框

  • Material widgets库中提供了Material风格的单选开关Switch和复选框Checkbox，它们都是继承自StatelessWidget
  • 它们本身不会保存当前选择状态，所以一般都是在父widget中管理选中状态
  • 当用户点击Switch或Checkbox时，它们会触发onChanged回调，我们可以在此回调中处理选中状态改变逻辑
// Switch属性
const Switch({
    Key key,
    // Switch的状态值, true开启, false关闭
    @required this.value,
    // Switch改变状态所执行的操作
    @required this.onChanged,
    // 开启状态下选项条的颜色
    this.activeColor,
    // 开启状态下圆球的颜色
    this.activeTrackColor,
    // 关闭状态下选项条的颜色
    this.inactiveThumbColor,
    // 关闭状态下圆球的颜色
    this.inactiveTrackColor,
    // 设置开启状态下圆球的图片
    this.activeThumbImage,
    // 设置关闭状态下圆球的图片
    this.inactiveThumbImage,
    // 设置Switch的尺寸样式, padded: 建议大小48, shrinkWrap: 可能的最小尺寸
    this.materialTapTargetSize,
})

// Checkbox属性
const Checkbox({
    Key key,
    // Switch的状态值, true选中, false未选中
    @required this.value,
    // 如果为 true，那么复选框的值可以是 true，false 或 null
    // 如果为false(默认值), 那么只有true和false两种状态
    this.tristate = false,
    // 改变状态时执行的函数
    @required this.onChanged,
    // 选中时的颜色
    this.activeColor,
    // 设置Checkbox的尺寸样式, padded: 建议大小48, shrinkWrap: 可能的最小尺寸
    this.materialTapTargetSize,
})
复制代码

使用代码

children: <Widget>[
  Switch(
    value: false,
    onChanged: (value) {},
    activeColor: Colors.red,
    activeTrackColor: Colors.yellow,
    inactiveThumbColor: Colors.blue,
    inactiveTrackColor: Colors.cyan,
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap
  ),
  Checkbox(
    value: true,
    onChanged: (value) { },
    activeColor: Colors.orange,
    tristate: true,
  )
],
复制代码

转载于:https://juejin.im/post/5cb9955ff265da039444a67f

weixin_33854644
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter开发之Dart语言基础
01-27
简单来说，Flutter是一款移动应用程序SDK，包含框架、widget和工具，为开发人员提供了一种在Android和iOS上构建和部署精美移动应用程序的简单高效的方式。Flutter项目由来已久，但真正为人所熟知确是在2017年5月...
Flutter 图片组件
yfwang0810的博客
09-01 196
Flutter 图片组件一、Flutter 图片组件二、Flutter 引入本地图片三、Flutter 实现圆角以及实现圆形图片 一、Flutter 图片组件 图片组件是显示图像的组件，Image 组件有很多构造函数，这里主要使用两个： Image.asset， 本地图片 Image.network 远程图片 Image 组件的常用属性: 名称 类型 说明 alignment ...
三、Widget
Sim的博客
03-26 283
一、Widget 在Flutter中，除了Basics 的文本、图片、卡片、输入框这些基础控件，布局方式和动画等也都是由Widget组成的。通过使用不同类型的Widget，就可以实现复杂的界面。 Widget可以翻译为部件，粗略的相当于Android中的View。Widget和View不同的是：Widget具有不同的生命周期：它是不可变的，每当Widget或者其状态发生变化时，Flutter的框架都会创建一个新的Widget实例树。相比之下，Android中的View会被绘制一次，并且在invalidate
Flutter布局——Flex、FittedBox、Stack、Container
Dream It Possible
08-31 1460
Padding部件和容器内的pading属性的效果实际上是一致的，当同时出现，真实的padding将是两者相加。topLeft（左上），topCenter（顶部中央），topRight（右上），centerLeft，center，centerRight，bottomLeft，bottomCenter，bottomRight。这时的容器的宽度会以据边界的距离（left和right）自动调整。Flutter中涉及到布局的Widget有30多种，一样的效果的ui，实现的途径有很多中。dx和dy的取值都是0~1。.
Flutter：FittedBox（缩放布局）
Lud的博客
10-23 8033
FittedBox 组件主要做两件事，缩放（Scale）和位置调整（Position）。 FittedBox 会在自己的尺寸范围内缩放并调整 child 的位置，使 child 适合其尺寸。FittedBox 和 Android 中的 ImageView 有些类似，将图片在其范围内按照规则进行缩放和位置调整。 布局分为两种情况： 如果外部有约束的话，按照外部约束调整自身尺寸，然后缩放调整 chi...
Flutter控件
chenyiluo94的博客
06-22 1048
2.图片 （1）Icon:系统自带图标 （2）本地图片 Image.asset() AssetImage （3）网络图片 Image.network() NetworkImage （4）Alignment设置图片位置 （5）BoxFit设置大小和图片不吻合时 3.按钮(xxButton) （1）普通按钮 常用的普通按钮：常用属性: （2）下拉菜单按钮 DropdownButtonFloatingActionButtonFloatActionButton
flutter构建widget树demo，flutter资料学习demo，dart语言学习基础
09-15
flutter基础学习demo，该demo中利用widget树原理构建复杂的布局和效果，其中使用了动态路由，以及手势；通过该demo可以很好的学习的如何布局，手势的使用以及动态路由的使用，通过这些可以很快的了解到跨平台flutter...
flutter-unity-view-widget：Flutter的可嵌入的统一游戏引擎视图。 在此处提前演示https：//github.comjuicycleffflutter-unity-arkit-demo
02-04
flutter_unity_widget Flutter unity 3D小部件，用于将统一性嵌入flutter中。 现在，您可以在Unity中为应用程序提供出色的游戏化功能，并使其以全屏和可嵌入模式在Flutter应用程序中呈现。 在Android，iPad OS和iOS...
flutter_BaseWidget:一个规范flutter生命周期的Widget基类，并且封装了基本属性，加快开发速度，常见的自定义控件~完善的网络请求封装，功能非常全
04-30
Flutter常见的一些架构、自定义实例环境: Flutter 版本 1.9.1持续更新中，大家共同进步，有任何疑问，欢迎加QQ群： 661614986 ，共同探讨。功能名称归类链接页面基类，类比于安卓里面的BaseActivity架构级大转盘饼状...
Flutter进阶之实现动画效果（一）
01-05
上一篇文章我们了解了Flutter的动画基础，这一篇文章我们就来实现一个图表的动画效果。 首先，我们需要创建一个新项目myapp，然后把main.dart的内容替换成下面的代码 import 'package:flutter/material.dart'; ...
360yunpan_android.apk
05-10
360yunpan_android.apk
flutter控件FittedBox
华山论码
10-11 411
1.FittedBox 按自己的大小调整其子widget的大小和位置。 如果外部有约束的话，按照外部约束调整自身尺寸，然后缩放调整 child ，按照指定条件进行布局。例如使用Container包裹，Container的约束条件会传递给FittedBox。 如果没有外部约束条件，则跟 child 尺寸一样，指定的缩放和位置属性将不起作用。 2.BoxFit BoxFit.contain：全图居中显示但不充满，显示原比例 BoxFit.cover：图片可能拉伸，也可能裁剪，但是充满容器 BoxFit.fill
flutter Widget基础
秋殇阁
10-30 1028
首先，我们先附上官网教程中关于flutter框架的介绍，作为补充。 Flutter官方提供的Flutter框架图 Flutter Framework 这是一个纯 Dart实现的 SDK： Foundation和Animation、Painting、Gestures 在Google的一些视频中被合并为一个dart UI层，对应的是Flutter中的dart:ui包，它是Flutter引擎暴露的底层...
Flutter Image 图片显示样式 BoxFit
热门推荐
仰望星空
01-20 1万+
常见用法如下: Image.asset("assets/images/ic_qrcode_preview_tiny.png", height: 30.0, width: 30.0, fit: BoxFit.cover); 网络图片fit属性也实用 BoxFit.fill:充满父容器。 BoxFit.contain:尽可能大，保持图片分辨率。 BoxFit....
BoxFit（缩放模式、自适应模式）
weixin_33962923的博客
11-19 3365
类似于Android原生的ImageView ScaleType 以下是Flutter提供的Box缩放类型： fill：Box被完全填充，相当于ScaleType的FIT_XY contain：保持Box的纵横比至至少有一边填充满父控件，相当于ScaleType的FIT_CENTER cover：保持Box的纵横比进行缩放至Box完全填充满父控件，超出部分进行裁剪，相当于Scale...
Flutter 基础篇（二）—— Widget
一个写代码的废物
10-16 450
概念 Flutter 是面向 Widget 开发的移动端 UI 框架。 Widget 可以理解为控件或者组件。它不仅可以表示 UI 元素，也可以表示一些功能性的组件。 在 Flutter 中，Widget 的功能是描述一个 UI 元素的配置数据。 也就是说，Widget 其实并不是表示最终绘制在设备屏幕上的元素，它只是描述显示元素的一个配置数据！！ 实际上，Flutter 中真正代表屏幕上显示元素...
Flutter 小技巧之优化你的代码性能
恋猫de小郭的博客
10-21 1364
另外 Component Class 的实现方式，也能在一定层度解决代码层级嵌套的问题，有时候实现一些 Component Class 的模版也可以成为 Flutter 里提高效率的工具，这个后面我们会聊到。可以是最常说到的一个性能优化的例子， 一般情况下在页面的子控件里使用动画，特别是循环动画的话，我们都会建议使用前面介绍的 Component Class 方式，不然动画导致当前页面不停 rebuild 肯定会导致性能影响。，放心，本篇我们不讲深入的源码分析，就是分享最最最基础的布局代码优化。
Flutter以图片开头的Text-----DrawableStartText
baoolong的博客
01-27 4663
hello,大家好，今天为大家介绍一个小控件，就是以图片开始的Text；如果你的文字需要多行显示，并且在开头的位置要能添加图片。不妨试试这个控件，图片会自适应文字的高度来显示； 安卓原生的TextView就自带drawableLeft等，使用很简单，到Flutter就得自己想办法了，这个控件以前帮别人写的，现在贡献出来，大家再也不用去为这些小控件去发愁，去查找了；老规矩，还是先看图，看一看图就知...
Flutter(1)：Text图文混排
Q 的博客
03-31 1616
图中效果使用图文混排实现，要用到WidgetSpan，可以接入任何Widget Container( padding: EdgeInsets.only(top: 12, left: 0, right: 0, bottom: 0), child: Text.rich(TextSpan( children: [ WidgetSpan( alignment: PlaceholderAli..
Flutter基础知识
最新发布
05-25
Flutter中的Widget分为两种类型：无状态（Stateless）Widget和有状态（Stateful）Widget。 3. Flutter使用Material Design和Cupertino风格来设计UI界面。 4. Flutter具有热重载功能，可以在不重新启动应用程序的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值