Flutter 基础控件 Text Widget

 

文章目录

• Flutter 基础控件 Text Widget
• • 1. 创建TextExample继承StatefulWidget
  • 2. 创建TextExampleState继承TextExampleState
  • 3. 创建Widget组建
  • Text Widget 用法
• 完整代码

 

  Flutter 基础控件 Text Widget

1. 创建TextExample继承StatefulWidget

class TextExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    throw TextExampleState();
  }
}

2. 创建TextExampleState继承TextExampleState

class TextExampleState extends State<TextExample> {
  @override
  Widget build(BuildContext context) {
    return text(context);
  }
}

3. 创建Widget组建

Widget text1(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Text"),
    ),
    body: Container(
      child: Column(
        children: <Widget>[
          Text("Text最简单用用法"), // 添加Text控件
        ],
      ),
    ),
  );
}

Text Widget 用法

• 最简单用法

Text("Text最简单用用法"),

• textAlign 文字对齐方式
• style 详细的字体样式配置,如加粗，字体大小，颜色和下划线等

Text(
    "文字",
    textAlign: TextAlign.center,
    style: TextStyle(
      fontSize: 18,
      decoration: TextDecoration.none,
    ),
),

• maxLines 行数
• overflow 超过范围后，结尾显示处理方式，默认为直接截断，也可以设置为省略号
• decoration: TextDecoration.underline 字体带有下划线

  Text(
    "文字" * 60,
    textAlign: TextAlign.right,
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    style:
        TextStyle(fontSize: 25, decoration: TextDecoration.underline),
  ),

• textScaleFactor 用来配置文本相对于当前字体大小的缩放因子，也就是缩放倍数，小于1表示缩小，大于1表示放大。
• softwrap 是否自动换行 false文字不考虑容器大小，单行显示，超出屏幕部分将默认截断处理

Text(
    "文字,文字",
    textAlign: TextAlign.left,
    textScaleFactor: 1.6,
    softWrap: true,
    style: TextStyle(
        fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold),
),

• textSpan：文本块

 Text.rich(
            TextSpan(
                text: "textSpan",
                style: TextStyle(
                    color: Colors.orange,
                    fontSize: 30,
                    decoration: TextDecoration.lineThrough),
                children: <TextSpan>[
                  new TextSpan(
                      text: "连接A", style: new TextStyle(color: Colors.teal)),
                  new TextSpan(
                      text: "连接B",
                      style: new TextStyle(color: Colors.tealAccent)),
                  new TextSpan(
                      text: "连接C有点击事件",
                      style: new TextStyle(color: Colors.deepOrangeAccent),
                      recognizer: new TapGestureRecognizer()
                        ..onTap = () {
                          print("Flutter点击事件提示");
                        }),
                ]),
          ),

• RichText 通常情况下Text组件可以完成绝大多数需求，它可以显示不同大小的文字、字体、颜色等，如果想在一句话或者一段文字里面显示不同样式的文字，Text组件无法满足我们的需求，这个时候需要使用RichText

          RichText(
            text: TextSpan(
              text: 'Hello ',
              style: DefaultTextStyle.of(context).style,
              children: <TextSpan>[
                TextSpan(
                    text: 'bold',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        decoration: TextDecoration.none)),
                TextSpan(
                    text: ' world!',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        decoration: TextDecoration.none)),
              ],
            ),
          ),

完整代码

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class TextExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TextExampleState();
  }
}

class TextExampleState extends State<TextExample> {
  @override
  Widget build(BuildContext context) {
    return text1(context);
  }
}

Widget text1(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Text"),
    ),
    body: Container(
      child: Column(
        children: <Widget>[
          Text("Text最简单用用法"),
          Text(
            "文字",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 18,
              decoration: TextDecoration.none,
            ),
          ),
          Text(
            "文字" * 60,
            textAlign: TextAlign.right,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style:
                TextStyle(fontSize: 25, decoration: TextDecoration.underline),
          ),
          Text(
            "文字,文字" * 60,
            textAlign: TextAlign.left,
            textScaleFactor: 1.6,
            softWrap: false,
            style: TextStyle(
                fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold),
          ),
          Text.rich(
            TextSpan(
                text: "textSpan",
                style: TextStyle(
                    color: Colors.orange,
                    fontSize: 30,
                    decoration: TextDecoration.lineThrough),
                children: <TextSpan>[
                  new TextSpan(
                      text: "连接A", style: new TextStyle(color: Colors.teal)),
                  new TextSpan(
                      text: "连接B",
                      style: new TextStyle(color: Colors.tealAccent)),
                  new TextSpan(
                      text: "连接C有点击事件",
                      style: new TextStyle(color: Colors.deepOrangeAccent),
                      recognizer: new TapGestureRecognizer()
                        ..onTap = () {
                          print("Flutter点击事件提示");
                        }),
                ]),
          ),
          RichText(
            text: TextSpan(
              text: 'Hello ',
              style: DefaultTextStyle.of(context).style,
              children: <TextSpan>[
                TextSpan(
                    text: 'bold',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        decoration: TextDecoration.none)),
                TextSpan(
                    text: ' world!',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        decoration: TextDecoration.none)),
              ],
            ),
          ),
        ],
      ),
    ),
  );
}