Flutter文本处理插件textless的使用

Less is More; Widgetless Text

开始使用

在你的项目 pubspec.yaml 文件中添加以下依赖：

dependencies:
  textless: ^6.6.6

然后在你的 Dart 代码中导入该库：

import 'package:textless/textless.dart';

使用说明

TEXTLESS 插件可以让你在不使用 Widget 的情况下处理文本。它会自动使用 MaterialApp 的默认文本主题。

文本样式

你可以通过链式调用不同的方法来改变文本的样式。例如：

• .h1, .h2, .h3, .h4, .h5, .h6 用于设置标题大小。
• .s1, .s2 用于设置副标题。
• .b1, .b2 用于设置正文文本。
• .btn 用于设置按钮文本。
• .cap 用于设置标题。
• .ol 用于设置过线文本。
• .text 用于自定义文本样式。
• .style 用于设置特定的文本样式。

文本修饰符

你可以在文本末尾添加各种修饰符来进一步定制文本外观：

• .lineThrough, .underline, .overline 设置文本的下划线、上划线或删除线。
• .color, .backgroundColor 设置文本颜色或背景颜色。
• .size, .height 设置文本大小或高度。
• .italic, .thin, .extraLight, .light, .regular, .medium, .semiBold, .bold, .extraBold, .black 设置字体风格。
• .solidLine, .dottedLine, .doubledLine, .wavyLine, .dashedLine 设置线条样式。
• .lineColor, .lineThickness 设置线条颜色和厚度。
• .alphabeticBaseline, .ideographicBaseline 设置基线类型。
• .fontFamily 设置字体族。
• .letterSpacing, .wordSpacing 设置字母间距和单词间距。
• .locale 设置文本区域。
• .foreground 设置前景色。
• .shadows 设置阴影。
• .fontFeatures 设置字体特征。
• .overflowVisible, .overflowClip, .overflowEllipsis, .overflowFade 设置溢出模式。
• .maxLine 设置最大行数。
• .scaleFactor 设置缩放因子。
• .alignLeft, .alignRight, .alignCenter, .alignJustify, .alignStart, .alignEnd 设置对齐方式。
• .softWrap 设置是否软换行。

完整示例

以下是一个完整的示例代码，展示了如何使用 textless 插件来创建一个简单的页面：

import 'package:flutter/material.dart';
import 'package:textless/textless.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextLess',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'TextLess'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
        title: "TextLess".toUpperCase().h5.letterSpacing(15).light,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            "Headline1".h1.overflowFade.softWrap(false),
            "Headline2".h2,
            "Headline3".h3,
            "Headline4".h4,
            "Headline5".h5,
            "Headline6".h6,
            "Subtitle1".s1,
            "Subtitle1".s2,
            "BodyText1".b1,
            "BodyText2".style(TextStyle(color: Colors.red)),
            "Button".btn,
            "Caption".cap,
            "Overline".ol,
            "Custom".text.color(Colors.blue),
          ],
        ),
      ),
    );
  }
}