Flutter - проблема нестандартного размера GridView
Я экспериментировал с флаттером и GridView. В настоящее время у меня есть несколько контейнеров, отображаемых в макете сетки, однако я хочу добавить еще один контейнер под ними и настроить его размер. Я хочу, чтобы все существующие контейнеры занимали 60% экрана, а новый контейнер полностью занимал оставшиеся 40%. Я безуспешно экспериментировал с Expanded Class. Мы будем очень благодарны за любые отзывы / рекомендации.
Widget build(BuildContext context){
final title = ' MyFirstApp';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Text(title),
),
body: GridView.count(
crossAxisCount: 3,
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
childAspectRatio: 0.80,
children: <Widget> [
new InkWell(
onTap: (){
navigateToSubPage(context, Page1());
print("Container clicked");
},
child: Container(
child: Column(
children: [
Image.asset('assets/main/page1.jpg'),
Text("Page1", style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),),
]),
)
),
new InkWell(
onTap: (){
navigateToSubPage(context, page2());
print("Container clicked 1");
},
child: Container(
child: Column(
children: [
Image.asset('assets/main/page2.jpg'),
Text("Page2", style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),),
]),
),
),
new InkWell(
onTap: (){
navigateToSubPage(context, page3());
print("Container clicked 2");
},
child: Container(
child: Column(
children: [
Image.asset('assets/main/page3.jpg'),
Text("Record", style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),),
]),
),
),
new InkWell(
onTap: (){
navigateToSubPage(context, page4());
print("Container clicked 3");
},
child: Container(
child: Column(
children: [
Image.asset('assets/main/page4.jpg'),
Text("Page4", style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),)
]),
),
),
new InkWell(
onTap: (){
print("Container clicked 4");
},
child: Container(
child: Column(
children: [
Image.asset('assets/main/page5.jpg'),
Text("Page5", style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),),
]),
),
),
new InkWell(
onTap: (){
print("Container clicked 5");
},
),
],
),
),
);
}```
0 ответов
AFAIK, GridView можно прокручивать, так как иногда сетка может содержать большое (или бесконечное) количество дочерних элементов, которые не помещаются на весь экран. Если это не то, чего вы хотели достичь, я предлагаю просто использовать строки и столбцы.
Также, если вы проверите свойства
GridView.count()с помощью операции "Перейти к определению" в выбранной среде IDE она приведет вас к файлу scroll_view.dart.
mainAxisSpacing,
crossAxisSpacing и
childAspectRatio- это свойства, значения которых можно настраивать. Я думаю, вам просто нужно поиграть с этими свойствами, чтобы добиться желаемого.
height и
width этих контейнеров.
Насколько я понимаю, вы хотели бы достичь примерно следующего:
Widget build(BuildContext context) {
final title = ' MyFirstApp';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Text(title),
),
body: Column(
children: <Widget>[
Expanded(
flex: 60,
child: GridView.count(
crossAxisCount: 3,
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
childAspectRatio: 0.80,
children: <Widget>[
new InkWell(
onTap: () {
// navigateToSubPage(context, Page1());
print("Container clicked");
},
child: Container(
color: Colors.green[100],
child: Column(children: [
// Image.asset('assets/main/page1.jpg'),
Text(
"Page1",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
]),
)),
new InkWell(
onTap: () {
// navigateToSubPage(context, page2());
print("Container clicked 1");
},
child: Container(
color: Colors.green[200],
child: Column(children: [
// Image.asset('assets/main/page2.jpg'),
Text(
"Page2",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
]),
),
),
new InkWell(
onTap: () {
// navigateToSubPage(context, page3());
print("Container clicked 2");
},
child: Container(
color: Colors.green[300],
child: Column(children: [
// Image.asset('assets/main/page3.jpg'),
Text(
"Record",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
]),
),
),
new InkWell(
onTap: () {
// navigateToSubPage(context, page4());
print("Container clicked 3");
},
child: Container(
color: Colors.green[400],
child: Column(children: [
// Image.asset('assets/main/page4.jpg'),
Text(
"Page4",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
)
]),
),
),
new InkWell(
onTap: () {
print("Container clicked 4");
},
child: Container(
color: Colors.green[500],
child: Column(children: [
// Image.asset('assets/main/page5.jpg'),
Text(
"Page5",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
]),
),
),
new InkWell(
onTap: () {
print("Container clicked 5");
},
),
],
),
),
Expanded(
flex: 40,
child: GridView.count(
crossAxisCount: 1,
children: <Widget>[
new InkWell(
onTap: () {
// navigateToSubPage(context, Page1());
print("Container clicked");
},
child: Container(
color: Colors.green[600],
child: Column(children: [
// Image.asset('assets/main/page1.jpg'),
Text(
"Remaining 40%",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
]),
)),
],
),
),
],
),
),
);}
Повторно используя ваш код (закомментировал некоторые ненужные части и улучшил их для визуальных целей), я обернул 2
GridView.count() на 2 отдельные Expanded() виджет, чтобы я мог установить
flex factorдо 60 и 40 соответственно. 2-го
GridView.count() Я установил
crossAxisCount до 1, чтобы заполнить оставшиеся 40% экрана.