如何在Flutter中给文本加下划线

本文介绍了如何在Flutter中给文本加下划线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如何在Text小部件内的浮动文本下划线?

How to underline text in flutter inside Text widget?

我似乎找不到TextStyle

推荐答案

在强调所有内容时，都可以在文本"小部件上设置TextStyle.

When underlining everything you can set a TextStyle on the Text widget.

Text( 'Hello world', style: TextStyle( decoration: TextDecoration.underline, ), )

如果只想在文本的下划线，则需要使用Text.rich()(或RichText小部件)，并将字符串拆分为可以添加样式的TextSpans.

If you only want to underline part of the text then you need to use Text.rich() (or a RichText widget) and break the string into TextSpans that you can add a style to.

Text.rich( TextSpan( text: 'Hello ', style: TextStyle(fontSize: 50), children: <TextSpan>[ TextSpan( text: 'world', style: TextStyle( decoration: TextDecoration.underline, )), // can add more TextSpans here... ], ), )

TextSpan有点奇怪. text参数是默认样式，但是children列表包含紧随其后的样式(可能是未样式)文本.如果要以样式文本开头，可以为text使用空字符串.

TextSpan is a little strange. The text parameter is the default style but the children list contains the styled (and possibly unstyled) text that follow it. You can use an empty string for text if you want to start with styled text.

您还可以添加TextDecorationStyle来更改装饰的外观.这是破折号:

You can also add a TextDecorationStyle to change how the decoration looks. Here is dashed:

Text( 'Hello world', style: TextStyle( decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.dashed, ), )

和TextDecorationStyle.dotted:

和TextDecorationStyle.double:

和TextDecorationStyle.wavy: