flutter - 如何在 flutter 中应用 flex

Question

我是一个初学者，当屏幕尺寸从台式机到平板电脑再到移动设备时，我已经学会了如何处理尺寸和文本渲染。但是我想了解当我在同一屏幕模式下减小屏幕尺寸时如何更改尺寸或调整内容。
例如 -

return Container(
  child: new Row(
    children: <Widget>[
      new Column(
        children: <Widget>[new Text("Hello World")],
      ),
      new Column(
        children: <Widget>[
          new Text(
              "This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is ")
        ],
      )
    ],
  ),
);

在这种情况下，当我尝试将屏幕尺寸从桌面减小到表格时，我开始出现溢出异常。请指导我如何处理它。

Answer 1

Expanded 与 Flex 类似，支持添加 flex，

你可以用 Expanded 包裹你的 child 并给 flex 如下

更新代码:

Container(
  child: new Row(
    children: <Widget>[
      new Expanded ( 
        flex:1,
        child : Column(
        children: <Widget>[new Text("Hello World")],
      ),),
      new Expanded( 
        flex :2,
        child: Column(
        children: <Widget>[
          new Text(
              "This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is ")
        ],
      ),)
    ],
  ),
)

Expanded :扩展 Row、Column 或 Flex 的子项以使子项填充可用空间的小部件。

您可以在官方文档 here 阅读更多内容