Flutter中的可扩展小部件

可扩展小部件没有固定大小，它们根据屏幕上的可用区域在屏幕上展开。由于大小限制，某些小部件可能会引发渲染错误，因此小部件可扩展。可扩展小部件的一个用途是包含图像、文本的卡片，为了进一步阅读文本，我们可以在重定向到下一页之前单击“阅读更多”或“少读”，我们想知道里面有什么。在本文中，我们将了解如何创建这些类型的可扩展小部件。

添加依赖

在Flutter中，为了使这个活动更容易，我们创建了“readmore”包，我们需要将其添加到pubspec.yaml文件中。然后，我们需要通过在工作 IDE 的终端中运行 pub get 来配置它。

Dart

dependencies:
  readmore: ^2.1.0

导入依赖

我们需要在main 中导入 readmore 依赖。dart文件，

Dart

import 'package:readmore/readmore.dart';

执行

ReadMoreText() 小部件的属性是

Dart

ReadMoreText ReadMoreText(
  String data, {
  Key? key,
  String trimExpandedText = 'show less',
  String trimCollapsedText = 'read more',
  Color? colorClickableText,
  int trimLength = 240,
  int trimLines = 2,
  TrimMode trimMode = TrimMode.Length,
  TextStyle? style,
  TextAlign? textAlign,
  TextDirection? textDirection,
  Locale? locale,
  double? textScaleFactor,
  String? semanticsLabel,
  TextStyle? moreStyle,
  TextStyle? lessStyle,
  String delimiter = _kEllipsis + ' ',
  TextStyle? delimiterStyle,
  dynamic Function(bool)? callback,
})

要创建包含文本扩展的可扩展小部件，我们使用 ReadMoreText() 小部件。在下面的示例中，我们传递了文本，设置 trimLines = 2，这意味着我们正在修剪最后两行文本。我们正在为文本添加样式并将 trimCollapsedText 设置为“显示更多”，这将在小部件折叠时显示，并将 trimExpandedText 设置为“显示更少”，这将在小部件展开时可见。

Dart

ReadMoreText(
             'GeeksForGeeks is the best tutorial website for programmers.
              If you are beginner or intermediate or expert programmer
              GeeksForGeeks is the best website for learning to code and
              learn different frameworks.',
              trimLines: 2,
              textScaleFactor: 1,
              colorClickableText: Colors.red,
              trimMode: TrimMode.Line,
              trimCollapsedText: 'Show more',
              trimExpandedText: 'Show less',
              style: TextStyle(color: Colors.black, fontSize: 18),
              moreStyle: TextStyle(
                            fontSize: 15,
                            fontWeight: FontWeight.bold,
                            color: Colors.red),
                      ),

输出：

完整示例

Dart

import 'package:flutter/material.dart';
import 'package:readmore/readmore.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Expandable Widgets',
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text("GeeksForGeeks"),
            centerTitle: true,
          ),
          body: Center(
              child: ListView.builder(
                  itemCount: 5,
                  itemBuilder: (BuildContext context, int index) {
                    return Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: ReadMoreText(
                        'GeeksForGeeks is the best tutorial website for programmers.
                         If you are beginner or intermediate or expert programmer
                         GeeksForGeeks is the best website for learning to code 
                         and learn different frameworks.',
                        trimLines: 2,
                        textScaleFactor: 1,
                        colorClickableText: Colors.red,
                        trimMode: TrimMode.Line,
                        trimCollapsedText: 'Show more',
                        trimExpandedText: 'Show less',
                        style: TextStyle(color: Colors.black, fontSize: 18),
                        moreStyle: TextStyle(
                            fontSize: 15,
                            fontWeight: FontWeight.bold,
                            color: Colors.red),
                      ),
                    );
                  })),
        ));
  }
}

输出：