我可以使用交错的网格视图,但只能在扩展的小部件中使用。结果是这样的:
但是,我还希望在滚动网格视图时将横幅向下滚动。另外,是否有可能每行显示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,
),
),
],
),