Flutter视图扩展插件view_more的使用

Flutter视图扩展插件view_more的使用

插件简介

view_more 是一个支持可折叠和可展开内容的交互式文本容器。它允许用户在查看大量文本时进行滚动，同时提供一种方式来显示或隐藏额外的内容。

安装插件

首先，在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  view_more: ^0.0.1

然后运行 flutter pub get 来安装插件。

导入插件

在 Dart 文件中导入 view_more 插件：

import 'package:view_more/view_more.dart';

示例代码

下面是一个完整的示例代码，展示了如何使用 view_more 插件：

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

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ViewMore Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const DemoApp(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Colors.deepPurple,
          title: const Text(
            'View More Demo',
            style: TextStyle(color: Colors.white),
          )),
      body: DefaultTextStyle.merge(
        style: const TextStyle(
          fontSize: 116.0,
          //fontFamily: 'monospace',
        ),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(
                height: 10,
              ),
              Padding(
                key: const Key('viewMore'),
                padding: const EdgeInsets.all(16.0),
                child: ViewMore(
                  'Lorem Ipsum is simplyy dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s.',
                  trimLines: 2,
                  preDataText: "Lorem Ipsum".toUpperCase(),
                  preDataTextStyle:
                      const TextStyle(fontWeight: FontWeight.w500),
                  style: const TextStyle(color: Colors.black),
                  colorClickableText: Colors.pink,
                  trimMode: Trimer.line,
                  trimCollapsedText: '...view more',
                  trimExpandedText: ' view less',
                ),
              ),
              const SizedBox(
                height: 100,
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: ViewMore(
                  'Flutter(https://flutter.dev/) has its own UI components, along with an engine to render them on both the Android and iOS platforms. Most of those UI components, right out of the box, conform to the guidelines of Material Design.',
                  trimLines: 3,
                  style: const TextStyle(color: Colors.black),
                  colorClickableText: Colors.pink,
                  trimMode: Trimer.line,
                  trimCollapsedText: '...Expand',
                  trimExpandedText: ' Collapse ',
                  onLinkPressed: (url) {
                    print(url);
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

使用说明

1. 添加到 pubspec.yaml：

   dependencies:
     view_more: ^0.0.1
   

2. 导入插件：

   import 'package:view_more/view_more.dart';
   

3. 创建 ViewMore 视图：

   ViewMore(
     '你的文本内容',
     trimLines: 2,
     preDataText: "预览文本",
     preDataTextStyle: TextStyle(fontWeight: FontWeight.w500),
     style: TextStyle(color: Colors.black),
     colorClickableText: Colors.pink,
     trimMode: Trimer.line,
     trimCollapsedText: '...view more',
     trimExpandedText: ' view less',
   )