width为0
来源：13-14 视频列表优化
demonCry
2022-09-11
老师感觉是第一次，很荣幸拿到老师的第一次 [doge]
后半份课程 "123"走倒是没了，但经常莫名就跳了一段
比如这里前脚说宽度为1，这里就后脚悄悄咪咪改为了0
想问下为什么这里设置为0了 但实际效果却是有一条这么细的线？ 是什么hack的写法。。。
写回答
1回答
-
马超老师
2022-11-19
这里是因为flutter引擎对border width为0作了一个特殊处理。具体可以看到Flutter源码的borders.dart文件，路径如下：
flutter/packages/flutter/lib/src/painting/borders.dart
我们设置的width也是在borders.dart的第143行声明的，这里源码也给了一个很详细的注释，如下：
/// The width of this side of the border, in logical pixels. /// /// Setting width to 0.0 will result in a hairline border. This means that /// the border will have the width of one physical pixel. Also, hairline /// rendering takes shortcuts when the path overlaps a pixel more than once. /// This means that it will render faster than otherwise, but it might /// double-hit pixels, giving it a slightly darker/lighter result. /// /// To omit the border entirely, set the [style] to [BorderStyle.none]. final double width;
可以看到第二段的第一句给了一个结论：
把width设置成0.0会出现一个细线，也就是会有一个物理像素的宽度。
当然如果想完全去掉这个分割线，真正实现width=0，可以将border的style设置成none，代码示例如下：
BoxDecoration(border: Border.all(color: const Color(0xfffef5ff), width: 0, style: BorderStyle.none))
demondCry同学观察的很仔细，不过这一段主要讲解视频列表的开发，这个小细节可以作为一个扩展知识了解一下。
00
相似问题