如何在 Flutter 中处理这个 Text 小部件？
Posted
技术标签:
【中文标题】如何在 Flutter 中处理这个 Text 小部件？【英文标题】：How do I handle this Text widget in Flutter? 【发布时间】：2020-08-04 16:37:06 【问题描述】：我有一个返回 AlertDialog 的函数。这是它的截图：https://i.stack.imgur.com/ZPVFI.jpg。这是它的代码：
void _showDialog(BuildContext context, List details)
showDialog(
context: context,
builder: (BuildContext context)
return AlertDialog(
titlePadding: const EdgeInsets.all(5),
contentPadding: const EdgeInsets.only(left: 10, right: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
),
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
details[3].toString(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 40)
),
]
),
content: Container(
color: Colors.green,
width: double.infinity,
height: 150,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
'Data: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[0],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
Row(
children: <Widget>[
Text(
'Tipologia: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[2].toLowerCase(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
details[5] != ''
? Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'Descrizione: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
],
),
Container(
//width: 100,
child: Text(
details[5],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20),
overflow: TextOverflow.ellipsis,
maxLines: 5,
textAlign: TextAlign.justify,
),
)
],
)
: Offstage(
child: Text('invisible')
),
Row(
children: <Widget>[
details[4] == 'SI'
? Text(
'Il voto fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
: Text(
'Il voto non fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
],
),
],
),
),
actions: <Widget>[
FlatButton(
child: Text(
"Chiudi",
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 15)
),
onPressed: ()
Navigator.of(context).pop();
,
),
],
);
,
);
包含“Data”和“Tipologia”的行没有问题。但是在“Descrizione”之后有一个包含可变长度字符串的文本小部件。我希望将所述文本显示在多行上，从“Descrizione：”之后开始（就像“pratico”在“Tipologia：”之后开始）。我该怎么做？ 编辑：这是现在的样子https://i.stack.imgur.com/fKajB.jpg
【问题讨论】：
【参考方案1】：我建议您使用 RichText() 而不是 Row() 和 Texts
就像下面的一样
RichText(
textAlign: TextAlign.left,
text: TextSpan(
children: [
TextSpan(children: [
TextSpan(
text: 'Descrizione: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),),
TextSpan(
text: details[5],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20),
),
]),
],
),
所以你的代码应该看起来像
void _showDialog(BuildContext context, List details)
showDialog(
context: context,
builder: (BuildContext context)
return AlertDialog(
titlePadding: const EdgeInsets.all(5),
contentPadding: const EdgeInsets.only(left: 10, right: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
),
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
details[3].toString(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 40)
),
]
),
content: Container(
color: Colors.green,
width: double.infinity,
height: 150,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
'Data: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[0],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
Row(
children: <Widget>[
Text(
'Tipologia: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[2].toLowerCase(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
details[5] != ''
? Column(
children: <Widget>[
RichText(
textAlign: TextAlign.left,
text: TextSpan(
children: [
TextSpan(children: [
TextSpan(
text: 'Descrizione: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),),
TextSpan(
text: details[5],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20),
),
]),
],
)
: Offstage(
child: Text('invisible')
),
Row(
children: <Widget>[
details[4] == 'SI'
? Text(
'Il voto fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
: Text(
'Il voto non fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
],
),
],
),
),
actions: <Widget>[
FlatButton(
child: Text(
"Chiudi",
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 15)
),
onPressed: ()
Navigator.of(context).pop();
,
),
],
);
,
);
【讨论】：
谢谢。当 details[5]（在 "Descrizione:" 之后）很长并且分成多行时，它的效果很好，但如果它很短，则 "Descrizione:" 和 details[5] 都在中心。查看我编辑的答案，看看它的样子。 没关系，我将 RichText 小部件放入一个宽度设置为 double.infinity 的 Container 中，它运行良好。【参考方案2】：您所要做的就是对您的代码进行一些简单的更改
details[5] != ''
? Container(
width: double.infinity,
child: Row(
crossAxisAlignment: CrossAxisAlignment
.start, // This will change how the multi-line text is aligned
children: <Widget>[
Text(
'Descrizione: ',
style: test.GoogleFonts.quicksand(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
Flexible(
child: Text(
details[5],
style: test.GoogleFonts.quicksand(
color: Colors.black, fontSize: 20),
overflow: TextOverflow.ellipsis,
maxLines: 5,
textAlign: TextAlign.justify,
),
),
],
),
)
: Offstage(child: Text('invisible')),
如果你还需要什么，请告诉我
【讨论】：
以上是关于如何在 Flutter 中处理这个 Text 小部件？的主要内容，如果未能解决你的问题，请参考以下文章