Flutter学习日记remix

1.Text

1.1 字符串拼接， $变量名；

1.2 TextStyle,字符样式，颜色，字体等样式设置；

1.3 maxLines字符最多显示的行数，配合 overflow: TextOverflow.ellipsis, 实现省略部分以 符号 ... 表示；

2.富文本RichText

TextSpan ,通过children 添加多个不同样式的文本

RichText(
    text: TextSpan(
      text: "flutter",
      style: TextStyle(
        fontSize: 36.0,
        fontStyle:FontStyle.italic,
        color: Colors.blueAccent
      ),
      children: [
      TextSpan(
        text: ".dart",
        style: ,
      ),
    ]
    ),
  );

3.Container

container里面属性比较简单，说下注意点： color 与 decoration 冲突，只允许存在其中一个

隆重介绍一下decoration属性

const BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,
    this.gradient,
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
  })

 image: DecorationImage(
         image: NetworkImage("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1609287357,1273192529&fm=26&gp=0.jpg")
             ,
        //填充模式
         fit: BoxFit.cover,
//         图片滤镜
         colorFilter: ColorFilter.mode(
             Colors.deepOrange.withOpacity(0.5),
             BlendMode.hardLight),
       ),

//             边框
             border:
//             Border(
//               顶部添加一个边框
//               top: BorderSide(
//                   color: Colors.red,
//                   width: 3,
//                   style: BorderStyle.solid
//               ),
//             ),
//所有边，添加边框
             Border.all(
               color: Color.fromRGBO(3, 54, 255, 1),
               width: 3,
               style: BorderStyle.solid,
             ),

 borderRadius: BorderRadius.circular(16),
  <!--BorderRadius.horizontal(left: Radius.elliptical(30, 30))--> 水平左边圆角化
 shape: BoxShape.circle,
 这两个属性放在一起说，borderRadius 与 BoxShape.circle 也会存在冲突，会报错。
 默认值为BoxShape.rectangle时候，会以borderRadius为主
 
 简之：shape: BoxShape.circle 造圆一步到位，borderRadius多种多样，两者不共存，只取其一

 阴影
    boxShadow: [
      BoxShadow(
        offset: Offset(0, 16),
        color: Color.fromRGBO(3, 54, 255, 1),
//                 模糊效果，值越大，效果越明显
         blurRadius: 25.0,
//                 阴影扩散，值越大，范围越大
          spreadRadius:-9,
        ),
      ],

    渐变效果
    <!--扫描式渐变-->
    <!--SweepGradient-->
    //从中心扩散效果
//             gradient: RadialGradient(colors: [
//               Colors.yellow,
//               Colors.green
//             ]),
//默认从左往右扩散，可指定开始-结束扩散方向
             gradient: LinearGradient(colors: [
               Colors.green,
               Colors.yellow
             ],
               begin: Alignment.topLeft,
               end: Alignment.bottomRight
             ),

backgroundBlendMode: BlendMode.hardLight
*必须设置了color，才能使用
会使颜色透明，类似图片滤镜效果

                   路漫漫其修远兮，吾将上下而求索
                        ——致程序员逝去的青春