flutter - Flutter 为什么 Wrap 在环绕行时不起作用?
问题描述
我试图用颤振包装一些内容但没有成功。我发现我不能像使用 Chips 或 Text 小部件那样换行。有人知道为什么吗?
这是三组 Rows ,每组都有一个图标和一个文本,并排放置。但是在较小的屏幕中它会溢出,因为没有足够的空间(宽度)。
当当前行中的空间结束时,我希望最后一组行(一个图标和一个标签)跳转到下一行。
谢谢
我试图用容器包装行,但没有奏效。
Row(
children: <Widget>[
Wrap(
children: <Widget>[
Row(
children: <Widget>[
Text('long text 1'),
Text('an icon here'),
],
),
Row(
children: <Widget>[
Text('Anoter Label'),
Text('Anoter icon'),
],
),
// I want this row to jump to next line when there is not space in
// current line
Row(
children: <Widget>[
Text('More Text'),
Text('Moire icon'),
],
),
],
)
],
),
当我在较小的屏幕上时,带有标题的图像会调整大小并且非常适合。但是图片上方的标签和图标溢出了。所以 id 像最后一组图标/标签带有 $ simbol e 价格的那个,跳到新行。我可以在仅使用文本小部件时换行并且它可以工作,但随后我失去了在 mainAxisAlignment 等行上的对齐方式:MainAxisAlignment.spaceAround
解决方案
更新:这在某种程度上是一个解决方案
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
child: Wrap(
children: <Widget>[
Icon(Icons.alarm),
Text('60 Minutes'),
],
),
),
Expanded(
child: Wrap(
children: <Widget>[
Icon(Icons.shop),
Text('Lorem ipsumssssssssssssssssssssssssssssssss'),
],
),
),
Expanded(
child: Wrap(
children: <Widget>[
Icon(Icons.attach_money),
Text('Very expensive'),
],
),
)
],
);
...
你可以这样做
Row(
children: <Widget>[
Expanded(
child: Wrap(
children: <Widget>[
Text('long text 1'),
Text('an icon here'),
Text('Anoter Label'),
Text('Anoter icon'),
// I want this row to jump to next line when there is not space in
// current line
Text('More Text'),
Text('Moire icon'),
],
),
)
],
),
或这个
Row(
children: <Widget>[
Expanded(
child: Wrap(
children: <Widget>[
Row(
children: <Widget>[
Text('long text 1'),
Text('an icon here'),
],
),
Row(
children: <Widget>[
Text('Anoter Label'),
Text('Anoter icon'),
],
),
// I want this row to jump to next line when there is not space in
// current line
Row(
children: <Widget>[
Text('More Text'),
Text('Moire icon'),
],
),
],
),
)
],
),
推荐阅读
- wpf - DataTemplate MouseEnter Grid 中的 EventTrigger 不起作用
- python - pyautogui 自动化不适用于 Zoom
- python - 将 BasicLSTMCell 转换为双向 LSTM
- android-studio - 应用安装卡在 Android Studio(物理设备)上的“安装”上
- mysql - SQL按百分比和时间选择项目
- javascript - 挂钩输入字段
- reactjs - 如何检查所选帐户是否有我的自定义令牌?
- servicestack - Servicestack:有没有办法在 OnConnect 服务器事件中从数据库中添加键值对
- perl - 修复 Devel::ptkdb 以支持左值子真的那么容易吗?(rfce)
- r - 如何在 R 中创建与 devtools::check 具有相同输出风格的检查函数