如何在FLUTTER中创建带可滚动工具栏的网格视图。我已经找到了带有标题的列表视图ListViewWithHeader。但是我需要像下面提到的图片中一样带有标题的GridView。我使用了SilverGrid来构建这个布局,但是它有点卡顿。所以我需要另一个选项。
Container setDataToContainer() {
return Container(
color: Colors.white,
margin: EdgeInsets.only(left: 4.0, right: 4, bottom: 4, top: 4),
child: CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildListDelegate(
[
HeaderWidget("Header 1"),
],
),
),
SliverGrid(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
delegate: SliverChildListDelegate(
[
BodyWidget("title", "key_x", "pnl.svg"),
BodyWidget("title2", "key_x", "cls.svg"),
BodyWidget(
"title3", "key_x", "irr.svg"),
BodyWidget(
"title4", "key_x", "icp.svg"),
],
),
),
SliverList(
delegate: SliverChildListDelegate(
[
HeaderWidget("Header 2"),
],
),
),
SliverGrid(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
delegate: SliverChildListDelegate(
[
BodyWidget("title5", "key_x", "ict.svg"),
BodyWidget("title6", "key_x", "icc.svg"),
],
),
),
SliverList(
delegate: SliverChildListDelegate(
[
HeaderWidget("Others"),
],
),
),
SliverGrid(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
delegate: SliverChildListDelegate(
[
BodyWidget("title7", "key_x", "icd.svg"),
BodyWidget("title8", "6", "ici.svg"),
],
),
),
],
),
);
}
class HeaderWidget extends StatelessWidget {
final String text;
HeaderWidget(this.text);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(left: 10.0, right: 10, bottom: 2, top: 20),
child: Text(
text.toUpperCase(),
style: TextStyle(
color: hexToColor(themeColor1),
fontSize: 16,
fontWeight: FontWeight.bold),
),
color: Colors.white,
);
}
}
class BodyWidget extends StatelessWidget {
final String imagePath;
final String title;
final String navigationKey;
BodyWidget(this.title, this.navigationKey, this.imagePath);
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
child: Card(
color: hexToColor(themeColor1),
elevation: 5,
child: InkWell(
onTap: () {
navigateToView(context, navigationKey);
},
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Container(
margin: EdgeInsets.only(top: 40),
child: SvgPicture.asset(
"assets/images/$imagePath",
color: Colors.white,
width: 35,
height: 35,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
verticalDirection: VerticalDirection.up,
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
color: Colors.black.withOpacity(.2),
child: Text(
title,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.normal),
),
)
],
),
),
],
),
),
));
}
void navigateToView(BuildContext context, String navigationKey) {
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, animation1, animation2) {
return NewSections();
},
transitionsBuilder: (context, animation1, animation2, child) {
return FadeTransition(
opacity: animation1,
child: child,
);
},
transitionDuration: Duration(milliseconds: 600),
),
);
}
}
SliverToBoxAdapter
来编写标题文本,而不是使用只有一个子元素的SliverList
! - Hossein Hadi