Flutter 文本span';s文本不';t显示它是否溢出并放在WidgetSpan之后
这是一个非常具体的场景,我不确定确切的原因。代码如下所示。总结一下:我创建了一个容器小部件,设置了一个特定的宽度值,然后将RichText小部件设置为它的子部件。使用两个InlineSpans填充RichText。一个WidgetSpan和一个TextSpan。TextSpan位于WidgetSpan之后。如果InlineSpans内容的宽度超过容器的宽度,并且maxLines设置为1;仅显示WidgetSpan,根本不显示TextSpan 我只想在容器中显示尽可能多的文本,然后以我为RichText选择的任何溢出选项结束。我尝试了不同的溢出选项,但都没有改变结果。我的首选选项是TextOverflow.ellipsis,但除TextOverflow.clip之外的其他选项也可以 我必须使用WidgetSpan垂直居中图标字符。如果有任何其他方法来实现这一点,我会完全同意 下图是宽度值为250的满容量容器。字体大小在下面的代码部分给出。WidgetSpan字符是随机选择的,更改字符并不能解决问题 这是宽度值为240的容器。正如您所看到的,它已溢出,TextSpan的文本已完全消失。WidgetSpan按目的向右对齐,更改对齐不会改变结果 这是容器小部件的最小代码Flutter 文本span';s文本不';t显示它是否溢出并放在WidgetSpan之后,flutter,dart,formatting,Flutter,Dart,Formatting,这是一个非常具体的场景,我不确定确切的原因。代码如下所示。总结一下:我创建了一个容器小部件,设置了一个特定的宽度值,然后将RichText小部件设置为它的子部件。使用两个InlineSpans填充RichText。一个WidgetSpan和一个TextSpan。TextSpan位于WidgetSpan之后。如果InlineSpans内容的宽度超过容器的宽度,并且maxLines设置为1;仅显示WidgetSpan,根本不显示TextSpan 我只想在容器中显示尽可能多的文本,然后以我为RichT
Container(
width: 250,
child: RichText(
maxLines: 1,
text: TextSpan(
children: [
WidgetSpan(
alignment: PlaceholderAlignment.middle,
child: Text(String.fromCharCode(1005),
style: TextStyle(
color: Colors.black,
fontSize: 25))
),
TextSpan(
text: 'wwwwwwwwwwwwwwwwwwww',
style: TextStyle(
color: Colors.black,
fontSize: 15),
)
]
),
),
),
这就是你想要的吗?我使用了Row小部件而不是RichText
导入“包装:颤振/材料.省道”;
void main(){
runApp(MyApp());
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回材料PP(
标题:“颤振演示”,
主题:主题数据(
主样本:颜色。蓝色,
视觉密度:视觉密度。自适应平台密度,
),
主页:MyHomePage(标题:“颤振演示主页”),
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage({Key,this.title}):超级(Key:Key);
最后的字符串标题;
@凌驾
_MyHomePageState createState()=>\u MyHomePageState();
}
类_MyHomePageState扩展状态{
@凌驾
void initState(){
super.initState();
}
@凌驾
小部件构建(构建上下文){
返回脚手架(
appBar:appBar(
标题:文本(widget.title),
),
正文:_buildBody(),
浮动操作按钮:浮动操作按钮(
按下:(){},
工具提示:“增量”,
子:图标(Icons.add),
),
);
}
小部件_buildBody(){
返回容器(
宽度:250,
孩子:排(
儿童:[
正文(
String.fromCharCode(1005),
样式:TextStyle(颜色:Colors.black,字体大小:25),
),
扩大(
子:文本(
“WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW,
溢出:TextOverflow.省略号,
样式:TextStyle(颜色:Colors.black,字体大小:15),
),
),
],
),
);
}
}
是的,这很有效,我只需将文本小部件与图标垂直对齐,我就可以管理它。谢谢:)
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: _buildBody(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Widget _buildBody() {
return Container(
width: 250,
child: Row(
children: [
Text(
String.fromCharCode(1005),
style: TextStyle(color: Colors.black, fontSize: 25),
),
Expanded(
child: Text(
'wwwwwwwwwwwwwwwwwwwwwwwwww',
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Colors.black, fontSize: 15),
),
),
],
),
);
}
}