搜尋套件、儲存庫與 APP 分類

rich_readmore 封面
套件詳情v1.1.1

rich_readmore

一個顯示文字的元件,根據提供的設定可選擇顯示更多或更少。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
1070
喜歡數
45
Pub 分數
160

安裝套件

flutter pub add rich_readmore

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

RichReadMore 是一個 Flutter 小部件,專門用於以智慧的「顯示更多」或「顯示更少」切換方式顯示文字。它支援豐富的文字格式,並根據內容長度和使用者偏好動態調整。非常適合以乾淨、互動的方式顯示長段文字片段,提升可讀性而不會讓介面過於擁擠。此小部件可自訂,並可在所有主要平台(包括行動裝置、網頁和桌面)上運作。

適用情境

  • 在應用中顯示長篇內容
  • 透過可摺疊文字增強使用者體驗
  • 顯示帶有可展開詳細資訊的描述
  • 將富文本與互動式控制項整合
  • 減少列表項目中的螢幕雜亂

主要特色

  • 支援豐富文字格式
  • 動態顯示更多/更少切換
  • 可自訂的省略號和按鈕標籤
  • 跨平台相容性
  • 透過 pub 實現輕鬆整合
  • 可設定的行數限制

適合對象

  • 內容密集型應用
  • 具有可變文字長度的使用者介面
  • 需要響應式文字顯示的應用程式
  • 尋求輕量級文字擴展的開發者
  • 跨平台保持一致使用者體驗的專案

使用建議

  • 可能需要仔細調整樣式以適應複雜版面
  • 使用超大文字時的效能影響
  • 僅限純文字內容(無圖片)
  • 依賴於父控制項的約束
  • 不適用於非文字內容

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

rich_readmore workflow codecov MIT License

rich_readmore

A widget that displays text with an option to show more or show less based on the provided settings.
The RichReadMoreText widget allows you to trim text either based on the character length or the number of lines.
When the text is longer than the specified trim length or exceeds the maximum number of lines, it provides a toggle option to show more or show less of the text.
It has two options for settings, the LineModeSettings or LengthModeSettings for trimming using the behavior that you want.
If you want to pass a string directly instead of a TextSpan, you can just be using the the RichReadMoreText.fromString(...). There are some examples for that below.

Demonstration

How to use

import:

import 'package:rich_readmore/rich_readmore.dart';

For TextSpan data:

 RichReadMoreText(
   textSpan,
   settings: LineModeSettings(
     trimLines: 3,
     trimCollapsedText: 'Expand',
     trimExpandedText: ' Collapse ',
     onPressReadMore: () {
       /// specific method to be called on press to show more
     },
     onPressReadLess: () {
       /// specific method to be called on press to show less
     },
   ),
 ),

Or for String data:

 RichReadMoreText.fromString(
   text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
   textStyle: TextStyle(color: Colors.purpleAccent),
   settings: LengthModeSettings(
     trimLength: 20,
     trimCollapsedText: 'Expand',
     trimExpandedText: ' Collapse ',
     onPressReadMore: () {
       /// specific method to be called on press to show more
     },
     onPressReadLess: () {
       /// specific method to be called on press to show less
     },
     lessStyle: TextStyle(color: Colors.blue),
     moreStyle: TextStyle(color: Colors.blue),
   ),
 ),

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。