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

Question

我是Flutter的新手，目前正在开发一款在线游戏应用程序。在主页面上，我已经实现了图片滑块和显示游戏分类的网格视图。我想要在网格视图周围添加垂直和水平线，就像附图中所示。我尝试了添加分隔线，但效果并不是我想要的。

我想要做到如下图片所示：

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

}

- july77

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

结果：

- Sergio Bernal

---

Sergio Bernal，我们如何在行尾模糊处理？我的意思是与这张图片完全相同的那一行。https://dribbble.com/shots/6913576-Papricon-Premium-Icons-from-Paperpillar/attachments - july77

请检查我的修改后的答案。我刚刚给一个容器添加了渐变，然后用该容器包装了网格视图。 - Sergio Bernal

Sergio Bernal，非常感谢您帮助解决这个问题。 - july77

只有当 children.length 能够被 crossAxisCount 整除时，这才有效。 - Luke Pighetti

Answer 2

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

例如：

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

并且移除 分隔线

- George Herbert

---

George Herbert，只是在卡片周围添加了所有边框，不是我想要的。 - july77