Flutter中GridView最后一项出现重复边框的问题求助

针对GridView添加边框后最后一项出现边框重复的问题，给你两种实用解决思路：

1. 为每个Item设置部分边框（适配GridView） #

通过判断item的索引，只给需要的边添加边框，避免相邻item边框叠加。以crossAxisCount:2的网格为例：

GridView.builder(
  padding: EdgeInsets.zero,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 0,
    mainAxisSpacing: 0,
  ),
  itemCount: 6, // 替换为你的数据长度
  itemBuilder: (context, index) {
    return Container(
      decoration: BoxDecoration(
        border: Border(
          // 仅给偶数索引的item添加右边框，避免相邻item边框叠加
          right: index % 2 == 0 ? const BorderSide(color: Colors.grey, width: 1) : BorderSide.none,
          // 仅给非最后一行的item添加底边框
          bottom: index < (6 - 2) ? const BorderSide(color: Colors.grey, width: 1) : BorderSide.none,
        ),
      ),
      alignment: Alignment.center,
      child: Text("Item $index"),
    );
  },
)

最后给GridView的父容器添加整体边框，弥补边缘缺失的边框：

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey, width: 1),
  ),
  child: // 嵌入上面的GridView
)

2. 改用Table组件（更简洁） #

如果布局允许，直接使用Table组件，它的border属性可统一设置网格边框，自动避免重复：

Table(
  border: TableBorder.all(color: Colors.grey, width: 1),
  columnWidths: const {
    0: FlexColumnWidth(1),
    1: FlexColumnWidth(1),
  },
  children: List.generate(3, (rowIndex) {
    return TableRow(
      children: [
        Container(
          padding: const EdgeInsets.all(16),
          alignment: Alignment.center,
          child: Text("Row $rowIndex - Col 0"),
        ),
        Container(
          padding: const EdgeInsets.all(16),
          alignment: Alignment.center,
          child: Text("Row $rowIndex - Col 1"),
        ),
      ],
    );
  }),
)

这两种方法都能彻底解决边框重复的问题，可根据你的布局复杂度选择使用。

内容的提问来源于stack exchange，提问作者Asad Amin