Flutter快速上手1.1：基础控件之Text和Selecta

flutter_ illustration_pic_1.jpeg

一、Text

从第一个程序开始，就用上这个控件啦~

先点进Text去看一下有什么属性
我先标记几个常用的，其他难点的后面再来补充

const Text(
    String this.data,// String 需要显示的文本字符串
 {
    Key? key,
    this.style,// TextStyle 文本样式，除了字符串，这个是必选项
    this.strutStyle,
    this.textAlign,//  TextAlign 文本对齐方式,start,end,center
    this.textDirection,// TextDirection 文本显示方向 ltr从左到右，rtl从右往左
    this.locale,
    this.softWrap,// 是否自动换行
    this.overflow,// 处理溢出（同下）TextOverflow.ellipsis显示省略号
    this.textScaleFactor,// 每个逻辑像素的字体像素值。简单说就是字体缩放系数
    this.maxLines,// 文本最多可显示的行数。如果文本超过给定的行数，则根据溢出规则截断
    this.semanticsLabel,
    this.textWidthBasis,
    this.textHeightBehavior, 
  })

overflow溢出处理详细

• TextOverflow. clip：剪辑溢出的文本
• TextOverflow. fade：将溢出的文本淡化为透明
• TextOverflow.ellipsis：用省略号表示溢出
• TextOverflow. visible：在容器之外显示溢出的文本

Text有个重要的属性就是，同样，我们也先点进去看看，

const TextStyle({
    this.inherit = true,
    this.color,//颜色
    this.backgroundColor,//背景颜色
    this.fontSize,//大小
    this.fontWeight,//字体的粗细
    this.fontStyle,//字体的样式，如：正常、斜体
    this.letterSpacing,//字与字之间的间距
    this.wordSpacing,//空白所占的像素单位，比如可以把空白调大，也可以有空的置为0
    this.textBaseline,
    this.height,//行高相关
    this.leadingDistribution,
    this.locale,
    this.foreground,
    this.background,
    this.shadows,//绘制文字的阴影
    this.fontFeatures,
    this.decoration,//装饰线 TextDecoration.underline绘制下划线 .overline上划线 .lineThrough删除线
    this.decorationColor,//装饰线的颜色
    this.decorationStyle,//装饰线的样式TextDecorationStyle.dotted圆点 .dashed虚线 .double双划线 .solid实线
    this.decorationThickness,//装饰线的粗细
    this.debugLabel,
    String? fontFamily,//字体样式，传字符串
    List<String>? fontFamilyFallback,
    String? package,
    this.overflow,//处理溢出（同上）TextOverflow.ellipsis显示省略号
  })

这是我的代码，样式都添加在一个文字中，根据需要自行选择

const Text(
                '表面特质是通过外部行为表现出来, 能够观察得到的特质, 它是一种彼此关联的可以观察到的特质, 不是一种解释性概念 。The horizontal line used to align the bottom of glyphs for alphabetic characters.',
                overflow: TextOverflow.ellipsis,
                maxLines: 3,
                textAlign: TextAlign.center,
                textDirection: TextDirection.ltr,
                style: TextStyle(
                  color: Colors.black,
                  backgroundColor: Colors.yellow,
                  fontSize: 15,
                  fontWeight: FontWeight.normal,
                  fontStyle: FontStyle.italic,
                  letterSpacing: 10,
                  wordSpacing: 10,
                  height: 2,
                  shadows: [Shadow(color: Colors.red, offset: Offset(2, 2))],
                  decoration:  TextDecoration.underline,
                  decorationColor: Colors.green,
                  decorationStyle: TextDecorationStyle.solid,
                  decorationThickness: 2.0,
                  // overflow: TextOverflow.ellipsis,

                ),
              ),

这是展示的结果，选择需要的属性就美观啦~

二、SelectableText

普通用法，设置字体颜色和大小

const SelectableText(
                "这是一句话，喜欢可以复制它-当做表单标题",
                style: TextStyle(color: Colors.red, fontSize: 18),
              ),

设置光标（不知为什么，设置菜单不展示，用的时候再来看吧）

const SelectableText(
              '一年之计在于春',
              showCursor: true,
              autofocus: true,
              cursorColor: Colors.red,
              cursorRadius: Radius.circular(10),
              cursorWidth: 5,
              toolbarOptions: ToolbarOptions(
                cut: true,
                paste: true,
                selectAll: true,
              ),
            ),

WX20220418-160902.png

本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子，初学Flutter ，文章会根据学习进度不定时更新，请多多指教~~