Я пытаюсь отобразить вид сетки с переменными номерами и кнопками ширины, например:
Но то, с чем я столкнулся при попытке просмотра сетки, — это фиксированное количество кнопок и фиксированная ширина, например:
Первоначально я думал, что это проблема с кнопками, имеющими слишком много отступов по умолчанию, но это не проблема, я смог это исправить, и у меня все еще есть та же проблема с сеткой.
Я пробовал конструктор Gridview следующим образом:
GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 3.5, mainAxisSpacing: 4, crossAxisSpacing: 4),
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: () {
//Navigator.of(context).pushNamed(HomePageResultsScreen.id);
},
child: ButtonTheme(
minWidth: 16,
height: 30,
child: RaisedButton(
padding: EdgeInsets.all(8.0),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
color: Colors.white,
child:
Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
CachedNetworkImage(fit: BoxFit.contain,
height: 40,
width: 40,
placeholder: (context, url) => new CircularProgressIndicator(),
imageUrl: snapshot.data.documents[index]['icon'].toString(),
),
Text(snapshot.data.documents[index]['name'].toString(), textAlign: TextAlign.right, style: TextStyle(fontSize: 10, color: Colors.black,),),
],
),
),
onPressed: (){
},
),
),
);
},
itemCount: snapshot.data.documents.length,
);
Я также отредактировал атрибуты построителя, чтобы иметь SliverGridDelagateWithMaxCrossAxisExtent и другие атрибуты. Я знаю, что кнопки в том виде, в каком они есть, если они не размещены внутри сетки, будут уменьшаться до минимального размера, но когда они находятся в сетке, они расширяются, чтобы заполнить весь столбец.
Я также пробовал множество способов, заменив вид сетки на шахматный вид сетки, например:
StaggeredGridView.countBuilder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 3,
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 2 : 1),
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: () {
//Navigator.of(context).pushNamed(HomePageResultsScreen.id);
},
child: ButtonTheme(
minWidth: 16,
height: 30,
child: RaisedButton(
padding: EdgeInsets.all(8.0),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
color: Colors.white,
child:
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
CachedNetworkImage(fit: BoxFit.contain,
height: 20,
width: 20,
placeholder: (context, url) => new CircularProgressIndicator(),
imageUrl: snapshot.data.documents[index]['icon'].toString(),
),
Text(snapshot.data.documents[index]['name'].toString(), textAlign: TextAlign.center, style: TextStyle(fontSize: 10, color: Colors.black,),),
],
),
onPressed: (){
},
),
),
);
},
itemCount: snapshot.data.documents.length,
),
Я пробовал и StaggeredGridView.countBuilder, и StaggeredGridView.extent, но оба они еще дальше от того, что я себе представлял. Это просто заканчивается одной кнопкой на строку gridview (выглядит как список).
Я не уверен, что я делаю неправильно и возможно ли это вообще с этими виджетами.
Спасибо за вашу помощь
