Flutter 学习 - Widget 之 Text

前言

什么是Widget

Widget是学习Flutter的基础,用于构建UI,相当于Android中的View,IOS中的UIView一样。

文本显示Widget – Text

Text是Fultter 中文本展示的控件,类似于Android中的TextView,Flutter中还有另一种文本展示Widget - RichText(将在下篇文章中介绍)

使用

先来看下代码中最简单的使用方法

Text("hello flutter") //这里传入需要显示的文字

下面看下Text的源码,参数中对应的数据类型,下面会逐个介绍

const Text( 
    this.data, { //data就是我们需要展示的文字,这个是必传字段,其他的都是可选
    Key key,    //widget的标识
    this.style,  //文本样式,类型是TextStyle
    this.strutStyle, //使用的支柱风格,类型是StrutStyle
    this.textAlign, //文本的对齐方式,类型是TextAlign
    this.textDirection, // 文字方向,类型是TextDirection
    this.locale, //选择用户语言和格式的标识符,类型是Locale
    this.softWrap, //bool 类型 ,false标识文本只有一行,水平方向无限
    this.overflow, //文本的阶段方式,类型是TextOverflow
    this.textScaleFactor,//double类型 表示文本相对于当前字体的缩放因子,默认为1.0
    this.maxLines,// int 类型,显示的最大行数
    this.semanticsLabel, //String 类型,给文本加上一个语义标签,没有实际用处
    this.textWidthBasis,//一行或多行文本宽度的不同方式,类型是TextWidthBasis
  }) : assert(
         data != null,
         'A non-null String must be provided to a Text widget.',
       ),
       textSpan = null,
       super(key: key);
  • ######TextStyle - 用来定义Text显示的样式 使用方式及效果如下:
    Text("Hello Flutter",
        style: TextStyle(color: Colors.red,
          fontSize: 24,
          background: Paint()..color = Colors.yellow),
      )

设置TextStyle效果.jpg
下面看下TextStyle的源码,逐个解释各个参数的含义
注:TextStyle只有可选参数,没有必选参数

const TextStyle({ 
    this.inherit = true, //是否继承父Text的样式,默认为true
    this.color,  //文字的颜色 类型为Color
    this.backgroundColor,  //背景颜色 类型为Color
    this.fontSize, //double 类型,文字的大小 
    this.fontWeight, //字体粗细,类型是FontWeight
    this.fontStyle, //是否在字体中倾斜字形,类型为FontStyle
    this.letterSpacing, // double类型,字母之间的间隔	
    this.wordSpacing, //double类型,单词之间的间隔
    this.textBaseline, //用于对齐文本的水平线,类型是 TextBaseline
    this.height, //double类型,文本的高度,但它并不是一个绝对值,而是一个因子,具体的行高等于fontSize*height。
    this.locale, //选择用户语言和格式的标识符,类型是Locale
    this.foreground,//文本的前景色,类型是Paint
    this.background,//文本的背景色	,类型是Paint
    this.shadows,//在文本下方绘制阴影,类型是List< ui.Shadow>
    this.fontFeatures,//字体选择字形的列表,类型List<ui.FontFeature>     
    this.decoration,//文本的线条,类型是TextDecoration	
    this.decorationColor,//TextDecoration 线条的颜色,类型是Color
    this.decorationStyle,//TextDecoration 线条的样式,类型是TextDecorationStyle
    this.decorationThickness,//double类型,默认为1.0,表示使用字体的基本画笔厚度宽度
    this.debugLabel,//String 类型,文本样式的描述无实际用处
    String fontFamily,//String类型,用于设置使用哪种自定义字体
    List<String> fontFamilyFallback,//String 类型,字体列表,当前面的字体找不到时,会在这个列表里依次查找
    String package,//String 类型,用于设置使用哪种自定义字体
  }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
       _fontFamilyFallback = fontFamilyFallback,
       _package = package,
       assert(inherit != null),
       assert(color == null || foreground == null, _kColorForegroundWarning),
       assert(backgroundColor == null || background == null, _kColorBackgroundWarning);
  • StrutStyle – 使用的支柱风格,使用方式及效果如下

注:forceStrutHeight 为true的情况

     Text("Hello Flutter",
        style: TextStyle(color: Colors.red,
          fontSize: 24,
          background: Paint()..color = Colors.yellow),
          strutStyle: StrutStyle(forceStrutHeight: true,fontSize: 12),
      )

forceStrutHeight 为true的情况.jpg

forceStrutHeight 为false情况

    Text("Hello Flutter",
        style: TextStyle(color: Colors.red,
          fontSize: 24,
          background: Paint()..color = Colors.yellow),
          strutStyle: StrutStyle(forceStrutHeight: false,fontSize: 12),

forceStrutHeight 为false的情况.jpg

  • TextAlign – 文本的对齐方式,共6种

1.TextAlign.left:左对齐
2.TextAlign.right:右对齐
3.TextAlign.center:居中对齐
4.TextAlign.start:从文字开始的那个方向对齐,如果文字方向从左到
右,就左对齐,否则是右对齐。
5.TextAlign.end:从文字开始的相反方向对齐,如果文字方向从左到
右,就右对齐,否则是左对齐。
6.TextAlign.justify

  • ######TextDirection – 文字方向,共两种
    1.TextDirection.ltr:文字方向从左到右
    2.TextDirection.ltr:文字方向从右到左
  • Locale – 选择用户语言和格式的标识符

下面看下Locale的源码

const Locale(
    this._languageCode, [//主语言标记 ,必选
    this._countryCode,//区域(国家),可选
  ]) : assert(_languageCode != null),
       assert(_languageCode != ''),
       scriptCode = null;

使用示例:

Text(widget.title,
          textWidthBasis: TextWidthBasis.parent, ),
      ),
      body: Text("Hello Flutter 哈哈",
        style: TextStyle(color: Colors.red,
          fontSize: 24,
          background: Paint()..color = Colors.yellow),
          strutStyle: StrutStyle(forceStrutHeight: false,fontSize: 12),
      locale: Locale("fr","CH"),)
  • TextOverflow – 文本的截断方式,共三种

当要显示的内容超了之后
1.TextOverflow.ellipsis:多余文本截断后以省略符“…”表示
2.TextOverflow.clip:剪切多余文本,多余文本不显示
3.TextOverflow.fade:将多余的文本设为透明

  • TextWidthBasis – 一行或多行文本宽度的不同方式,共两种

1.TextWidthBasis.parent:多行文本的将占用父类给出的全部宽度,针对一行文本只需要包含文本所需要的最小宽度,常见用例为段落
2.TextWidthBasis.longestLine:宽度刚好可以容纳最长的行,比如聊天气泡

结尾

截止到现在,Text 就介绍完了。
以下是我的Flutter系列的链接,后续会持续更新,欢迎大家指正。

Flutter 系列文章

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Flutter中的TextField是一个常用的输入控件,它允许用户在应用程序中输入文本。 TextField通常用于表单中,可以接收用户输入的文本,比如用户名、密码、电子邮件地址等。 以下是一个基本的TextField示例: ```dart TextField( decoration: InputDecoration( hintText: '请输入文本', ), ); ``` 在上面的示例中,我们使用了decoration属性来设置TextField的外观,其中hintText属性用于设置提示文本。 TextField还有许多其他的属性可以设置,比如maxLength(允许输入的最大长度)、keyboardType(键盘类型)、obscureText(是否隐藏输入内容)等等。 下面是一个更完整的TextField示例: ```dart class MyTextField extends StatefulWidget { @override _MyTextFieldState createState() => _MyTextFieldState(); } class _MyTextFieldState extends State<MyTextField> { final TextEditingController _controller = TextEditingController(); @override Widget build(BuildContext context) { return TextField( controller: _controller, maxLength: 10, keyboardType: TextInputType.text, obscureText: true, decoration: InputDecoration( hintText: '请输入文本', labelText: '文本框', prefixIcon: Icon(Icons.text_fields), suffixIcon: IconButton( icon: Icon(Icons.clear), onPressed: () { setState(() { _controller.clear(); }); }, ), border: OutlineInputBorder(), ), onChanged: (value) { print('输入的文本为:$value'); }, ); } } ``` 在上面的示例中,我们使用了TextEditingController来控制TextField的文本内容,maxLength属性限制了用户输入的最大长度为10,keyboardType属性指定了键盘类型为文本类型,obscureText属性设置为true表示隐藏输入内容。 此外,我们还设置了decoration属性来自定义TextField的外观,包括了输入提示文本、标签文本、前缀图标、后缀图标和边框样式等。 最后,我们通过onChanged回调函数来监听用户输入的文本,并打印出来。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值