Positioned与Container嵌套无法充满容器

235 字

1 分钟

Positioned与Container嵌套无法充满容器

2021-11-13

2026-10-12

Flutter

无标签

问题#

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

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

1
  @override
2
  Widget build(BuildContext context) {
3
    return Container(
4
      color: Colors.white,
5
      height: 44,
6
      child: Stack(
7
        children: [
8
          Row(
9
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
10
            children: [
11
              Container(
12
                padding: const EdgeInsets.all(10),
13
                color: Colors.green,
14
                child: Row(
15
                  children: [
16
                    Image(image: AssetImage(imageName)),
17
                    const SizedBox(
18
                      width: 8,
19
                    ),
20
                    Text(title),
21
                  ],
22
                ),
23
              ),
24
              Container(
25
                  color: Colors.yellow,
26
                  child: Row(
27
                    children: [
28
                      subTitle != null ? Text(subTitle!) : Container(),
29
                      subImageName != null
30
                          ? Image.asset(subImageName!)
31
                          : Container(),
32
                      Image.asset(
33
                        'images/icon_right.png',
34
                        width: 15,
35
                      )
36
                    ],
37
                  ))
38
            ],
39
          ),
40
          Positioned(
41
            left: 48,
42
            bottom: 0,
43
            child: Container(
44
              height: 0.5,
45
              color: Colors.red,
46
            ),
47
          ),
48
        ],
49
      )
50
    );
51
  }

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

Align#

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

1
Align(
2
    alignment: Alignment.bottomCenter,
3
    child: Container(
4
        margin: EdgeInsets.only(left: 48),
5
        height: 0.5,
6
        color: Colors.grey,
7
    ),
8
)

参考#

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

通过联系人Cell看断言

openURL