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

问题描述

我的容器中有关于电影的描述。

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

例如，检查此

  import'package：flutter / material.dart'; 
导入的 package：meta / meta.dart； 
 
 void main（）=> runApp（new MyApp（））; 
 
类MyApp扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return new MaterialApp（
 title：'Flutter Demo'，
 home：new HomeScreen（），
）; 
} 
} 
 
类HomeScreen扩展了StatelessWidget {
 final字符串描述= 
 Flutter是Google的移动UI框架，用于在iOS和Android达到了创纪录的时间。Flutter可与现有代码配合使用，为世界各地的开发人员和组织所使用，并且是免费和开放源代码。 
 
 @override 
小部件构建（BuildContext上下文）{
返回新的Scaffold（
 appBar：new AppBar（
 title：const Text（ Demo App ），
），
正文：new Container（
 child：new DescriptionTextWidget（text：description），
），
）; 
} 
} 
 
类DescriptionTextWidget扩展了StatefulWidget {
 final String text; 
 
 DescriptionTextWidget（{@ required this.text}）; 
 
 @override 
 _DescriptionTextWidgetState createState（）=>新的_DescriptionTextWidgetState（）; 
} 
 
类_DescriptionTextWidgetState扩展了State< DescriptionTextWidget> {
字符串firstHalf; 
字符串secondHalf; 
 
 bool标志= 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（水平：10.0，垂直：10.0），
子对象：secondHalf.isEmpty 
？new Text（firstHalf）
：new Column（
子对象：< Widget> [
 new Text（flag？（firstHalf + ...）：（firstHalf + secondHalf）），
新InkWell（
子代：new Row（
 mainAxisAlignment：MainAxisAlignment.end，
子级：< Widget> [
 new Text（
 flag？ show more： show less，
样式：new TextStyle（color：Colors.blue），
），
]，
），
 onTap：（）{
 setState（（）{
 flag =！flag; 
 }）; 
}，
），
]，
），
）； 
} 
} 
  

My Container having a description about movies.

Initially i want to show only few lines of description. And below to 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屋！