Question

在我的应用中，我在一个位置具有这样的结构：

Expanded(child: InkWell(
    onTap: () => doSomething(),
    child: Container(
        child: Row(children: [
            Padding( child: Icon(Icons.warning, size: 22), padding: EdgeInsets.fromLTRB(0, 0, 8, 0), ),
            Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                Text('this is the very long text that doesnt fit on the screen and should be wrapped instead of overflowing'),
                Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.max,
                    children: _buildChildren(context)
                )
            ])
        ]),
        decoration: BoxDecoration(border: Border.all(color: appTheme.style.errorColor), borderRadius: BorderRadius.all(Radius.circular(8))),
        padding: EdgeInsets.fromLTRB(8, 4, 8, 4),
        margin: EdgeInsets.fromLTRB(4, 2, 4, 2),
    ))
)

我已经尝试了将Text，Flexible，Expanded，Container，FittedBox，{ {1}}等，但无济于事-有些使文本消失而有些什么都不做，而另一些使我出现布局错误...缺少使用固定宽度的Row找不到解决方法-甚至不使用固定宽度也可以吗？

Answer 1

我将继续回答我自己的问题，因为这再次发生在我身上，我不得不回到这里以记住如何解决它。

虽然将Text包裹在Flexible中似乎更直观，但实际的解决方案是将Column包裹在Flexible中：

Expanded(child: InkWell(
    onTap: () => doSomething(),
    child: Container(
        child: Row(children: [
            Padding( child: Icon(Icons.warning, size: 22), padding: EdgeInsets.fromLTRB(0, 0, 8, 0), ),
            Flexible(  // <--- THIS IS THE MISSING PIECE
                child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                    Text('this is the very long text that doesnt fit on the screen and should be wrapped instead of overflowing'),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        mainAxisSize: MainAxisSize.max,
                        children: _buildChildren(context)
                    )
                ]) 
            )
        ]),
        decoration: BoxDecoration(border: Border.all(color: appTheme.style.errorColor), borderRadius: BorderRadius.all(Radius.circular(8))),
        padding: EdgeInsets.fromLTRB(8, 4, 8, 4),
        margin: EdgeInsets.fromLTRB(4, 2, 4, 2),
    ))
)

无法换行

1 个答案: