Flutter-GridView自定义尺寸问题

问题描述

我一直在试验flutter和GridView。目前，我在网格布局中出现了许多容器，但是我想在它们下方添加一个容器并自定义其大小。我希望所有现有容器占用60％的屏幕，而新容器完全覆盖其余40％的屏幕。我没有运气就尝试过扩展类。任何反馈/建议将不胜感激。

     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",page3());
                print("Container clicked 2");
              },child: Container(
               child: Column(
                children: [
                  Image.asset('assets/main/page3.jpg'),Text("Record",page4());
                print("Container clicked 3");
            },child: Container(
               child: Column(
                children: [
                  Image.asset('assets/main/page4.jpg'),Text("Page4",)
                ]),new InkWell(
              onTap: (){
                print("Container clicked 4");
            },child: Container(
               child: Column(
                children: [
                 Image.asset('assets/main/page5.jpg'),Text("Page5",new InkWell(
              onTap: (){
                print("Container clicked 5");
            },],);
  }``` 

解决方法

AFAIK，GridView是可滚动的，因为有时网格可能包含大量（或无限）数量的子项，而这些子项无法容纳整个屏幕。如果这不是您想要实现的，那么我建议您仅使用rows and columns。

此外，如果您通过使用所选的IDE中的“转到定义”操作来检查GridView.count()的属性，它将引导您进入 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,page3());
                  print("Container clicked 2");
                },child: Container(
                  color: Colors.green[300],child: Column(children: [
                    // Image.asset('assets/main/page3.jpg'),Text(
                      "Record",page4());
                  print("Container clicked 3");
                },child: Container(
                  color: Colors.green[400],child: Column(children: [
                    // Image.asset('assets/main/page4.jpg'),Text(
                      "Page4",)
                  ]),new InkWell(
                onTap: () {
                  print("Container clicked 4");
                },child: Container(
                  color: Colors.green[500],child: Column(children: [
                    // Image.asset('assets/main/page5.jpg'),Text(
                      "Page5",new InkWell(
                onTap: () {
                  print("Container clicked 5");
                },],Expanded(
          flex: 40,child: GridView.count(
            crossAxisCount: 1,child: Container(
                    color: Colors.green[600],Text(
                        "Remaining 40%",);}

重复使用您的代码（注释掉了一些不需要的部分，并出于视觉目的对其进行了增强），我将2 GridView.count()包装到2个单独的Expanded()小部件中，以便可以设置flex factor分别为60和40。在第二个GridView.count()上，我将crossAxisCount设置为1，以填充屏幕的剩余40％。