颤动交错网格视图

时间:2020-11-02 03:35:08

标签: flutter user-interface gridview

我正在使用StaggeredGridView插件创建带有一些卡片的gridview,在这些卡片内,还有另一个gridview用于显示一些数据。我正在努力寻找一种方法来调试最后(以及更大一点)的蓝卡。我认为,如果将蓝卡而不是正方形变成矩形,那会起作用,但我也找不到解决办法(至少main / crossAxisSpacing方法无法解决)。

UI

这是卡片的代码段:

  Widget MainBody(){
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(2,5,2,0),
        child: StaggeredGridView.countBuilder(
          crossAxisCount: 4,
          itemCount: subsystems.length,
          itemBuilder: (BuildContext context, int index) => Card(
            elevation: 2,
            color: subsystems[index].cardColor,
            //color: Colors.grey[200],
            child: InkWell(
              onTap: (){Navigator.of(context).push(MaterialPageRoute(builder: (context) => EntitiesPage(index.toInt())));},
              child: Padding(
                padding: const EdgeInsets.all(0.0),
                child: Container( //starts here
                  child: Column(
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(top:5),
                        child: subsystemCardTitle(index),
                      ),
                      subsystemCardEntities(index)
                    ],
                  )
                ),
              ),
            )
          ),
          staggeredTileBuilder: (int index) => StaggeredTile.fit(2),
          mainAxisSpacing: 0.0,
          crossAxisSpacing: 0.0,
        ),
      ),
    );
  }

以及卡中的数据

  Widget subsystemCardEntities(int index){
    return  GridView.count(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      crossAxisCount: 4,
      children: [
        for(var name in subsystems[index].entity)
          Center(child: Text(name))
      ],
    );
  }

0 个答案:

没有答案