本文详细介绍了如何使用Flutter的TextStyle属性来实现文字的下划线、删除线、背景色、渐变文字、阴影、描边和空心字效果。通过调整TextDecoration、TextDecorationStyle、shadows等属性,可以创建出具有波浪线、删除线、立体效果、描边和空心文字的艺术文字。同时,文章展示了添加背景色和渐变色文字的方法,帮助开发者丰富UI设计。 摘要由CSDN通过智能技术生成
  • decoration :TextDecoration可在文字上 中 下方添加直线
  • decorationStyle :extDecorationStyle 可指定线条样式,如直线、虚线、波浪线、双实线、点线
  • decorationThickness :设置线条的宽度
  • decorationColor :设置线条的颜色
  • 下方波浪线

       Text(
        '下划波浪线',
        style: TextStyle(
          fontSize: 24,
          decoration: TextDecoration.underline,
          decorationStyle: TextDecorationStyle.wavy,
          decorationThickness: 1,
    

    中间红色删除线

       Text(
        '中间删除线',
        style: TextStyle(
          fontSize: 24,
          decoration: TextDecoration.lineThrough,
          decorationStyle: TextDecorationStyle.solid,
          decorationColor: Colors.red
    

    2 文字背景色 & 渐变色文字

    TextStyle 的backgroundColor可为文字添加背景色

       Text(
         '文字添加背景色',
         style: TextStyle(
           fontSize: 24,
           color: Colors.white,
           fontWeight: FontWeight.bold,
           backgroundColor: Colors.red,
    				
    Text控件即容器,是一个常用的控件,下面的实例有7个不同样式的文本控件:import 'package:flutter/material.dart'; class ContainerDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold(
    老孟导读:大家好,这是【Flutter实战】系列文章的第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(Text和RichText)和文本输入组件(TextField),基础用法和五个案例助你快速掌握。 第一篇链接:【Flutter实战】移动技术发展史 Text是显示文本的组件,最常用的组件,没有之一。基本用法如下: Text('老孟') 注意:Text组件一定要包裹在Scaffold组件下,否则效果如下: 文本的样式在style中设置,类型为TextStyle,Te..
    shaderCallback: (bounds) => LinearGradient( colors: [Colors.red, Colors.blue], ).createShader(bounds), child: Text( 'Hello World', style: TextStyle( fontSize: 24, fontWeight: FontWeight.bold, 在这个示例中,我们使用 `LinearGradient` 创建一个红色和蓝色之间的渐变。 `shaderCallback` 函数使用该渐变来创建一个 `Shader` ,并将其传递给 `ShaderMask` 。最后,我们将 `Text` widget 作为 `ShaderMask` 的子元素,从而实现文字渐变色的效果。 你可以根据需要调整渐变的颜色和方向,以及 `Text` widget 的样式。