我是新手,我正在开发我的第一个应用程序。 我使用的交错网格视图(https://pub.dev/packages/flutter_staggered_grid_view#-readme-tab-)的行为应与普通网格视图类似。
我的设置是:正文:StaggeredGridView.count(crossAxisCount:4 ... 这意味着我可以将4个元素彼此相邻排列。一切正常。
但是现在我想在下一列中强制一个元素并将其放置在中间而不是其他元素的旁边。我该怎么办?
感谢帮助!
body: StaggeredGridView.count(
crossAxisCount: 4,
crossAxisSpacing: 12.0,
mainAxisSpacing: 12.0,
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
children: <Widget>[
_buildTile(
Padding
(
padding: const EdgeInsets.all(24.0),
child: Row
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Material
(
child: Padding(
child: Icon(Icons.store, color: Colors.black54, size: 40.0),
padding: const EdgeInsets.only(right: 15.0),)
),
Column
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Text('Test', style: TextStyle(color: Colors.redAccent)),
Text('Test', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontSize: 20.0))
],
),
]
),
),
onTap: () => print('Not set yet'),
),
_buildTile(
Padding
(
padding: const EdgeInsets.all(24.0),
child: Row
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Material
(
child: Padding(
child: Icon(Icons.store, color: Colors.black54, size: 40.0),
padding: const EdgeInsets.only(right: 15.0),)
),
Column
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Text('Test', style: TextStyle(color: Colors.redAccent)),
Text('Test', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontSize: 20.0))
],
),
]
),
),
onTap: () => print('Not set yet'),
),
_buildTile(
Padding
(
padding: const EdgeInsets.all(24.0),
child: Row
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Material
(
child: Padding(
child: Icon(Icons.store, color: Colors.black54, size: 40.0),
padding: const EdgeInsets.only(right: 15.0),)
),
Column
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Text('test', style: TextStyle(color: Colors.redAccent)),
Text('test', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontSize: 20.0))
],
),
]
),
),
onTap: () => print('Not set yet'),
),
_buildTile(
Padding
(
padding: const EdgeInsets.all(24.0),
child: Column
(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>
[
Material
(
color: Colors.teal,
shape: CircleBorder(),
child: Center
(
child: Icon(Icons.settings_applications, color: Colors.white, size: 30.0),
)
)
]
),
),
),
_buildTile(
Padding
(
padding: const EdgeInsets.all(24.0),
child: Column
(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>
[
Material
(
color: Colors.teal,
shape: CircleBorder(),
child: Center
(
child: Icon(Icons.settings_applications, color: Colors.white, size: 30.0),
)
)
]
),
),
),
//THIS IS THE ELEMENT I WANT TO FORCE TO THE NEXT COLUMN AND CENTER
_buildTile(QrImage(data: "1234567890", version: QrVersions.auto, size: 200.0,),),
],
staggeredTiles: [
StaggeredTile.extent(4, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
StaggeredTile.extent(4, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
StaggeredTile.extent(4, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
StaggeredTile.extent(1, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
StaggeredTile.extent(1, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
StaggeredTile.extent(1, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
],
),
);
}
Widget _buildTile(Widget child, {Function() onTap}) {
return Material(
elevation: 14.0,
borderRadius: BorderRadius.circular(12.0),
shadowColor: Color(0x802196F3),
child: InkWell
(
// Do onTap() if it isn't null, otherwise do print()
onTap: onTap != null ? () => onTap() : () { print('${MediaQuery.of(context).padding.top}'); },
child: child
)
);
}
}