22

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

例如 -

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

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

4

4 回答 4

28

通过使用Expanded和设置flex属性，我们可以为每个小部件赋予一个Row或Column它自己的权重。这意味着允许填充该小部件的多少可用空间。因此，我们可以使用以下代码进行水平对齐：

默认情况下，Expanded占用整个可用空间，因此如果我们希望 2 个小部件占用 50% 的空间，我们可以flex完全删除该属性。

这是一个简单的代码示例，可以理解：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Expanded"),
      ),
      body: Container(
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 6, // 60% of space => (6/(6 + 4))
              child: Container(
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 4, // 40% of space
              child: Container(
                color: Colors.purple,
              ),
            ),
          ],
        ),
      ),
    );
  }

在此处输入图像描述

于 2020-10-05T10:18:55.743 回答
12

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 的子项以使子项填充可用空间的小部件。

你可以在这里阅读更多官方文档

于 2020-02-24T16:31:17.863 回答
6

小部件内的Flex小部件（例如Column, Row）可以包装在灵活小部件中。该Flexible小部件具有 flex 属性。Flutter 有 3 个灵活的小部件：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 ")
      ],
    )
  ],
),

);
于 2020-02-24T16:40:44.300 回答
1

#FlexFit.loose ：强制孩子填充可用空间。

#FlexFit.tight 或 Expanded ：子项最多可以与可用空间一样大。

于 2020-12-06T05:45:34.670 回答