Flutter:如何在一定长度内隐藏或显示更多文本 [英] Flutter: How to hide or show more text within certain length

问题描述

包含电影描述的我的容器.

最初，我只想显示几行描述.在其下方应该有一个链接(更多...)，在点击更多...后，应该显示所有描述内容.

例如，检查这个

import 'package:flutter/material.dart';导入 'package:meta/meta.dart';void main() =>运行应用程序(新的我的应用程序())；class MyApp 扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){返回新的 MaterialApp(title: 'Flutter 演示',主页:新的主屏幕()，);}}class HomeScreen 扩展了 StatelessWidget {最终字符串描述 =Flutter 是谷歌的移动 UI 框架，用于在创纪录的时间内在 iOS 和 Android 上制作高质量的原生界面.Flutter 使用现有代码，被世界各地的开发人员和组织使用，并且是免费和开源的.";@覆盖小部件构建(BuildContext 上下文){返回新的脚手架(应用栏:新的应用栏(标题:const Text("Demo App"),),正文:新容器(孩子:新的DescriptionTextWidget(文本:描述)，),);}}class DescriptionTextWidget 扩展 StatefulWidget {最终字符串文本；DescriptionTextWidget({@required this.text});@覆盖_DescriptionTextWidgetState createState() =>新 _DescriptionTextWidgetState();}class _DescriptionTextWidgetState 扩展 State{字符串上半部分；字符串 secondHalf;布尔标志 = 真；@覆盖无效的初始化状态(){super.initState();如果 (widget.text.length > 50) {firstHalf = widget.text.substring(0, 50);secondHalf = widget.text.substring(50, widget.text.length);} 别的 {firstHalf = widget.text;后半="；}}@覆盖小部件构建(BuildContext 上下文){返回新容器(填充:新的 EdgeInsets.symmetric(水平:10.0，垂直:10.0)，孩子:secondHalf.isEmpty?新文本(上半部分): 新列(孩子们:<小部件>[new Text(flag ? (firstHalf + "...") : (firstHalf + secondHalf)),新墨井(孩子:新行(mainAxisAlignment: MainAxisAlignment.end,孩子们:<小部件>[新文本(旗帜 ?"显示更多" : "显示更少",样式:新文本样式(颜色:Colors.blue)，),],),onTap: () {设置状态((){标志 = !flag;});},),],),);}}

My Container having a description of movies.

Initially, I want to show only a few lines of description. And below that there should be a link (more...), After Tapping more... all content of description should be get displayed.

For example, check this JQuery plugin.

解决方案

you can do that this way

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final String description =
      "Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: const Text("Demo App"),
      ),
      body: new Container(
        child: new DescriptionTextWidget(text: description),
      ),
    );
  }
}

class DescriptionTextWidget extends StatefulWidget {
  final String text;

  DescriptionTextWidget({@required this.text});

  @override
  _DescriptionTextWidgetState createState() => new _DescriptionTextWidgetState();
}

class _DescriptionTextWidgetState extends State<DescriptionTextWidget> {
  String firstHalf;
  String secondHalf;

  bool flag = true;

  @override
  void initState() {
    super.initState();

    if (widget.text.length > 50) {
      firstHalf = widget.text.substring(0, 50);
      secondHalf = widget.text.substring(50, widget.text.length);
    } else {
      firstHalf = widget.text;
      secondHalf = "";
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
      child: secondHalf.isEmpty
          ? new Text(firstHalf)
          : new Column(
              children: <Widget>[
                new Text(flag ? (firstHalf + "...") : (firstHalf + secondHalf)),
                new InkWell(
                  child: new Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      new Text(
                        flag ? "show more" : "show less",
                        style: new TextStyle(color: Colors.blue),
                      ),
                    ],
                  ),
                  onTap: () {
                    setState(() {
                      flag = !flag;
                    });
                  },
                ),
              ],
            ),
    );
  }
}

这篇关于Flutter:如何在一定长度内隐藏或显示更多文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！