带有水平和垂直中心对齐分隔线的Flutter GridView

Question

我正尝试绘制分隔线，如下图所示。

我当时正在考虑水平增加5列，并用1 dp的线使分隔柱变小。但是，在颤振中，所有列的宽度均相等，看来还是我错了

如何绘制行和列分隔符，如下图所示？

这是我正在使用的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="numbers"></div>

Answer 1

我知道为时已晚，但是我认为您可以使用Stack来实现（或实现该目的），并且线条可以是静态图像，而Grid可以位于其上方

Answer 2

我将使用GridView生成List.generate个孩子，并根据孩子的索引使每个孩子使用不同的边框。

您的GridView应该看起来像这样：

  Widget getGridView() {
    return GridView.count(
      crossAxisCount: 3,
      shrinkWrap: true,
      children: List.generate(listOfPictures.length, (index) {
        return getWarppedPicture(
            listOfPictures[index], index, listOfPictures.length);
      }),
    );
  }

getWarppedPicture函数应如下所示：

  Widget getWarppedPicture(element, int index, totalLegth) {
    int tempIndex = index + 1;

    // if bottomRigth
    if (tempIndex % 3 == 0 && tempIndex + 3 >= totalLegth) {
      return Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: Image.network(element.picPath).image,
          ),
        ),
      );
    }

    // if bottom
    if (tempIndex + 3 >= totalLegth) {
      return Row(
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: Image.network(element.picPath).image,
              ),
            ),
          ),
          Center(
            child: Container(
              height: 50,
              width: 1,
            ),
          ),
        ],
      );
    }

    // if rigth
    if (index % 3 == 0) {
      Column(
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: Image.network(element.picPath).image,
              ),
            ),
          ),
          Center(
            child: Container(
              height: 1,
              width: 50,
            ),
          ),
        ],
      );
    }
    
    // all the rest
    return Column(
      children: [
        Row(
          children: [
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: Image.network(element.picPath).image,
                ),
              ),
            ),
            Center(
              child: Container(
                height: 50,
                width: 1,
              ),
            ),
          ],
        ),
        Center(
          child: Container(
            height: 1,
            width: 50,
          ),
        ),
      ],
    );
  }

我已决定默认变形将在元素的底部和右侧为边框。

该草图描述了每个索引及其边界条件：

享受！ ;）