Flutter 中的GridView

Question

我正在开发一个 flutter 项目，我制作了一个带有图像和标题的 GridView，但我希望标题位于正方形之外，如果我进行填充，他们会给出此错误 BOTTOM OVERFLOWED BY 32 PIXELS。非常感谢任何帮助。

这是我的代码：

Card makeDashboardItem(String title, String img, int index) {
    return Card(
      elevation: 2,
      margin: const EdgeInsets.all(3),
      child: Container(
        child: InkWell(
          onTap: () {
            setState(() {
              isLoading = true;
            });
            _splitScreen2(index);
          },
          child: Column(
            children: <Widget>[
              const SizedBox(height: 10),
              Center(
                child: Image.asset(img,
                    alignment: Alignment.center),
                ),
              const SizedBox(height: 1),
              Center(
                child: Text(
                  title,
                  style: const TextStyle(
                      fontSize: 13,
                      color: Colors.black,
                      ),
                ),
              ),
            ],
          ),
      ),
      ),
    );
  }

Answer 1

检查 DartPad

主要问题是溢出，所以我们将

Expanded

小部件包装在

Image

小部件上。

Nb：从图像小部件中删除扩展小部件您可以看到差异

卡片小工具

    class ItemWidget extends StatelessWidget {
  var data;

  ItemWidget(this.data, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      child: Card(
        child: Column(
          children: [
            Expanded(
              child: Container(
                height: 125,
                child: Image.network(
                  data["Image"],
                  alignment: Alignment.center,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Center(
                child: Text(
              data["Name"],
              style: TextStyle(fontSize: 12),
            ))
          ],
        ),
      ),
    );
  }
}

完整代码

import 'package:flutter/material.dart';


  runApp(
    MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()),
  );
}



class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    var list = [
      {
        "Name": "ElectroniQues",
        "Image":
            "https://ecommerce.ccc2020.fr/wp-content/uploads/2020/10/electronic-gadgets.jpeg"
      },
      {
        "Name": "Accessories",
        "Image":
            "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/classic-accessories-1516305397.jpg"
      },
      {
        "Name": "Hommes",
        "Image":
            "https://teja12.kuikr.com/is/a/c/880x425/gallery_images/original/cf5d08bff955e71.gif"
      },
      {
        "Name": "Femmes",
        "Image":
            "https://cdn.pixabay.com/photo/2013/07/13/14/08/apparel-162192_1280.png"
      },
      {
        "Name": "Enfants",
        "Image": "https://images.indianexpress.com/2019/09/toys.jpg"
      },
      {
        "Name": "Sunglasses",
        "Image": "https://m.media-amazon.com/images/I/51zEsraniRL._UX569_.jpg"
      },
      {
        "Name": "ElectroniQues",
        "Image":
            "https://ecommerce.ccc2020.fr/wp-content/uploads/2020/10/electronic-gadgets.jpeg"
      },
      {
        "Name": "Accessories",
        "Image":
            "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/classic-accessories-1516305397.jpg"
      },
      {
        "Name": "Hommes",
        "Image":
            "https://teja12.kuikr.com/is/a/c/880x425/gallery_images/original/cf5d08bff955e71.gif"
      },
      {
        "Name": "Femmes",
        "Image":
            "https://cdn.pixabay.com/photo/2013/07/13/14/08/apparel-162192_1280.png"
      },
      {
        "Name": "Enfants",
        "Image": "https://images.indianexpress.com/2019/09/toys.jpg"
      },
      {
        "Name": "Sunglasses",
        "Image": "https://m.media-amazon.com/images/I/51zEsraniRL._UX569_.jpg"
      },
    ];
    var column = Column(mainAxisAlignment: MainAxisAlignment.start, children: [
      ...list.map((e) {

        return GestureDetector(onTap:(){},child: ItemWidget(e));
      }).toList()
    ]);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Row(
          children: [
            SideWidget(),
            Expanded(
              child: Scaffold(
                bottomNavigationBar: buildBottomNavigationBar(),
                body: Padding(
                  padding: const EdgeInsets.only(top: 18.0),
                  child:
                      // column
                      GridView.count(
                    crossAxisCount: 3,
                    mainAxisSpacing: 2,
                    crossAxisSpacing: 2,
                    children: [
                      ...list.map((e) {

                        return InkWell(onTap:(){},child: ItemWidget(e));
                      }).toList()
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  BottomNavigationBar buildBottomNavigationBar() {
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          label: 'Business',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          label: 'School',
        ),
      ],
      currentIndex: 0,
      selectedItemColor: Colors.amber[800],
      onTap: (v) {},
    );
  }
}

class SideWidget extends StatelessWidget {
  const SideWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        width: 63,
        color: Colors.white,
        child: ListView(
          children: [
            ...[
              Icons.headset,
              Icons.pets,
              Icons.watch,
              Icons.color_lens,
              Icons.today
            ]
                .map((e) => Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 16.0, horizontal: 4.0),
                      child: TextButton(
                        onPressed: () {},
                        child: Icon(
                          e,
                          color: Colors.blueGrey,
                          size: 40,
                        ),
                      ),
                    ))
                .toList()
          ],
        ),
      ),
    );
  }
}

class ItemWidget extends StatelessWidget {
  var data;

  ItemWidget(this.data, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      child: Card(
        child: Column(
          children: [
            Expanded(
              child: Container(
                height: 125,
                child: GridTile(
                  // footer:Text(data["Name"]) ,
                  child: Image.network(
                    data["Image"],
                    alignment: Alignment.center,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            Center(
                child: Text(
              data["Name"],
              style: TextStyle(fontSize: 12),
            ))
          ],
        ),
      ),
    );
  }
}

Answer 2

GridView

子项大小取决于宽高比，默认情况下为

1

。在您的情况下，图像没有获得适当的高度。

对于您的情况，您可以在

fit

上使用

Image.asset

。

Image.asset(
  "",
  fit: BoxFit.cover, // or the .width or the one you prefer
),

你也可以尝试

GridTile

GridTile(
  child: Image.asset(
    "",
    fit: BoxFit.cover,
  ),
  footer: Text("title"),
),

更多关于 GridTile 和 BoxFit。

Answer 3

首先，你创建widget树的方式不正确。 目前，您已经

Card -> Container -> Column -> 1. Image
                               2. Text 

如果您希望标题超出您的方块（卡片），则应该是：

Column -> 1. Card -> Image
          2. Text

这样你的头衔就会从卡片中消失。

Answer 4

https://drive.google.com/drive/mobile/folders/1XpjjDwDC9uNXEsLER0_5JhHb-KqtkoMW?usp=sharing - 我的示例，gridview 从数据库插入、删除、编辑数据