美文网首页
Flutter - Text Wigdet (1)

Flutter - Text Wigdet (1)

作者: iixzp | 来源:发表于2020-05-09 22:47 被阅读0次
    Screenshot_1589034997.png
    import 'package:flutter/material.dart';
    
    void main () {
      runApp(myApp()); // 主入口
    }
    
    class myApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
          title:'Text Widget', 
          // 脚手架
          home:Scaffold( 
            body:Center(
              // Text Widgit
              child:Text(
              'hello xzp! 一起来学习这个Flutter吧', // 文本内容
              textAlign: TextAlign.center, // 文本对齐方式
              maxLines: 1, // 文本最大展示行数
              overflow: TextOverflow.ellipsis, // 文本溢出处理方式
              style: TextStyle(
               fontSize: 20.0,  // 文本字体大小
               color: Color.fromARGB(255,255, 120, 30), // 文本颜色
               decoration: TextDecoration.underline, // 线条
               decorationStyle: TextDecorationStyle.dashed // 线条类型
              )),
            )
          )
        );
      }
    }
    

    Text Widget

    是我学习的第一个组件,记录一下吧

    textAlign 文本的对齐方式
    例:TextAlign.center 
    
    center:   文本居中对齐
    left:     文本左对齐
    right :   文本右对齐
    start:    以文本开始位置进行对齐,类似于左对齐
    end:      以文本结尾处进行对齐,类似右对齐
    
    maxLines 文本最大行数
    例:maxLines: 1
    
    overflow 文本溢出时的处理方式
    例:TextOverflow.ellipsis
    clip:      直接切断,剩下的文字就没有了。
    ellipsis:  在后边显示省略号。
    fade:      溢出的部分会进行一个渐变消失的效果。
    
    style 文本属性 (设置文本的颜色,字号,字体等属性)
    例:
        fontSize: 20.0,  // 文本字体大小
        color: Color.fromARGB(255,255, 120, 30), // 文本颜色
        decoration: TextDecoration.underline, // 线条
        decorationStyle: TextDecorationStyle.dashed // 线条类型
    

    相关文章

      网友评论

          本文标题:Flutter - Text Wigdet (1)

          本文链接:https://www.haomeiwen.com/subject/ueolnhtx.html