Flutter Texts

直接看代码案例快速入手Flutter

本文介绍Text，TextField，RichText，SelectableText，LinkText.

Text是常见的展示文本, TextField用于处理用户输入，RichText就是展示富文本，SelectableText可以让用户选择文本复制文本。

其中LinkText是使用url_launcher封装的。

🎉下载GitHub仓库，直接体验

Text

Text('Hello, Flutter!'),
Text(
    'Hello, Flutter!',
    style: TextStyle(
    fontSize: 24.0,
    backgroundColor: Colors.black,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    fontStyle: FontStyle.italic,
    letterSpacing: 2.0,
    wordSpacing: 4.0,
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed,
    ),
),
Text(
    'Hello, Flutter!',
    textAlign: TextAlign.center, // 对齐方式（居中）
),
Text(
    'This is a very long text. It may overflow the container if we do not handle it properly.',
    maxLines: 2, // 设置最大显示行数
    overflow: TextOverflow.ellipsis, // 设置溢出文本显示为省略号
)

LinkText

LinkText(linkText: 'Visit Google', url: 'https://www.google.com')

TextField

const TextField(),
const TextField(
    decoration: InputDecoration(
    hintText: 'Enter your text',
    ),
),
const TextField(
    decoration: InputDecoration(
    labelText: 'Username',
    ),
),
const TextField(
    decoration: InputDecoration(
    prefixIcon: Icon(Icons.person), // 前缀图标
    suffixIcon: Icon(Icons.clear), // 后缀图标
    ),
),
TextField(
    onChanged: (String value) {
    debugPrint(value);
    },
),
TextField(
    controller: _controller,
),
Text(_controller.text),
ElevatedButton(
    onPressed: () {
        _controller.text = "";
    },
    child: const Text("reset Text")),
const TextField(
    keyboardType: TextInputType.emailAddress, // 设置键盘类型为电子邮件地址
),
const TextField(
    style: TextStyle(
    fontSize: 18.0,
    color: Colors.blue,
    ),
),

RichText

RichText(
    text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: const <TextSpan>[
        TextSpan(
            text: 'bold',
            style: TextStyle(fontWeight: FontWeight.bold)),
        TextSpan(text: ' world!'),
    ],
    ),
),
const Text.rich(
    TextSpan(
    text: 'Hello ',
    children: [
        TextSpan(
            text: 'bold',
            style: TextStyle(fontWeight: FontWeight.bold)),
        TextSpan(text: ' world!'),
    ],
    ),
),
RichText(
    text: TextSpan(
    text: 'This is ',
    style: DefaultTextStyle.of(context).style,
    children: const <TextSpan>[
        TextSpan(
            text: 'bold',
            style: TextStyle(
                fontWeight: FontWeight.bold, color: Colors.red)),
        TextSpan(text: ' and '),
        TextSpan(
            text: 'italic',
            style: TextStyle(
                fontStyle: FontStyle.italic, color: Colors.blue)),
        TextSpan(text: ' text.'),
    ],
    ),
),
RichText(
    text: TextSpan(
    text: 'Flutter is ',
    style: DefaultTextStyle.of(context).style,
    children: const <TextSpan>[
        TextSpan(
        text: 'awesome ',
        style: TextStyle(fontWeight: FontWeight.bold),
        children: [
            TextSpan(
            text: 'and',
            style: TextStyle(fontWeight: FontWeight.normal),
            ),
            TextSpan(
            text: ' fun',
            style: TextStyle(fontStyle: FontStyle.italic),
            ),
        ],
        ),
        TextSpan(text: '!'),
    ],
    ),
),

SelectableText

const SelectableText(
    'This is selectable text. Tap and hold to select the text.',
),
const SelectableText(
    'This is selectable text with a custom style.',
    style: TextStyle(
        fontSize: 20, fontWeight: FontWeight.bold, color: Colors.red),
),
const SelectableText(
    'This is selectable text with text alignment.',
    textAlign: TextAlign.center,
),
const SelectableText(
    'This is selectable text with text direction.',
    textDirection: TextDirection.rtl,
),
Theme(
    data: ThemeData(
    textSelectionTheme: TextSelectionThemeData(
        cursorColor: Colors.red,
        selectionColor: Colors.blue.withOpacity(0.5),
        selectionHandleColor: Colors.green,
    ),
    ),
    child: const SelectableText(
    'This is selectable text with custom selection controls color.',
    ),
)