如何在 Flutter 网格视图周围添加垂直线和水平线？

Question

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

我想做同样的这张图片

https://dribbble.com/shots/6913576-Papricon-Premium-Icons-from-Paperpillar/attachments

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

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

_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(),
);

}

Answer 1

将您的 Card 更改为 Container 并添加一个 BoxDecoration，因为这将为您提供边框

例如：

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

并删除 Divider

Answer 2

尝试将 gridView 放入容器中，并使用您想要的潜水员颜色，然后像这样为交叉轴和主轴添加间距：

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),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );

结果：

如何在 Flutter 网格视图周围添加垂直线和水平线？

How to add vertical and horizontal line around Flutter grid view?

gridview

flutter