【Flutter】基础组件

TextStyle 文本样式

• color 字体颜色
• fontSize （逻辑）字体大小，默认14
• fontWeight 字体粗细 一般使用的属性：FontWeight normal（默认） 、FontWeight bold（粗体）
• fontStyle 字体：normal和italic
• fontFamily 设置字体，注意和 fontStyle的区别
• letterSpacing 字母间距，默认0，负数间距越小，正数 间距越大
• wordSpacing 单词 间距，默认0，负数间距越小，正数 间距越大，注意和letterSpacing的区别，比如hello，h、e、l、l、o各是一个字母，hello是一个单词
• textBaseline 字体基线
• height 类似 css 的 line-height 小数表示
• foreground 和 background 感觉用不到
• shadows 字体阴影
• decoration 文字划线：下划线、上划线、中划线
• decorationColor 划线颜色
• decorationStyle 划线样式：虚线、双线等

Text 文本

正常字体

  Text(
    '正常文本'
  )

下划线，中划线

image.png

    Text(
      '下划线文本',
      style: TextStyle(
        decoration: TextDecoration.underline
      ),
    ),
    Text(
      '中划线文本',
      style: TextStyle(
          decoration: TextDecoration.lineThrough
      ),
    ),
    Text(
      '上划线文本',
      style: TextStyle(
          decoration: TextDecoration.overline
      ),
    ),

粗体

image

  Text(
      '加粗文本',
      style: TextStyle(
        fontWeight: FontWeight.bold
      ),
    ),
    Text(
      '加粗文本',
      style: TextStyle(
          fontWeight: FontWeight.w200
      ),
    ),

斜文本

image.png

  Text(
      '斜体文本',
      style: TextStyle(
        fontStyle: FontStyle.italic
      ),
    ),

字体大小

image

    Text(
      '大号文本',
      style: TextStyle(
        fontSize: 30
      ),
    ),

    Text(
      '中号文本',
      style: TextStyle(
        fontSize: 20
      ),
    ),

    Text(
      '小号文本',
      style: TextStyle(
        fontSize: 10
      ),
    ),

• textAlign 设置文本对齐。多行文本才能表现出来

  
  image

• textDirection 文本方向。

• softWrap 是否自动换行，默认为 true

• overflow 溢出时如何展示。

  
  image
  

  ellipsis 和 clip 都和 css 一样，fade 有一个半透明的效果

• textScaleFactor 字体缩放

• maxLines 最大显示行

• semanticsLabel 语义化

如果需要显示富文本需要使用 Text.rich 和 textSpan

image

Text.rich(
  TextSpan(
    style: TextStyle(
      color: Colors.red
    ),
    text: 'hello world',
    children: [
      TextSpan(
        style: TextStyle(
            color: Colors.blue
        ),
        text: 'hello world'
      )
    ]
  )
);

这么展示富文本也太费劲了。

Image

return Image.asset(
  'assets/images/title.png',
  semanticLabel: '这是一张 title 图片',
  excludeFromSemantics: false,
  width: 60,
  height: 60,
  fit: BoxFit.contain,
  alignment: Alignment.bottomCenter,
  matchTextDirection: true,
  filterQuality: FilterQuality.high
);

属性

• semanticLabel 图片语义化。类似 image 的 alt 属性。
• excludeFromSemantics 不提供图片的语义，默认是 false。对于对 app 没有意义的图片使用。
• width 宽度
• height 宽度
• color 会和图片像素重合。
• colorBlendMode [ color ] 和 图片的混合方式。[ color ] 是源, 图片是目标。
• fit 控制图片的布局，类型是 BoxFit。 可选值为 BoxFit[ fill, contain, cover, fitWidth, fitHeight, none, scaleDown ]。
• alignment 对齐方式。类型是 Alignment。
• repeat 重复方式。取值 ImageRepeat。
• centerSlice 不能和 fit 同时设置。指定中心区域进行九个补丁图像，在中心切片内的图像区域将水平和垂直拉伸，以使图像适合其目的地。 中心切片上方和下方的图像区域将仅水平拉伸，而中心切片左侧和右侧的图像区域仅垂直拉伸。应该是设置九宫格图片用的。
• matchTextDirection 如果是在文本中，是否根据文本方向翻转图片。
• gaplessPlayback 当图像提供者发生变化时，是继续显示旧图像，默认不显示！
• filterQuality 图片过滤器, 类型 FilterQuality。 可选值为: [ none, low, medium, high ]，默认是 low。

创建图片容器的方法有下面几种：

• new Image.asset 展示本地图片

  return Image.asset(
      'assets/images/title.png'
  );

• new Image.network

return Image.network(
   'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553355447588&di=7df0e766c457cd950a09f3c3d016cb9a&imgtype=0&src=http%3A%2F%2Fdn-p-tystore.qbox.me%2Fp%2Fchapter%2Fattachment%2FEtIUE_bte-%2FEgfvEBITe_-W4B6ve_2wElu16gjT7UL68vmn6MiB6m9tJh9pHUfV9t2.jpg'
);

• new Image.file 展示从 [ file ] 中获取的图片
• new Image memory 展示从 [Uint8List] 中获取的图片

Icon

return Icon(
  Icons.star,
  color: Colors.red,
);

Icons 提供了很多内置的图标，如果需要别的图标可以借鉴 ：
https://blog.csdn.net/kangshaojun888/article/details/86719741

Placeholder 占位符

image

return Placeholder(
  color: Colors.red, // 颜色
  strokeWidth: 2.0, // 线条的宽度
  fallbackHeight: 100,
  fallbackWidth: 100, // 当占位符处于宽度无界的情况时使用的宽度。
);