如何在Flutter中应用flex

Question

我是Flutter的初学者，已经学会了如何处理在屏幕从桌面电脑大小到平板和手机大小切换时的大小调整和文本渲染。但是我想了解当我在同一屏幕模式下缩小屏幕尺寸时，如何更改大小或弹性内容。

例如 -

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 ")
        ],
      )
    ],
  ),
);

在这种情况下，当我试图将屏幕尺寸从台式机减小到平板电脑时，就会出现溢出异常。请指导我如何处理。

- Unbreakable

---

你可以使用 Flexible 或 Expanded widget 包装你的小部件，并在 Flexible 或 Expanded widget 内部使用 flex 属性。 - Kaveh Karami

Answer 1

Expanded类似于Flex并支持添加flex，

您可以使用Expanded包裹子节点，并按如下赋予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 的子组件扩展并填充可用空间的小部件。

您可以在此处阅读更多官方文档。

- leoelstin

Answer 2

在 Flex 组件（例如 Column, Row）中的小部件可以被包裹在 Flexible 组件中。 Flexible 组件具有弹性属性。Flutter 有三个弹性组件： Flexible、Expanded 和 Spacer

return Container(
child: new Row(
  children: <Widget>[
    Flexible(
      flex: 1 /*or any integer value above 0 (optional)*/,
      child: Column(
        children: <Widget>[
          Expanded(
              flex: 1 /*or any integer value above 0 (optional)*/,
              child: 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 ")
      ],
    )
  ],
),

);

- Isti01