07.Positioned与Container嵌套无法充满容器

问题

是这样的,写好了Cell,想给Cell添加分割线,我自己在iOS开发中一般都是直接加在Cell里面的。这里我也准备这样实现。

前面有使用过 Position ,思考通过 Stack + Position + Container 理论上可以实现。于是有了下面的代码:

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      height: 44,
      child: Stack(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                padding: const EdgeInsets.all(10),
                color: Colors.green,
                child: Row(
                  children: [
                    Image(image: AssetImage(imageName)),
                    const SizedBox(
                      width: 8,
                    ),
                    Text(title),
                  ],
                ),
              ),
              Container(
                  color: Colors.yellow,
                  child: Row(
                    children: [
                      subTitle != null ? Text(subTitle!) : Container(),
                      subImageName != null
                          ? Image.asset(subImageName!)
                          : Container(),
                      Image.asset(
                        'images/icon_right.png',
                        width: 15,
                      )
                    ],
                  ))
            ],
          ),
          Positioned(
            left: 48,
            bottom: 0,
            child: Container(
              height: 0.5,
              color: Colors.red,
            ),
          ),
        ],
      )
    );
  }

这里希望得到的效果是,左边留 48 空隙,右边贴边的分割线。但是时机效果并没有出现:

Align

这里改用 Align 就可以实现效果了。

Align(
    alignment: Alignment.bottomCenter,
    child: Container(
        margin: EdgeInsets.only(left: 48),
        height: 0.5,
        color: Colors.grey,
    ),
)

参考

https://cloud.tencent.com/developer/article/1402558

Last updated