flutter-wrap实现九宫格

效果:

7E78EBB9-4557-4141-A96A-5229C72826B1.png

// 必备工具
  Widget getBBWidget(BuildContext contex) {
    var ScreenW = MediaQuery.of(contex).size.width;
    return Container(
      margin: EdgeInsets.only(top: 15),
      height: 200,
      width: ScreenW,
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(top: 20, left: 13),
            child: Text(
              "必备工具",
              style: TextStyle(fontSize: 15),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Padding(
            padding: const EdgeInsets.only(left: 25, right: 25),
            child: Wrap(
              spacing: 30.0, // 主轴(水平)方向间距
              runSpacing: 25.0, // 纵轴（垂直）方向间距
              alignment: WrapAlignment.start, //模式
              children: <Widget>[
                Container(
                  color: Colors.red,
                  child: Column(
                    children: <Widget>[
                      Container(
                          width: 24,
                          height: 24,
                          child: Image(
                            image: AssetImage('images/待发货.png'),
                          )),
                      SizedBox(
                        height: 10,
                      ),
                      Text("领券中心"),
                    ],
                  ),
                ),
                Container( ...),
                Container( ...),
                Container( ...),
                Container( ...),
                Container( ...),
                Container( ...),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }