在颤振中如果文本内容增加，我想在帖子底部显示更多文本？
Posted
技术标签:
【中文标题】在颤振中如果文本内容增加，我想在帖子底部显示更多文本？【英文标题】：In flutter If the text content increases, i want to make show more text in the bottom of the post? 【发布时间】：2020-06-29 06:55:29 【问题描述】：我从 API 获取数据，每个帖子的文本长度都不同，所以我想制作一个负责任的 Text 小部件，它希望表现得像这张图片
我尝试了这个解决方案，但是如果我点击 show more text 每个 Text 小部件的大小都会增加（请参阅这个 ），因为我将 descTextShowFlag 这个 bool 变量声明为全局变量，并且有任何动态增加文本小部件高度的方法，因为这里我想给maxline属性作为默认值，这个maxline属性也想动态增加，如果有什么好的方法请告诉我
import 'package:auto_size_text/auto_size_text.dart';
import 'package:exa/Model/ModelNewsFeed.dart';
import 'package:flutter/material.dart';
class Examplewidget extends StatefulWidget
NewsFeeds newsFeeds;
Examplewidget(this.newsFeeds);
@override
_ExamplewidgetState createState() => _ExamplewidgetState();
class _ExamplewidgetState extends State<Examplewidget>
String data = "We’ll see how image picker works in flutter for android and ios. Ans: Image picker is a plugin which is used to get images from gallery or camera in the app. ... This is called Privacy - Photo Library Usage Description in the visual editor(Xcode or Android Studio).";
bool descTextShowFlag = false;
@override
Widget build(BuildContext context)
int listsize = widget.newsFeeds.data.data.length;
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(14.0),
child: ListView.builder(
itemCount: listsize,
itemBuilder: (context, index)
String textStatus =
"$widget.newsFeeds.data.data[index].postContent";
return new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text( "$textStatus",
style: TextStyle(fontSize: 16.0),
maxLines: descTextShowFlag ? 8 : 2,
textAlign: TextAlign.start),
InkWell(
onTap: ()
setState(()
descTextShowFlag = !descTextShowFlag;
);
,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
descTextShowFlag
? Text(
"Show Less",
style: TextStyle(
fontSize: 16.0,
color: Colors.blue),
)
: Text("Show More",
style: TextStyle(color: Colors.blue))
],
),
),
],
);
),
),
);
【问题讨论】：
【参考方案1】：您可以使用RichText，这将帮助您内联构建小部件
这是一个工作示例
class _MyHomePageState extends State<MyHomePage>
var myText =
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum ";
var showAll = true;
final length = 150;
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Text.rich(TextSpan(
children: <InlineSpan>[
TextSpan(
text: myText.length > length && !showAll
? myText.substring(0,length) + "..."
: myText),
myText.length > length
? WidgetSpan(
child: GestureDetector(
onTap: ()
setState(()
showAll = !showAll;
);
,
child: Text(
showAll ? 'read less' : 'read more!',
style: TextStyle(color: Colors.blue),
),
),
)
: TextSpan(),
],
)),
);
【讨论】：
不工作是什么意思？你有错误吗？【参考方案2】：终于找到了这个解决方案，效果很好
import 'package:exa/Model/ModelNewsFeed.dart';
import 'package:flutter/material.dart';
class NewsfeedPost extends StatefulWidget
NewsFeeds newsFeeds; // This is my model class for the API Response
NewsfeedPost(this.newsFeeds);
@override
_NewsfeedPostState createState() => _NewsfeedPostState();
class _NewsfeedPostState extends State<NewsfeedPost>
String imageLink = "https://picsum.photos/250?image=9";
bool descTextShowFlag = false; // defaultly every post has small texts ()
@override
Widget build(BuildContext context)
int listsize = widget.newsFeeds.data.data.length;
return Scaffold(
body: Padding(
padding: EdgeInsets.only(right: 4,left: 4,top: 4,bottom: 4),
child: ListView.builder(
itemCount: listsize,
itemBuilder: (context, index)
String textStatus = "$widget.newsFeeds.data.data[index].postContent";
String fname='$widget.newsFeeds.data.data[index].postOwner.firstName';
String lname='$widget.newsFeeds.data.data[index].postOwner.lastName';
String postdate='$widget.newsFeeds.data.data[index].updatedAt';
int textlength = textStatus.length;
return Card(
child: SingleChildScrollView(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height:60.0 ,
color: Colors.white10,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 5.0,right: 5.0),
child: Container(
height: 50.0,
width: 50.0, //MediaQuery.of(context).size.width,
child: new CircleAvatar(
radius: 50.0,
backgroundColor: Colors.transparent,
backgroundImage: NetworkImage(imageLink),
),
),
),
Padding(
padding:EdgeInsets.only(top: 5.0,bottom: 5.0),
child: Column(
children: <Widget>[
Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('$fname'+' $lname',style: TextStyle(fontSize: 20.0),textAlign: TextAlign.start,),
],
),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('$postdate'),
],
),
],
),
],
),
),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(Icons.more_horiz),
)
],
),
),
Divider(),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("$textStatus",
style: TextStyle(fontSize: 16.0),
maxLines: descTextShowFlag
? MediaQuery.of(context).size.height.toInt()
: 5,
textAlign: TextAlign.start),
),
InkWell(
onTap: ()
setState(()
descTextShowFlag = !descTextShowFlag;
);
,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
// descTextShowFlag
textlength <= 200
? Text(
"",
style: TextStyle(
fontSize: 16.0, color: Colors.blue),
)
: descTextShowFlag
? Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Show Less",
style: TextStyle(color: Colors.blue)),
)
: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Show More",
style: TextStyle(color: Colors.blue)),
)
],
),
),
],
),
),
);
),
),
);
【讨论】：
这不是一个好的解决方案，因为它不会显示文本和更多内容。按钮在同一行，并且会在文本和按钮之间留出空白以上是关于在颤振中如果文本内容增加，我想在帖子底部显示更多文本？的主要内容，如果未能解决你的问题，请参考以下文章