Flutter条件判断语句始终仅渲染true分支效果的问题求解

你遇到的黄色边框不渲染是Flutter列表开发的高频新手坑，按下面的点逐一核对就能定位：

• 索引判断逻辑错误
  如果你用动态构建列表的组件，先查判断分支的触发条件：
  1. 要是用了ListView.separated，这个组件会把分割线也算入item索引计数，直接按index <5判断的话，索引和实际列表项序号完全不对应，黄色的分支永远触发不到。这种情况要先换算真实项索引：final realItemIndex = index ~/ 2;，再用realItemIndex做颜色判断。
  2. 检查判断逻辑是不是被固定值覆盖：比如在判断分支外面提前写死了border: Border.all(color: Colors.blue)，后面判断里给黄色赋值的代码优先级更低，根本不会生效；或者只写了蓝色分支的if判断，漏了else分支的黄色边框逻辑。
• 装饰属性写法冲突
  检查黄色项的Container装饰代码，这两个写法错误会直接导致边框看不见：
  1. 同时给Container本身和内部的BoxDecoration设置了color属性：Flutter中这两个位置同时设color会直接有渲染冲突，很多人写黄色项时误给Container加了和页面背景一致的颜色，直接把边框盖在了下层。记住所有边框、圆角、背景色这类装饰属性，全部写在BoxDecoration里，不要单独给Container加color参数。
  2. 复制蓝色边框代码改色时漏了参数：比如黄色边框的BorderSide宽度设成了0，或者颜色透明度误写成0，视觉上完全看不到边框。
• 组件层级遮挡
  如果黄色项的子组件有占满全宽高的外层容器，并且带了和页面背景同色的装饰，会直接把你写在最外层的黄色边框完全盖住。可以临时给黄色边框的Container加2像素的内边距测试，如果能露出黄边就确认是子组件遮挡问题，调整层级或者给子组件加对应边距就行。

下面是可直接运行的正确实现代码，对照你的代码找差异：

ListView.builder(
  itemCount: 10,
  padding: const EdgeInsets.all(8),
  itemBuilder: (context, index) {
    // 前5项蓝色，后5项黄色
    final itemBorderColor = index < 5 ? Colors.blue : Colors.yellow;
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 4),
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        border: Border.all(color: itemBorderColor, width: 2),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text('第${index + 1}个列表项'),
    );
  },
)

快速调试技巧：给黄色分支的容器临时加个半透明红色背景color: Colors.red.withOpacity(0.2)，运行后如果后半段列表项连红底都不显示，100%是索引判断逻辑没走到黄色分支；如果红底能显示但黄边看不见，就是边框写法错误或者子组件遮挡。

内容的提问来源于stack exchange，提问作者Lils Don