搭建类LiteBrite可点击变色16x16网格时仅生成单个盒子的问题

AI 小北

2026-5-14

解决16x16网格只显示单个BoxView的问题

嘿，我一眼就看穿问题所在啦！你的代码虽然循环创建了所有BoxView，但既没给Grid设置行列定义，也没指定每个盒子对应的行和列位置——结果所有BoxView都挤在Grid的(0,0)坐标上，看起来自然就只剩一个盒子了！

两步修改就能搞定：

先给mainGrid添加完整的行列定义，让它知道要分成16行16列
给每个BoxView绑定对应的Grid.Row和Grid.Column属性，把它们放到正确的格子里

修改后的完整代码：

// 先确认你的行列数是16
int rows = 16;
int cols = 16;

// 第一步：给Grid添加行定义（按需调整高度，这里用固定值让格子大小统一）
for (int i = 0; i < rows; i++)
{
    mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(30) });
}

// 给Grid添加列定义（同理可调整宽度）
for (int i = 0; i < cols; i++)
{
    mainGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(30) });
}

// 第二步：循环创建并放置BoxView
for (int row = 0; row < rows; row++) { 
  for(int col = 0; col < cols; col++) { 
    BoxView box = new BoxView { 
      VerticalOptions = LayoutOptions.Fill, // 改成Fill让盒子填满格子
      HorizontalOptions = LayoutOptions.Fill,
      Color = borderColor, 
    }; 
    /* 添加点击手势逻辑 */
    var tap = new TapGestureRecognizer(); 
    box.GestureRecognizers.Add(tap); 
    tap.Tapped += OnBoxViewTapped; 
    // 把盒子加入列表
    boxes.Add(box); 

    // 关键：指定当前盒子的行和列
    Grid.SetRow(box, row);
    Grid.SetColumn(box, col);

    // 添加到Grid中
    mainGrid.Children.Add(box); 
  } 
}