填充堆栈中所有可用的水平空间答案

【问题标题】：Fill all available horizontal space in a stack填充堆栈中所有可用的水平空间
【发布时间】：2019-01-30 01:23:36
【问题描述】：

在卡片内，我有一个堆栈，其中包含 1) 图像和 2) 容器内的文本。如何让容器宽度填满卡片宽度？

Card(
  clipBehavior: Clip.antiAlias,
  child: Stack(
    children: <Widget>[
      Positioned.fill(child: Image.network(
          image_url,
          fit: BoxFit.fitWidth,
        ),
      ),
      Positioned(
        bottom: 0,
        child: Container(
          padding: new EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
          decoration: new BoxDecoration(color: Colors.black12),
          child: Row(
            children: <Widget>[
              Text("test1"),
              Text("test2"),
              Text("test3"),
            ],
          ),
        ),
      ),
    ],
  )
);

【问题讨论】：

标签： flutter stack containers width flutter-layout

【解决方案1】：

将left 和right 的值设置为0，这样容器就会这样运行。

Card(
  clipBehavior: Clip.antiAlias,
  child: Stack(
    children: <Widget>[
      Positioned.fill(child: Image.network(
          image_url,
          fit: BoxFit.fitWidth,
        ),
      ),
      Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: Container(
          padding: new EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
          decoration: new BoxDecoration(color: Colors.black12),
          child: Row(
            children: <Widget>[
              Text("test1"),
              Text("test2"),
              Text("test3"),
            ],
          ),
        ),
      ),
    ],
  )
);

【讨论】：

【解决方案2】：

用Expanded 小部件包裹所有的孩子。

Row(
    children: <Widget>[
        Expanded(
            child: Text("test1")
        ),
        Expanded(
            child: Text("test2")
        ),
        Expanded(
            child: Text("test3")
        ),
    ],
),

来自Expanded Widget Documentation：

使用 Expanded 小部件可使 Row、Column 或 Flex 的子级展开以填充主轴中的可用空间（例如，水平的 Row 或垂直的 Column）。如果展开多个children，则根据flex factor在它们之间分配可用空间。

【讨论】：