Gridview 如何在颤振栅格视图周围添加垂直线和水平线？

我是个新手，目前正在开发一款在线游戏应用程序。在主页中，我实现了显示游戏类别的图像滑块和网格视图。我想在网格视图周围添加垂直和水平线，就像附加的图像一样，我尝试添加分隔符，但结果与我想要的不一样

我想做同样的这个形象

我真的不知道怎么画这样的线

这里是我的一些代码，我试图实现这一点

_buildGameCategory() {
    List<Map<String, dynamic>> games = [
      {
        "title": AppMenu.sport,
        "page": "Sport",
        "icon": AppImages.icon_sport,
      },
      {
        "title": AppMenu.live_casino,
        "page": "LiveCasino",
        "icon": AppImages.icon_casino,
      },
      {
        "title": AppMenu.virtual_sport,
        "page": "VirtualSport",
        "icon": AppImages.icon_sport,
      },
      {
        "title": AppMenu.game,
        "page": "Games",
        "icon": AppImages.icon_casino,
      },
      {
        "title": AppMenu.game,
        "page": "Games",
        "icon": AppImages.icon_casino,
      },
      {
        "title": AppMenu.game,
        "page": "Games",
        "icon": AppImages.icon_casino,
      }
    ];
return GridView.count(
  shrinkWrap: true,
  crossAxisCount: 3,
  padding: EdgeInsets.all(Constant.sizeMedium),
  crossAxisSpacing: Constant.sizeSmall,
  mainAxisSpacing: Constant.sizeSmall,
  physics: BouncingScrollPhysics(),
  children: games.map((category) {
    return GestureDetector(
      child: Card(
          elevation: 0.0,
          color: AppColors.color2,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Center(
                child: Container(
                  width: 80.0,
                  height: 80.0,
                  child: Stack(
                    children: <Widget>[AppIcons.iconGame],
                  ),
                ),
              ),
              Expanded(
                child: Text(
                  category["title"],
                  style: TextStyle(
                      fontSize: FontSize.s18,
                      fontWeight: FontWeight.w400,
                      color: AppColors.color1),
                ),
              ),
              Divider(color: Colors.white, thickness: 1.0),
            ],
          )),
      onTap: () {
        print(category);
      },
    );
  }).toList(),
);

\u buildGameCategory（）{
列表游戏=[
{
“标题”：AppMenu.sport，
“页面”：“运动”，
“图标”：AppImages.icon\u运动，
},
{
“标题”：AppMenu.live_赌场，
“页面”：“LiveCasino”，
“图标”：AppImages.icon\u赌场，
},
{
“标题”：AppMenu.virtual_sport，
“页面”：“VirtualSport”，
“图标”：AppImages.icon\u运动，
},
{
“title”：AppMenu.game，
“页面”：“游戏”，
“图标”：AppImages.icon\u赌场，
},
{
“title”：AppMenu.game，
“页面”：“游戏”，
“图标”：AppImages.icon\u赌场，
},
{
“title”：AppMenu.game，
“页面”：“游戏”，
“图标”：AppImages.icon\u赌场，
}
];
返回GridView.count(
收缩膜：对，
交叉轴计数：3，
填充：边缘集。全部（恒定大小中等），
交叉轴间距：常量.sizeSmall，
mainAxisSpacing:Constant.sizeSmall，
物理：弹跳CrollPhysics（），
儿童：游戏。地图（（类别）{
返回手势检测器(
孩子：卡片(
标高：0.0，
颜色：AppColors.color2，
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
居中(
子：容器(
宽度：80.0，
身高：80.0，
子：堆栈(
儿童：[AppIcons.iconGame]，
),
),
),
扩大(
子：文本(
类别[“标题”]，
样式：TextStyle(
fontSize:fontSize.s18，
fontWeight:fontWeight.w400，
颜色：AppColors.color1），
),
),
分隔器（颜色：彩色。白色，厚度：1.0），
],
)),
onTap:（）{
印刷品（类别）；
},
);
}).toList（），
);

---

}

将您的

卡

更改为

容器

，并添加一个盒子装饰，因为这将为您提供边框

例如：

Container(
  child: yourWidget,
  boxdecoration: BoxDecoration(
    border: Border.all(
      width: 1,
    ),
  );
)

---

然后拆下分隔器

尝试在容器内放置一个网格视图，颜色为所需的潜水员，然后向十字轴和主轴添加间距，如下所示：

Scaffold(
      body: SafeArea(
        child: Container(
          child: Column(
            children: <Widget>[
              Expanded(
                child: Image.network(
                  "https://www.roadaffair.com/wp-content/uploads/2017/10/kabukicho-tokyo-japan-shutterstock_637989430-1024x683.jpg",
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  gradient: RadialGradient(colors: [
                    Colors.grey[800],
                    Colors.black,
                  ], radius: 0.85, focal: Alignment.center),
                ),
                child: GridView(
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisSpacing: 2,
                    mainAxisSpacing: 2,
                    crossAxisCount: 3,
                  ),
                  children: <Widget>[
                    Container(color: Colors.black),
                    Container(color: Colors.black),
                    Container(color: Colors.black),
                    Container(color: Colors.black),
                    Container(color: Colors.black),
                    Container(color: Colors.black),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );

脚手架(
正文：安全区(
子：容器(
子：列(
儿童：[
扩大(
孩子：Image.network(
"https://www.roadaffair.com/wp-content/uploads/2017/10/kabukicho-tokyo-japan-shutterstock_637989430-1024x683.jpg",
适合：BoxFit.cover，
),
),
容器(
装饰：盒子装饰(
渐变：径向渐变（颜色：[
颜色。灰色[800]，
颜色，黑色，
]，半径：0.85，焦点：对齐。中心），
),
子：GridView(
收缩膜：对，
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
横轴间距：2，
主轴间距：2，
交叉轴计数：3，
),
儿童：[
容器（颜色：颜色。黑色），
容器（颜色：颜色。黑色），
容器（颜色：颜色。黑色），
容器（颜色：颜色。黑色），
容器（颜色：颜色。黑色），
容器（颜色：颜色。黑色），
],
),
),
],
),
),
),
);

结果:

---

George Herbert，这只是在卡的周围加上所有的边框，和我想要的不一样。Sergio Bernal，我们如何在线的末端模糊？我的意思是同一行图片检查我编辑的答案。我刚刚给一个容器添加了一个渐变，并用containerSergio Bernal包装了gridview，非常感谢你帮助解决了这个问题。这只适用于

子项。长度可以被
crossAxisCount
平均整除