我有一个看起来像这样的应用栏:
用户可以更改应用栏中的文本。然而,过长的文本会导致溢出错误:
我认为将特定的Text
包装在Flexible
小部件中将解决此问题,但是当使用Flexible
方法时,我遇到了无法解决的错误:
RenderBox was not laid out: RenderFlex#0ac34 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
以下是屏幕截图中的可工作代码:
PreferredSize(
preferredSize: const Size.fromHeight(kToolbarHeight + 60),
child: Container(
color: getAppBarColor(),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: [
Visibility(
visible: hasBack,
child: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.arrow_back_ios,
color: getContentColor()),
),
),
Text(
title,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: fontSize,
color: getContentColor(),
fontWeight: FontWeight.w600,
),
)
],
),
),
const Spacer(),
Visibility(
visible: hasSettings,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: getIconButton(context),
),
),
...getExtraIconButton()
],
),
],
),
),
)
如果文本过长,我希望它能够动态地使用“…”进行缩写。一种简单的解决方法是使用SizedBox
,但是为了让它在每个设备上都能正常工作,我需要使SizedBox
具有非静态宽度。
我该如何实现所需的行为?
Expanded
小部件会导致与使用Flexible
小部件时相同的错误 :/ - Josip Domazet