Flutter交错网格视图图块和滚动

时间:2020-10-14 08:13:00

标签: flutter flutter-web

我可以使用交错的网格视图,但只能在扩展的小部件中使用。结果是这样的:

example GIF

但是,我还希望在滚动网格视图时将横幅向下滚动。另外,是否有可能每行显示3个图块,而不是仅显示两个?我正在尝试使其像画廊视图那样,就像他们在不飞溅或像素像素的图片网站上所做的那样。

到目前为止,这是我的代码。

body: Flex(
      direction: Axis.vertical,
      children: [
        Container(
          width: deviceSize.width,
          height: 650,
          child: Stack(
            alignment: AlignmentDirectional.center,
            children: [
              Image.asset(
                'assets/Big Sur.jpg',
                width: deviceSize.width,
                fit: BoxFit.cover,
              ),
              Stack(
                children: [
                  Text(
                    """\n\n\nA decentralized photography platform\nfor the devoted communities.""",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 30,
                    ),
                  ),
                  Text(
                    'PhoBlock',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                      fontSize: 80,
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
        SizedBox(
          height: 50,
        ),
        Expanded(
          child: StaggeredGridView.countBuilder(
            crossAxisCount: 4,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                margin: EdgeInsets.all(20),
                color: Colors.green,
                child: Center(
                  child: CircleAvatar(
                    backgroundColor: Colors.white,
                    child: Center(child: Text('$index')),
                  ),
                ),
              );
            },
            staggeredTileBuilder: (int index) {
              return StaggeredTile.count(2, index.isEven ? 2 : 1);
            },
            mainAxisSpacing: 4.0,
            crossAxisSpacing: 4.0,
          ),
        ),
      ],
    ),

0 个答案:

没有答案