Flutter文本扩展展示插件expandable_text

Flutter文本扩展展示插件expandable_text_widget的使用

要使用此插件，在您的pubspec.yaml文件中添加expandable_text_widget作为依赖项。

示例

截图

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expandable Text Widget Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ExpandableDemo(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class ExpandableDemo extends StatefulWidget {
  @override
  _ExpandableDemoState createState() => _ExpandableDemoState();
}

class _ExpandableDemoState extends State<ExpandableDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Expandable Text Widget Demo"),
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // 第一个可展开文本组件
              ExpandableTextWidget(
                backgroundColor: Colors.white,
                elevation: 2.0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8.0)),
                ),
                title: Text(
                  "Sarlavha",
                  style: TextStyle(color: Colors.grey[800], fontSize: 24),
                ),
                imageChild: Image.asset(
                  "assets/logo.png",
                  fit: BoxFit.scaleDown,
                ),
                textStyle: TextStyle(color: Colors.black, fontSize: 16),
                text: 
                    "The color can \n be set with the splashColor property. \nThe splash size is \ndependent on the size of the child widget passed in - which is constrained by the minRadius and maxRadius parameters.",
                downIcon: SvgPicture.asset(
                  "assets/down.svg",
                  color: Colors.black,
                  fit: BoxFit.scaleDown,
                ),
                upIcon: SvgPicture.asset(
                  "assets/up.svg",
                  color: Colors.black,
                  fit: BoxFit.scaleDown,
                ),
              ),
              SizedBox(height: 20,),
              // 第二个可展开文本组件
              ExpandableTextWidget(
                backgroundColor: Colors.white,
                elevation: 2.0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8.0)),
                ),
                title: Text(
                  "Sarlavha",
                  style: TextStyle(color: Colors.grey[800], fontSize: 24),
                ),
                textStyle: TextStyle(color: Colors.black, fontSize: 16),
                text: 
                "The color can \n be set with the splashColor property. \nThe splash size is \ndependent on the size of the child widget passed in - which is constrained by the minRadius and maxRadius parameters.",
                downIcon: Text("show"),
                upIcon: Text("hide"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

说明

在上述代码中，我们展示了如何使用ExpandableTextWidget来创建可展开和收起的文本组件。以下是一些关键点：

导入库：

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

定义应用入口：
```
void main() {
  runApp(MyApp());
}
```

定义主应用类：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expandable Text Widget Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ExpandableDemo(),
      debugShowCheckedModeBanner: false,
    );
  }
}

定义可展开文本组件页面：

class ExpandableDemo extends StatefulWidget {
  @override
  _ExpandableDemoState createState() => _ExpandableDemoState();
}

实现展开和收起功能：

class _ExpandableDemoState extends State<ExpandableDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Expandable Text Widget Demo"),
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // 第一个可展开文本组件
              ExpandableTextWidget(
                backgroundColor: Colors.white,
                elevation: 2.0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8.0)),
                ),
                title: Text(
                  "Sarlavha",
                  style: TextStyle(color: Colors.grey[800], fontSize: 24),
                ),
                imageChild: Image.asset(
                  "assets/logo.png",
                  fit: BoxFit.scaleDown,
                ),
                textStyle: TextStyle(color: Colors.black, fontSize: 16),
                text: 
                    "The color can \n be set with the splashColor property. \nThe splash size is \ndependent on the size of the child widget passed in - which is constrained by the minRadius and maxRadius parameters.",
                downIcon: SvgPicture.asset(
                  "assets/down.svg",
                  color: Colors.black,
                  fit: BoxFit.scaleDown,
                ),
                upIcon: SvgPicture.asset(
                  "assets/up.svg",
                  color: Colors.black,
                  fit: BoxFit.scaleDown,
                ),
              ),
              SizedBox(height: 20,),
              // 第二个可展开文本组件
              ExpandableTextWidget(
                backgroundColor: Colors.white,
                elevation: 2.0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8.0)),
                ),
                title: Text(
                  "Sarlavha",
                  style: TextStyle(color: Colors.grey[800], fontSize: 24),
                ),
                textStyle: TextStyle(color: Colors.black, fontSize: 16),
                text: 
                "The color can \n be set with the splashColor property. \nThe splash size is \ndependent on the size of the child widget passed in - which is constrained by the minRadius and maxRadius parameters.",
                downIcon: Text("show"),
                upIcon: Text("hide"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter文本扩展展示插件expandable_text_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼•8 小时前

更多关于Flutter文本扩展展示插件expandable_text_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用expandable_text_widget插件的示例代码。这个插件允许你展示一个可展开的文本视图，当文本内容较长时，用户可以点击按钮来展开或收起文本。

首先，确保你已经在pubspec.yaml文件中添加了expandable_text_widget的依赖：

dependencies:
  flutter:
    sdk: flutter
  expandable_text_widget: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以像这样使用ExpandableTextWidget：

import 'package:flutter/material.dart';
import 'package:expandable_text_widget/expandable_text.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expandable Text Widget Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Expandable Text Widget Demo'),
        ),
        body: Center(
          child: ExpandableTextScreen(),
        ),
      ),
    );
  }
}

class ExpandableTextScreen extends StatelessWidget {
  final String longText =
      '这是一个非常长的文本示例。这个文本太长，无法在单行中完全显示，所以我们需要使用expandable_text_widget插件来允许用户展开和收起这个文本。当用户点击展开按钮时，文本将完全显示；当用户点击收起按钮时，文本将缩短显示。';

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text('这是一个标题'),
          SizedBox(height: 16.0),
          ExpandableText(
            text: longText,
            maxLines: 3,  // 初始显示的最大行数
            collapsed: Text('点击展开查看更多...'),
            expanded: Text('点击收起'),
            onToggle: (expanded) {
              print('Text is now ${expanded ? "expanded" : "collapsed"}');
            },
          ),
        ],
      ),
    );
  }
}

在这个示例中：

longText变量包含了一个很长的文本字符串。
ExpandableText组件被用来显示这个长文本。
maxLines参数设置了初始显示的最大行数（在这个例子中是3行）。
collapsed参数是一个在文本被收起时显示的Text组件。
expanded参数是一个在文本被展开时显示的Text组件。
onToggle参数是一个回调函数，当文本被展开或收起时会被调用。

运行这个应用后，你应该能看到一个包含长文本的页面，文本初始被截断显示，并有一个“点击展开查看更多…”的按钮。点击按钮后，文本将展开显示，并且按钮文本变为“点击收起”。