一、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 ,文章会根据学习进度不定时更新,请多多指教~~
网友评论