Flutter文本省略插件flutter_ellipsis

Flutter文本省略插件flutter_ellipsis_text的使用

flutter_ellipsis_text 是一个允许你在文本超出最大行数时自定义省略文本的部件。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_ellipsis_text: ^<最新版本>

然后运行 flutter pub get 命令以获取该依赖。

使用

flutter_ellipsis_text 的基本用法非常简单。以下是一个简单的示例：

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

void main() {
  runApp(const ExampleApp());
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ExamplePage(),
    );
  }
}

class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: const [
              EllipsisText(
                text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. "
                    "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, "
                    "when an unknown printer took a galley of type and scrambled it to make a type specimen book. "
                    "It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
                ellipsis: "..show more", // 省略符号
                maxLines: 2, // 最大行数
              )
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter文本省略插件flutter_ellipsis_text的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼•4 天前

更多关于Flutter文本省略插件flutter_ellipsis_text的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何使用 flutter_ellipsis_text 插件的示例代码。这个插件允许你在 Flutter 应用中对过长的文本进行省略处理，并提供了一些自定义选项来控制省略行为。

首先，确保你的 pubspec.yaml 文件中已经添加了 flutter_ellipsis_text 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_ellipsis_text: ^x.y.z  # 请替换为最新版本号

然后，运行 flutter pub get 命令来获取依赖。

以下是一个完整的 Flutter 应用示例，展示了如何使用 flutter_ellipsis_text 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Ellipsis Text Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String longText =
      '这是一个非常长的文本，用于展示flutter_ellipsis_text插件的功能。当文本长度超过容器宽度时，它会自动省略显示。';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Ellipsis Text Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              '默认省略效果:',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            EllipsisText(
              longText,
              style: TextStyle(fontSize: 16),
            ),
            SizedBox(height: 24),
            Text(
              '自定义省略效果（末尾添加省略号并自定义行数）:',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            EllipsisText.multiLine(
              longText,
              maxLines: 2,
              ellipsis: '...',
              style: TextStyle(fontSize: 16),
            ),
            SizedBox(height: 24),
            Text(
              '自定义省略效果（带触摸展开功能）:',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            GestureDetector(
              onTap: () {
                // 这里可以添加展开文本的逻辑，比如显示对话框或跳转页面
                print('文本被点击，可以展开显示完整内容');
              },
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey),
                  borderRadius: BorderRadius.circular(8),
                ),
                padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                child: EllipsisText(
                  longText,
                  style: TextStyle(fontSize: 16),
                  tooltip: '点击展开完整内容', // 当文本被省略时，长按会显示这个提示
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们展示了三种使用 flutter_ellipsis_text 插件的方式：

默认省略效果：使用 EllipsisText 小部件来显示省略后的文本。
自定义省略效果：使用 EllipsisText.multiLine 小部件来显示多行文本，并自定义省略号和最大行数。
带触摸展开功能的自定义省略效果：将 EllipsisText 包装在 GestureDetector 中，以便在用户点击时可以执行展开文本的逻辑（本例中只是打印了日志）。

你可以根据需要进一步自定义这些示例，以满足你的应用需求。