flutter开发实战-readmore长文本展开和收缩控件

flutter开发实战-readmore长文本展开和收缩控件

当长文本展开和收缩控件,我们需要使用readmore来处理长文本展开和收缩,方便阅读

一、引入readmore

在工程的pubspec.yaml中引入插件

复制代码
  readmore: ^2.1.0

ReadMoreText的属性如下

复制代码
const ReadMoreText(
    this.data, {
    Key? key,
    this.preDataText,
    this.postDataText,
    this.preDataTextStyle,
    this.postDataTextStyle,
    this.trimExpandedText = 'show less',
    this.trimCollapsedText = 'read more',
    this.colorClickableText,
    this.trimLength = 240,
    this.trimLines = 2,
    this.trimMode = TrimMode.Length,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.textScaleFactor,
    this.semanticsLabel,
    this.moreStyle,
    this.lessStyle,
    this.delimiter = _kEllipsis + ' ',
    this.delimiterStyle,
    this.callback,
  }) : super(key: key);

二、使用ReadMoreText

在长文本使用展开和收缩显示控件的

复制代码
ReadMoreText(
          'Flutter is Google's mobile UI open source framework to build high-quality native (super fast) interfaces for iOS and Android apps with the unified codebase.',
          trimLines: 2,
          colorClickableText: Colors.pink,
          trimMode: TrimMode.Line,
          trimCollapsedText: 'Show more',
          trimExpandedText: 'Show less',
          moreStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
        ),

完整代码如下

复制代码
import 'package:flutter/material.dart';
import 'package:readmore/readmore.dart';

class ReadMorePage extends StatefulWidget {
  const ReadMorePage({super.key});

  @override
  State<ReadMorePage> createState() => _ReadMorePageState();
}

class _ReadMorePageState extends State<ReadMorePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HeroPage'),
      ),
      body: Center(
        child: ReadMoreText(
          'Flutter is Google's mobile UI open source framework to build high-quality native (super fast) interfaces for iOS and Android apps with the unified codebase.',
          trimLines: 2,
          colorClickableText: Colors.pink,
          trimMode: TrimMode.Line,
          trimCollapsedText: 'Show more',
          trimExpandedText: 'Show less',
          moreStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

三、小结

flutter开发实战-readmore长文本展开和收缩控件

学习记录,每天不停进步。

相关推荐
_大学牲12 小时前
Flutter 之魂 GetX🔥(二)全面解析路由管理
前端·flutter
恋猫de小郭13 小时前
Flutter 在 iOS 26 模拟器跑不起来?其实很简单
android·前端·flutter
大雷神1 天前
Flutter鸿蒙开发
flutter·华为·harmonyos
shelutai1 天前
实现提供了完整的 Flutter Web 文件上传解决方案
前端·flutter
小仙女喂得猪1 天前
2025 Android原生开发者角度的Flutter 笔记整理(对比ReactNative)
android·flutter·react native
猪哥帅过吴彦祖1 天前
Flutter 系列教程:列表与网格 - `ListView` 和 `GridView`
前端·flutter·ios
程序员老刘2 天前
为什么我从不推荐GetX?11k星标背后的真相
flutter·客户端
dragon7252 天前
flutter riverpod原理浅析
flutter
恋猫de小郭2 天前
深入理解 Flutter 的 PlatformView 如何在鸿蒙平台实现混合开发
android·前端·flutter
浅蓝色3 天前
flutter平台判断后续
flutter·harmonyos