0

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

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

1 回答 1

0

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

此外，如果您将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%。

于 2020-09-11T20:40:09.030 回答