Question

我试图添加GridView，但是无论如何我都会在应用程序中获得数据：

引发了另一个异常：RenderFlex在底部溢出了51个像素。我想我需要添加一个搜索该错误后发现的listview，但是我不知道如何添加代码，因为我是新手

make CC=gcc

Answer 1

尝试以下操作：

SingleChildScrollView(
    child:Expanded( 
      child:GridView.count(
       primary: false,
       padding: const EdgeInsets.all(20),
       crossAxisSpacing: 10,
       mainAxisSpacing: 10,
       crossAxisCount: 2,
       children: <Widget>[
        GridList()
      ],
    )
)

一个可以滚动单个小部件的框。

当您有一个通常通常完全可见的单个框（例如时间选择器中的钟面）时，此小部件很有用，但是如果容器在一个轴上变得太小，则需要确保可以滚动它（滚动方向）。

https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

Answer 2

我对您的代码进行了一些更改。我已附上输出的屏幕截图您基本上是一起使用Fliexible和Expanded。和嵌套的GridView 输出 文件名：main.dart

import 'package:flutter/material.dart';
import 'GridList.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
          body: Column(
        children: <Widget>[
          Container(
            height: 240,
            width: double.infinity,
            color: Colors.blueAccent,
          ),
          Expanded(child: GridList())
        ],
      )),
    );
  }
}

文件名：GridList.dart

import 'package:flutter/material.dart';

class GridList extends StatelessWidget {
  Items item1 = new Items(
    title: "Calendar",
    subtitle: "March, Wednesday",
    event: "3 Events",
  );
  Items item2 = new Items(
    title: "Groceries",
    subtitle: "Bocali, Apple",
    event: "4 Items",
  );
  Items item3 = new Items(
    title: "Locations",
    subtitle: "Lucy Mao going to Office",
    event: "",
  );
  Items item4 = new Items(
    title: "Activity",
    subtitle: "Rose favirited your Post",
    event: "",
  );
  Items item5 = new Items(
    title: "To do",
    subtitle: "Homework, Design",
    event: "4 Items",
  );
  Items item6 = new Items(
    title: "Settings",
    subtitle: "",
    event: "2 Items",
  );

  @override
  Widget build(BuildContext context) {
    List<Items> myList = [item1, item2, item3, item4, item5, item6];
    var color = 0xff453658;

    return GridView.count(
        childAspectRatio: 1.0,
        padding: EdgeInsets.only(left: 16, right: 16),
        crossAxisCount: 2,
        crossAxisSpacing: 18,
        mainAxisSpacing: 18,
        children: myList.map((data) {
          return Container(
            decoration: BoxDecoration(
                color: Color(color), borderRadius: BorderRadius.circular(10)),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  height: 14,
                ),
                Text(
                  data.title,
                ),
                SizedBox(
                  height: 8,
                ),
                Text(
                  data.subtitle,
                ),
                SizedBox(
                  height: 14,
                ),
                Text(
                  data.event,
                ),
              ],
            ),
          );
        }).toList());
  }
}

class Items {
  String title;
  String subtitle;
  String event;
  String img;
  Items({this.title, this.subtitle, this.event, this.img});
}

引发了另一个异常：RenderFlex在底部溢出了51个像素

2 个答案: