Question

在卡片中，我有一个堆，里面有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"),
            ],
          ),
        ),
      ),
    ],
  )
);

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

Answer 2

使用Expanded小部件包装所有孩子。

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

来自Expanded Widget Documentation：

使用扩展窗口小部件会使Row，Column或Flex的子级展开以填充主轴上的可用空间（例如，水平放置在行中或垂直放置在列中）。如果扩展了多个子项，则会根据弹性因子在可用子项之间进行分配。

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

2 个答案: