当前位置：首页 > news >正文

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

news 2025/9/4 16:20:37

当长文本展开和收缩控件，我们需要使用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});@overrideState<ReadMorePage> createState() => _ReadMorePageState();
}class _ReadMorePageState extends State<ReadMorePage> {@overrideWidget 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),),),);}
}