Flutter之UI篇

从今年开始就慢慢接触Flutter了，学习一段时间后发现Flutter的widget种类非常多，比如居中，显示与隐藏在Android中就是控件的一个属性，但在Flutter中就是一个widget，因此有了本篇博客；在熟练使用如文本、按钮、图片，列表等常用widget后，本来可以全部记录到本篇博客，但考虑到上述widget也只做到简单使用的程度，没有更深入挖掘widget不同属性，因此决定查漏补缺，在能熟练使用widget的基础上尽可能列出widget更多的用法和使用过程中遇到的坑。

文本

Text

1. 显示文本和对齐方式

Text("hello word!",
    textAlign: TextAlign.center,),

2. 单行显示，溢出显示省略号

Text("hello word!"*10,
    maxLines: 1,/// 设置行数
    overflow: TextOverflow.ellipsis,) /// 设置溢出显示省略号

3. TextStyle:设置字体颜色，背景，字体大小等

Text("hello word",
    style: TextStyle(color: Colors.white,
        backgroundColor: Colors.black,
        decoration: TextDecoration.underline,/// 设置下划线
        decorationStyle: TextDecorationStyle.dotted, /// 下划线样式:点点还是分割线
        height: 1.2, /// height:行高因子，具体行高是fontSize*height
        fontSize: 15)),

4. TextSpan设置显示不同样式的文字

Text.rich(TextSpan(
    children: [
        TextSpan(
            text: "我是",
            style: TextStyle(color: Colors.yellow)
    ),
    TextSpan(
        text: "单身狗",
        style: TextStyle(color: Colors.red, fontSize: 30)
    ),
    TextSpan(
        text: 'https://www.baidu.com',
    ),
    ],
)),

5. DefaultTextStyle设置默认样式，该节点下子树中所有文本都会使用该样式(单独设置则不受影响)

DefaultTextStyle(
    style: TextStyle(color: Colors.amber),
    child: Column(
    children: <Widget>[
    /// 文本对齐方式
    Text("hello word!",
        textAlign: TextAlign.center,),
        /// 单行显示，溢出显示省略号
        Text("hello word!"*10,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,),
        /// TextStyle:设置字体颜色，背景，字体大小等
        Text("hello word",
            style: TextStyle(color: Colors.white,
            backgroundColor: Colors.black,
            decoration: TextDecoration.underline,/// 设置下划线
            decorationStyle: TextDecorationStyle.dotted, /// 下划线样式:点点还是分割线
            height: 1.2, /// height:行高因子，具体行高是fontSize*height
            fontSize: 15)),
        ],
    ),
),