flutter(004)常用Widget

文本Widget

• Text

  Text(
      "Text组件的使用",
      style: TextStyle(
          // 文字颜色
          color: Color(0xfff0000),
          // none 不显示装饰线条，underline 字体下方，overline 字体上方，lineThrough穿过文字
          decoration: TextDecoration.none,
          // solid 直线，double 双下划线，dotted 虚线，dashed 点下划线，wavy 波浪线
          decorationStyle: TextDecorationStyle.solid,
          // 装饰线的颜色
          decorationColor: Colors.red,
          // 文字大小
          fontSize: 15.0,
          // normal 正常，italic 斜体
          fontStyle: FontStyle.normal,
          // 字体的粗细
          fontWeight: FontWeight.bold,
          // 文字间的宽度
          letterSpacing: 1.0,
          // 文本行与行的高度，作为字体大小的倍数（取值1~2，如1.2）
          height: 1,
          //对齐文本的水平线:
          //TextBaseline.alphabetic：文本基线是标准的字母基线
          //TextBaseline.ideographic：文字基线是表意字基线；
          //如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
          textBaseline: TextBaseline.alphabetic),
      // 段落的间距样式
      strutStyle: StrutStyle(
        fontFamily: 'serif',
        fontFamilyFallback: ['monospace', 'serif'],
        fontSize: 20,
        height: 2,
        leading: 2.0,
        fontWeight: FontWeight.w300,
        fontStyle: FontStyle.normal,
        forceStrutHeight: true,
        debugLabel: 'text demo',
      ),
      // 文字对齐方式
      textAlign: TextAlign.center,
      // 文字排列方向 ltr 左到右，rtl右到左
      textDirection: TextDirection.ltr,
      // 用于选择区域特定字形的语言环境
      locale: Locale('zh_CN'),
      // 软包裹 ，文字是否应该在软断行出断行
      softWrap: false,
      // 如何处理视觉溢出:clip 剪切溢出的文本以修复其容器。ellipsis 使用省略号表示文本已溢出。fade 将溢出的文本淡化为透明。
      overflow: TextOverflow.clip,
      // 文字的缩放比例
      textScaleFactor: 1.0,
      // 文本要跨越的可选最大行数,
      maxLines: 2,
      // 图像的语义描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
      semanticsLabel: 'text demo',
      textWidthBasis: TextWidthBasis.longestLine,
    )

• RichText和Text.rich

  RichText(
    text: TextSpan(
      text: '登陆即同意',
      style: TextStyle(fontSize: 14, color: Colors.black),
      children: [
        TextSpan(
          text: '"服务条款"',
          style: TextStyle(fontSize: 14, color: Colors.blue),
          recognizer: TapGestureRecognizer()
            ..onTap = () {
              print('点击了服务条款');
            },
        ),
        TextSpan(
          text: '和',
          style: TextStyle(fontSize: 14, color: Colors.black),
        ),
        TextSpan(
          text: '"隐私政策"',
          style: TextStyle(fontSize: 14, color: Colors.blue),
          recognizer: TapGestureRecognizer()
            ..onTap = () {
              print('点击了隐私政策');
            },
        ),
        WidgetSpan(
          alignment: PlaceholderAlignment.middle,
          child: Image.asset(
            'assets/noavatar.png',
            width: 20,
            height: 20,
          ),
        ),
      ],
    ),
  );

按钮Widget

• Flutter 1.22版本之前主要用FlatButton、RaisedButton、OutlineButton，目前不推荐使用，要给按钮设置一个背景色,你得套一层Container,利用Container的颜色来实现，很不方便

• Flutter 1.22版本新增了3个按钮，TextButton、OutlinedButton、ElevatedButton，虽然以前的Button没有被废弃，但flutter团队以后也不更新它们,只会停留在现阶段.强烈建议使用新的Button。

  1.22版本前的按钮	主题	1.22版本后的按钮	主题
  FlatButton	ButtonTheme	TextButton(扁平)	TextButtonTheme
  OutlineButton	ButtonTheme	OutlinedButton(边框)	OutlinedButtonTheme
  RaisedButton	ButtonTheme	ElevatedButton(凸起)	ElevatedButtonTheme

  // 推荐使用 TextButton OutlinedButton ElevatedButton
  TextButton(
    onPressed: () {
      print("-----");
    },
    child: Text("登录"),
    style: ButtonStyle(
       minimumSize: MaterialStateProperty.all(Size(100, 30)),
       padding: MaterialStateProperty.all(EdgeInsets.zero),
       backgroundColor: MaterialStateProperty.all(Colors.grey),
    ),
  ),
  const ButtonStyle({
    this.textStyle, //字体
    this.backgroundColor, //背景色
    this.foregroundColor, //前景色
    this.overlayColor, // 高亮色，按钮处于focused, hovered, or pressed时的颜色
    this.shadowColor, // 阴影颜色
    this.elevation, // 阴影值
    this.padding, // padding
    this.minimumSize, //最小尺寸
    this.side, //边框
    this.shape, //形状
    this.mouseCursor, //鼠标指针的光标进入或悬停在此按钮的[InkWell]上时。
    this.visualDensity, // 按钮布局的紧凑程度
    this.tapTargetSize, // 响应触摸的区域
    this.animationDuration, //[shape]和[elevation]的动画更改的持续时间。
    this.enableFeedback, // 检测到的手势是否应提供声音和/或触觉反馈。例如，在Android上，点击会产生咔哒声，启用反馈后，长按会产生短暂的振动。通常，组件默认值为true。
  });

图片Widget

• Image结构
  
• Image.asset
  • 把图片放到目录中
    
  • 在 pubspec.yaml 中的 flutter 部分添加配置

    assets:
      - images/avatar.png   # 某张图片加载
      - images/            # 整个文件夹配置

  • 代码使用

    Image.asset('images/avatar.png',width: 300,height: 200,);

• 网络图片

  //直接携带URL参数即可
  Image.network('http://www.baidu.com/sports/img//ddd.jpg')
  
  //加载出错时显示某张特定的图片
  new FadeInImage.assetNetwork(
      placeholder: 'images/logo.png',
      image: imageUrl,
      width: 120,
      fit: BoxFit.fitWidth,
  )
  new FadeInImage.memoryNetwork(
      placeholder: kTransparentImage,
      image: imageUrl,
      width: 120,
      fit: BoxFit.fitWidth,
  )
  //CachedNetworkImage 组件中的占位图是一个 Widget
  new CachedNetworkImage(
      width: 120,
      fit: BoxFit.fitWidth,
      placeholder: new CircularProgressIndicator(),
      imageUrl: imageUrl,
      errorWidget: new Icon(Icons.error),
  )

• icon

  Icon(
      Icons.favorite,
      color: Colors.blue,
      size: 24,
  )

参考

Flutter中文网
Flutter系列教程