Flutter

Question

我一直在尝试使用 flutter 和 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");
            },
          ),

          ],  
                               
        ),        
        ),
       );
  }```

Answer 1

据我所知，GridView is scrollable since there are times that a grid could contain a large (or infinite) number of children that wouldn't fit in the entire screen. If this is not what you wanted to achieve, then I suggest just using 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,
                          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% 屏幕。

Flutter - GridView 自定义尺寸问题

Flutter - GridView Custom Size Issue

gridview

resize

flutter-layout

flutter-container